Storyboard

312 views

Published on

Published in: Self Improvement
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
312
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Storyboard

  1. 1. Storyboard 2/15/2012 www.patriciamdecker.wordpress.com This website was a combination of a professional writer and graphic designer’s portfolio and a lighthearted, illustrated collection of recipes. The following is a preliminary demonstration of features and design elements for the new website.
  2. 2. Network Map
  3. 3. Main Page The search function and website header here will ensure that the user has multiple options to reach information they need.
  4. 4. Main Page A header here will help lend a cohesive feeling to the site and define the theme of all of the pages
  5. 5. Main Page These are the primary navigation menu items, and will be “Home” “ All Recipes” and “Contact”
  6. 6. Main Page This featured posts Section will allow for a few easy and quick recipes to be displayed in part: this will highlight both the illustrations and the recipes themselves. Clicking on the “read more” button will enable a user to quickly navigate to the recipe page.
  7. 7. Main Page This side navigation bar will include a list of recipes by category along with an “About the Cook” section. The best portfolio item for a graphic designer is a well-designed website, and in place of a full page dedicated to the author, this “about” section on the homepage will have a small Flickr feed below it that will display portfolio images, along with another search function.
  8. 8. Main Page This is the most recent post, which will be displayed in its entirety. Below it, several of the next recent posts will be listed by title (clicking on them will take the user to the individual recipe pages)
  9. 9. Main Features Section If the title is incorporated into the header, this part can be eliminated and the search function brought down to the RH side of the navigation bar.
  10. 10. This will be a hand-drawn header that reflects the new name of the website, “Dabbles and Doodles” which represents the dual nature of cooking and illustration Main Features Section
  11. 11. This is optional text, and depending upon page length may not be the best idea for the home page. Main Features Section
  12. 12. These are small indicators that let the user know how many featured posts there are and what post is currently being displayed. Main Features Section
  13. 13. This displays on each recipe, and links to the individual recipe page. Main Features Section
  14. 14. This is the navigation and widget side bar that displays on the side of the main page. This will have, in order, a list of categories that the user can click on to view only posts within that category, an “About the Cook” section that will have a picture and a short description of the website owner, a Flickr feed of portfolio items, and a search function that will enable the user to search the entire website. Main Feed Section
  15. 15. If the individual post has visible share buttons, they will appear here. Main Feed Section
  16. 16. Clicking on this category will take the user to other posts in that category Clicking on any of these categories will take users to other posts in that category Clicking on any of these categories will take users to other posts in that category Main Feed Section
  17. 17. These are the other more recent posts displayed by only the post title. Main Feed Section
  18. 18. All Recipes Page Clicking on the “All Recipes” link in the main navigation bar is the only way to reach this page.
  19. 19. This sidebar displays the archived posts by date All Recipes Page
  20. 20. Posts are listed with featured posts first, and then in chronological order. All Recipes Page
  21. 21. As a user scrolls down, more recipes become visible to ensure that the reading flow is uninterrupted. All Recipes Page
  22. 22. Individual Recipe Pages This is the title of the recipe
  23. 23. Notice that there is no secondary navigation on the individual recipe pages Individual Recipe Pages
  24. 24. Below the post will be listed the category, share buttons (if selected) and any comments made, along with a form for users to make their own comments on the Post. Individual Recipe Pages
  25. 25. Individual Recipes Comment Area Users can log in using social tools to post a comment with ease
  26. 26. If the user chooses not to log in using social tools, they will be required to fill out a few personal details to submit a comment, for tracking purposes. Individual Recipes Comment Area
  27. 27. Users can choose to keep track of future comments and posts via email notifications. Individual Recipes Comment Area
  28. 28. Contact Page Clicking on the main navigation bar is the only way to reach this page.
  29. 29. This will include a contact form for users to reach the website owner. Contact Page
  30. 30. Storyboard 2/15/2012 www.patriciamdecker.wordpress.com The new site design will do a better job of showcasing the art and illustrations, and will give the user a better idea of what the website is about. The portfolio elements will be largely included in the main page sidebar, which will avoid confusing a user torn between an online portfolio and a recipe list.

×