This is to get an idea on how it should work and how it should look. The project is for the entire website, if you find some screen that is not included on this file, but exists on the current pin.uphaa.com. You'll have to adapt it to the new visual style

 

Name Comments
   
Design including the mobile version  
Home page  
Wall section  
Post section  
Inside wall  
Post detail page  
Add posts  
   
Login popup  
Registration popup  
Text page  
Good store store category page
Good store category page
Star user with popup
Face wall  
Hobby group  main
Hobby group  group page
My Pin  
My Pin Edit account
User page  
create share popup 2 types
avatar settings popup  
create album  
my album  
timeline  
create topic  
my topics  
create group  
my group  
My friends  
My alerts  
My messages  
Basic settings  
Security settings  
Bind account  
Nesting  
Home page  
Wall section  
Post section  
Inside wall  
Post detail page  
Add posts  
   
Text page  
Good store store category page
Good store category page
Star user with popup
Face wall  
Hobby group  main
Hobby group  group page
Hobby group   
My Pin Edit account
My Pin  
User page 2 types
create share popup  
avatar settings popup  
create album  
my album  
timeline  
create topic  
my topics  
create group  
my group  
My friends  
My alerts  
My messages  
Basic settings  
Security settings  
Bind account  
Unpredicted pages  
   
Other  
Testing responsiveness  
Testing validation  
   
Social integration  
   
Content  
DB review  
Upload script  
Actual upload  
Testing path to images, videos and other media content and corrections  
Other  

 

 

 

HOME PAGE


 On smaller screens, popular walls and new walls have the same size. Check mashable.com and test with different screen sizes



 

The Home page will show the all new post like mashable.com, including the infinity scroll, ad spaces every "X" items.  And the look will be like similar to i have given a layout below.

 

New Walls on Home

It shows 5 thumbnails extracted from the post inside the wall ( 1 big and 4 small )

Wall title

Wall description

like/views/comments

newwalls-mouse-over.jpg

On mouse over the options to share like the sample i provide. Check weheartit.com


THE SHARE OPTIONS WILL INCLUDE PINTEREST BUTTON TOO ON ALL SHARING PAGES

 

 

Popular Walls on Home

It shows 3 thumbnails extracted from the post inside the wall ( 1 big and 2 small )

Wall title

Wall description

like/views/comments

On mouse over the options to share like the sample i provide. Check weheartit.com

popularwalls-mouse-over.jpg

 

New Posts on homepage 

It shows 1 thumbnails, if the post have multiple pictures inside, only the cover will be shown

Post Title

like/views/share

On mouse over the options to like. Check weheartit.com

post-mouse-over.jpg

 

Home section mobile




 


it should looks something like this, the user will be able to login... follow user, surf and like posts or walls, create walls and retape content, surf categories
 
 

 

Wall Section

 

The wall section will show the all categories of walls.

All Category    hotest - lastest - most shared  -   

Also  the  link to all categories 

Also include a small button to “create a wall”. The location button could be under the  “all category” block  you see on the above image.  But, it can be located in a better place if you find it.

Every wall has the 3 thumbnails of the items inside it

besides the title, and the stats about that wall  (like/views/comments) The user can like or follow the user that  made that wall or share the wall from this windows.

popularwalls-mouse-over.jpg

 

Post section

 

The current is http://pin.uphaa.com/album    It will show the all posts  with the image, title, ( like/view/comment ) and the last 3 comments.

 

On the general post section, you’ll see all the post ordered by likes, by shares, and also by categories  like the sample

User can comment the post from this section without open the post , just clicking on the comment icon  on mouse over.

 

 

 

 

Inside a wall

wall-article.jpg

Inside a wall is what you see after click on any wall, and is the previous step to the single post template.

Inside the wall is not the same as “the walls” template.  Current is  http://pin.uphaa.com/as/7 check it to include all the functionality that already has and that is not included on the image like” activity” under the sidebar

 

 

This is just like what you see on is  http://pin.uphaa.com/as/7  the only difference is that we put “trending post” on the right  with the 4 most viewed post from the last 24hs/week/month. The admin can choose that option.  Also can be a to show a special banner. It need the option to show

x times per session a banner.  We have a button that the user will add to his browser so he can "add post" from his browser. The COLLET TOOL   check http://pin.uphaa.com/faq/fav   so the idea is alternate this space promoting that tool, or another new site feature  and promoting trending posts.

 

On the right, same functionality as the current, you can click on fans follows shares walls to see what is inside

On the bottom…same as you saw on the current but with the new visual style… with papecut backgrounds… taped items…  ask me when you get there.

And in the middle… the name of the current album

 

On the left side will be the wall description… currently that data is stored as album description.

And about the tapes.. I  think on the first samples the tapes were too big… now on the picture above are the small tapes… as you can see are smaller and looks better. Use them for all the site, if some template require a different style , just let me know and we’ll see.

 

 

 

Post Detail Page

 

