4Site Studios RedesignJune 11 2013
Contents1. Sitemap2. Homepage3. Standard Interior Page4. Our Work Landing Page5. Project Page6. Our Products Page7. What W...
Sitemap
Specifications - Sitemap( 1 ) :Each project will appear in a gallery. When a user clicks on each item, they will see a des...
Homepage
Specifications - Homepage( 1 ) :This button will move down the page with the user as they scroll.( 2 ) :When a user clicks...
Standard Interior Page
Specifications - Standard Interior Page( 1 ) :The subpage navigation acts as controls for a paralax scrolling page. The su...
Our Work Landing Page
Specifications - Our Work Landing Page( 1 ) :When clicked, this grid of logos will dynamically change into a listing of cl...
Project Page
Specifications - Project Page( 1 ) :Slideshow displaying images from client project( 2 ) :Name of client project( 3 ) :Sho...
Our Products Page
Specifications - Our Products Page( 1 ) :When a new service icon is clicked, the content below will shift to display the p...
What We Do Landing Page
Specifications - What We Do Landing Page( 1 ) :When a new service icon is clicked, the content below will shift to display...
Who We Are Page
Specifications - Who We Are Page( 1 ) :Brand video from the homepage( 2 ) :Animated gif showcasing our logo evolution over...
Our Insights Landing Page
Insight Page
Specifications - Insight Page( 1 ) :Social sharing buttons( 2 ) :Comments will use the Disqus service versus Drupal core c...
Upcoming SlideShare
Loading in …5
×

New 4SiteStudios.com Wireframes

973 views
925 views

Published on

Wireframes and annotations describing the user experience design and content structure for the new 4Site Studios website, being built in Drupal.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
973
On SlideShare
0
From Embeds
0
Number of Embeds
630
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

New 4SiteStudios.com Wireframes

  1. 1. 4Site Studios RedesignJune 11 2013
  2. 2. Contents1. Sitemap2. Homepage3. Standard Interior Page4. Our Work Landing Page5. Project Page6. Our Products Page7. What We Do Landing Page8. Who We Are Page9. Our Insights Landing Page10. Insight Page
  3. 3. Sitemap
  4. 4. Specifications - Sitemap( 1 ) :Each project will appear in a gallery. When a user clicks on each item, they will see a description of the project appearover the image/video in the gallery.( 2 ) :Each services subpage will contain a webform so people can contact us directly about each service.( 3 ) :All of our thought leadership content - blog posts, case studies, white papers, and presentations - will be organizedinto one page. Users will be able to filter by content type, topic, and other related metadata.
  5. 5. Homepage
  6. 6. Specifications - Homepage( 1 ) :This button will move down the page with the user as they scroll.( 2 ) :When a user clicks on an image, the image will increase in size, with a CSS shadow below. A description of theproject will appear over the image.( 3 ) :Each of these could be an image with the name of the service. When you hover over the image, an animated gifplays, showing us doing some aspect of thr work.( 4 ) :This image will be static until clicked. Once clicked, it will turn into a video player showing our brand video.( 5 ) :Thumbnail image from the content type.( 6 ) :Thumbnail of the author, linking to their staff bio.( 7 ) :Icon representing the type of resource( 8 ) :Image(s) that represents the rich history and culture of the Columbia Heights neighborhood.
  7. 7. Standard Interior Page
  8. 8. Specifications - Standard Interior Page( 1 ) :The subpage navigation acts as controls for a paralax scrolling page. The subnavigation be persistent on the page asa user scrolls, overlaying on top of content.( 2 ) :Each page will contain a title and a short blurb containing the key message for each page.
  9. 9. Our Work Landing Page
  10. 10. Specifications - Our Work Landing Page( 1 ) :When clicked, this grid of logos will dynamically change into a listing of clients grouped by cause.( 2 ) :When this masonry gallery of client projects is filtered, it will automatically display the client projects matching thesearch criteria.( 3 ) :When a user hovers over any image in the gallery, they will see the title of the project, client name, and shortdescription of the project. They can then click to read more about each project.( 8 ) :Image(s) that represents the rich history and culture of the Columbia Heights neighborhood.
  11. 11. Project Page
  12. 12. Specifications - Project Page( 1 ) :Slideshow displaying images from client project( 2 ) :Name of client project( 3 ) :Short client testimonial
  13. 13. Our Products Page
  14. 14. Specifications - Our Products Page( 1 ) :When a new service icon is clicked, the content below will shift to display the page for the related service
  15. 15. What We Do Landing Page
  16. 16. Specifications - What We Do Landing Page( 1 ) :When a new service icon is clicked, the content below will shift to display the page for the related service
  17. 17. Who We Are Page
  18. 18. Specifications - Who We Are Page( 1 ) :Brand video from the homepage( 2 ) :Animated gif showcasing our logo evolution over the past 12 years.( 3 ) :Graphic describing our process( 4 ) :Social media icons will open social media profile in a new window
  19. 19. Our Insights Landing Page
  20. 20. Insight Page
  21. 21. Specifications - Insight Page( 1 ) :Social sharing buttons( 2 ) :Comments will use the Disqus service versus Drupal core comments

×