The red ( could be the logo, the "start button" and other calls to action. Maybe the blue could be the nav bar. Maybe we could use the gray/beige as a background color like Pinterest. I would like us to use blue for the link color, like Google does, and purple for visited links (like Google). I would like us to use underline on hover. I want it to be very clear what is clickable. Maybe article titles could be the charcoal color bolded.
Here is a description of the mockup:
(1) The header will look very similar to the Pinterest.com header. On the left is an icon with lines. By clicking on this icon a person will be able to see the menu of sites and sections in our network (like Pinterest shows categories). Please round the corner of this icon and the other icons and search box, like Pinterest does. To the right of that we will have a search box (similar to the header of Pinterest.com). To the right of that is the Adoption.com logo (please provide that to the designers), which is centered on the page. To the right of that is a little plus button people can click on (like Pinterest) to add content to the site. To the right of that is a follow button that will expand to show all the different ways people can share follow us (facebook, pinterest, google+, twitter, email lists, etc. Instead of saying "follow" maybe the button could have the Facebook "f" icon and an email icon. I'm open to the best way to communicate that. To the right of that if the visitor is not logged in, it will have buttons to "join" or "login". I would like the designer to create logged in and logged out versions of the page. Those will both be pull-downs that give the ability to login or start the registration process without going to another page. If the person is logged in (like on Pinterest), it will show their profile picture and their name. By clicking on that, it will show links to their messages, their content, their friends, etc. If they have messages, notifications, updates to threads they have subscribed to, friend requests, etc. then we need to show a red circle with the number of those messages they have not looked at yet (like Facebook in the header when you have invitations).
(2) Below the header, we would like a promotions box (like Pinterest does below their header) with a light yellow background. We will use this to encourage registration on the site, if they are not registered or logged in. If they are logged in, we can use that space to promote something else to the members. Look at the yellow promotion box at the top of FamilyShare.com, except this one will be full width.
(3) Below the promotion box I would like a full-width "hero" story, similar to thenational.boncom.com. The title needs to be displayed on top of the image of the hero story (similar to thenational.boncom.com). Only stories with quality images can be featured in the hero position. The title needs to be automatically placed on top of the hero image, maybe on top of a semi-transparent dark gray background. Maybe we should build the system so the content producer can choose from a variety of different positions where the title can be displayed on top of the image, depending on the image. Look at how USAtoday.com puts titles of articles in the grid on top of semi-transparent dark gray backgrounds.
(4) Below the hero story we would have our "filter nav bar". The items in this nav bar are tabs that filter and control the content that is displayed in the grid below the filter nav bar. The default tab that will be selected is "Recent", which will show the most recent stream of the top content across our adoption sites. The Recent and Popular tabs are right justified because we want to prioritize the other items in the nav bar. To the left of this bar we will have a red "start" arrow. This bar embodies one of the most important jobs to be done on the site and needs to grab attention.
(5) Below the filter nav bar are the content boxes. These content boxes will be 320 pixels wide. The iPhone size will only have one column. On a desktop resolution, the visitor should be able to see 3-4 columns depending on their browser width. The columns should never be larger than 320 pixels wide. The number of columns should dynamically adjust as visitors change the width of their browser. The content boxes will be a stream of content, like Pinterest.com or FamilyShare.com content. Please look at BuzzFeed.com on a mobile browser to get an idea how the main page could look in the grid portion. Also, we want the ads on mobile to be 300x250 ads that are full-width, and scroll with and just like the content instead of being fixed on the page. We will have a variety types of content. In the top left of each content box (instead of ads), we need to clearly identify the type of content (such as "video", "answer" or "discussion" for that content box. At the bottom of each content box, we need to have a link to more of that type of content, with links such as "more videos". In other words, the content boxes aren't just about featuring specific content, but they are also about showing the types of content we have, and helping get people to those content areas. Also, in each content box, when they hover over the box, please show the engagement on that content. For example, if you are showing a question, please show the number of answers. If you are featuring an article, please show the number of comments. In other words, we want to show people engaging with the content. Also, when people roll-over content (like on Mashable), we want little share buttons to appear for Facebook, Pinterest, Google+ and Twitter. When they roll off the content box, the share icons disappear. If the content item is a video, then we should show the play icon on top of the image. If the content box is an ad (300 pixels wide), it needs to have the word "advertisment" on top of it (like blogher.com puts on top of their ads). We will have an ad after the 3rd content post, and then after every 6 content post thereafter. Please put 300x250 pixel graphical ads in the design. Please have one of the content boxes be a subscription for our newsletter. We will have a variety of different types of content boxes (articles, videos, discussions, questions and answers, member blogs, user-submitted photos, waiting children, profiles of hopeful adoptive parents, multi-page lists, daily deal, product reviews, etc.). Please try to design what each of these types of content looks like. In the Answers content box where users can ask a question, and other boxes where the users can enter content from the main page, please only show the field to enter content when the visitor has hovered over that box. I think all content boxes should go to the full edge of the 320 pixel column. Look at content boxes on FamilyShare.com, Pinterest.com, Mashable.com, thenational.boncom.com and BlogHer.com to get ideas for your design of content boxes, but don't be limited by these. Use your creativity.
(6) Native advertising is sometimes called content marketing or sponsored content. I think we're going to call it "Sponsored Content". Please look at the Native Advertising on BuzzFeed.com as you go through their feed of content. Some of their articles have different color background and are sponsored by someone. We need to be able to have similar sponsored content (articles, videos, etc.) that adoption agencies and attorneys can sponsor.
(7) The first ad will be a local ad, where we identify the geographic location of the visitor and show adoption services, and links to adoption content in that geographic location. We will use the GEOIP database to identify this info. Notice the fourth box of content I have reserved for this. We also want to link to invite them to down load a free local adoption guide ebook. For example if we know they are Idaho, we should have a free Idaho adoption ebook that they can download. We will use this for lead generation and sell the leads to adoption professionals.
(8) Because we're going to have a continuously-loading pages, we can't really have a traditional footer. Look at the Pinterest.com site in the footer. They have the same problem. The copyright notice and other information normally in a footer will need to be in the first icon in the header, like Pinterest does it.