The titles, wall names , source  tape it button , main image, ( like/view/color search ) , post description, tag links,  NEXT button link , it shows  the next item inside the wall…. But if you can find the way to add intuitive arrows at the sides of the page… let me know,  just ask me when you get there.

The current is http://pin.uphaa.com/s/12

Sidebar

c

On the side bar there is the ad space 300x250  300x600 

More content from the same user and the button to follow that user

Similar entries to the current post ( not the same that similar walls ) and the option to a random post.

The top message can be removed by the logged  visitor if he wants, in that case the ad space will be first.

Also, is not in the picture but is a current post but with the new visual style.  Check  http://pin.uphaa.com/s/6.

 

Comments under the post

It shows the last 5 comment just like the sample, with a pagination for the next comment


 

Related content

It shows all the WALLs that are related to the current wall,  on the image above it shows like posts, but it should be like walls and with infinite scroll and mouse over functionality like “walls section”. 

If you see a post  from starting from  a wall… you see related walls…. If you see an post starting from a post … you’ll see related post, not related walls

 

On mouse over

 

It shows the option to like,  retape ( use the post on a different wall )   and share on facebook and twitter, and  mail option should be there too.

When you click on like the “like” heart inside the mouse over and the heart under the picture, it color turns into red/pink

 

There are also extra buttons on the corner for social media sharing…

 After click on tape it

 

The fields inside are already loaded, but if the visitor wants to create he's own version, he can modify a new version, The original still keeps there.

 

after that can choose to... keep surfing or go to his wall to add more content 

This is his wall, here he can add more posts or share his wall

if he choose add content he can add by adding a url, uploading or searching inside the page

this is the windows for add new content by url

the data comes when you add the url... the default title default description all of them should come from the source,  and the visitor can modify... the choose or create a wall, and select the category  and create or select tags.  

There are default tags added to specific categories, but the user can add more

the post was added to the wall

the user still can add more content uploading from her pc 

the windows is similar but it has the upload feature

when he finish, hi can share his post  by default to facebook and twitter, also it has to be the option to share by email.

the user can share in this way   walls or just posts.

 

 

 

 

The other sections

There are other sections  ( like user profile, message,footer,collect tool etc etc )on the site  we just need to adapt to the new visual style.   They do the same thing but with a visual style according with the new colors and styles. Please ask me when you get there

 The collect tools currently looks ugly, we need to improve its design

The menu

Is not finish yet but, it will show the same items that you see on the current pin.uphaa.com, the only difference is that activity get all the items from square  and also activity  and instead the bell and the mail… we have a notification counter for both  and instead of the puzzle icon  we have the tape it button…. Its still ugly but, your designer will find a way to look good.

The menu keeps always on top, even when you scroll… but the ads is not fixed


 

Facebook/twitter integration

Currently the  script  allows you to login with your fb or tw id.

When the facebook app ask for permissions it has to require also  “add to my timeline” and “This app may post on your behalf”. The idea is the same I told you on skype, if someone like a post, or create a wall, it shows on the facebook activity  and news feed, jus like pinterest and weheartit

 

 

Content import from the current uphaa,com

So far we run uphaa.com on wordress, we share articles that we show as galleries.  What we need is import the items of that gallery as POST on the new site… and group them on wall with the same title of the article and with the description of the wall.

Lets say we have 

 

The 10 Most strange Hats

This listing is about strange hats that we see around the world

1-      EDIBLE HAT

Image

Description of the edible hat

 

2-      Grass hat

Image

Description

 

So  ”Edible hat” will be an POST… with that title and the image and the description….. same with “grass hat”, it will be a POST too.

Those posts will be  group in a WALL called  “The 10 Most strange Hats”  and that wall will have a description saying “This listing is about strange hats that we see around the world”, same as the intro of the article in wordpress.

I write the articles in only 2 ways so you can see the pattern when you extract them

1)

<h1> MAIN TITLE</h1>

Description about the article

<h2>ITEM 1 TITLE</h2><CENTER> IMAGE</CENTER>

DESCRIPTION OF ITEM 1

 

<h2>ITEM 2 TITLE</h2><CENTER> IMAGE2</CENTER>

DESCRIPTION OF ITEM 2

 

AND SO ON….

 

 

2)

<h1> MAIN TITLE</h1>

Description about the article

<CENTEr>

<p> image 1</p>

Description image 1

<p> image 2</p>

Description image 2

</CENTEr>

 

 

 

 

Some obs

The entire site will be responsive css, seo friendly and w3c validated.

There are some details that are not included on this file that you should verify, for example on sidebar you see a white square…. But you have to adapt to looks like a a papercut  just like the entire site… and things like that.

Check the facebook like feature that I mention before…. When the user likes a post…. In here timeline shows that she likes that….if she create a wall…. In her timeline shows that… please check pinterest.com to understand how it works

About the home, it should have the same functionality than the site you see at mashable.com , infinite scroll, space ads every ” X” items, please ask me when you get there.