Final Project – DUE TODAY

 

CONGRATULATIONS! Work well-done!

Remember you must attend our last class and present your final project in order to receive a grade for it.

Final Project: Due Thursday, December 13

Next iteration of midterm project prototype

Specifications:

  • Make the visual design your own

    In order to use this project in your portfolio, make the visual design your own. Change the name of the brand. Incorporate more of your own visual assets. For this project, it’s fine to use existing copy. I want to see a complete redesign… not just a reorganization and version of the existing design.

    Study other responsive websites: http://mediaqueri.es/

  • Think about how your navigation is going to adapt from desktop to mobile.

    One of the more difficult issues to resolve in responsive design is how to adapt your navigation. How will the navigation layout change from the desktop version, to the tablet, and finally the mobile website? Be sure to review and study other responsive websites in order to gain a better understanding of feasible options. Check out Responsive navigation patterns by Brad Frost. I recommend you use one of the navigations listed below. They are listed from easy to difficult:

    Top Nav or “Do Nothing” Approach
    Simple Mobile First Navigation
    Menu to a Drop Down
    Toggle Navigation (aka FlexNav)
    Responsive Toggle Nav
    Multi Toggle Navigation
    Pull Down for Navigation

  • Incorporate jQuery (or jQuery mobile) into your final mobile design

    Integrate a feature in your design that uses a a jQuery plugin

  • Build a responsive design

    Using the technique from the “flexible” scaleable prototype built for the midterm, add media queries to your project to make the site responsive. (Or use a responsive design framework like Skeleton to build your site. If you want to use a framework for your final project, please talk to me about it first.) Build three to four pages of the site in HTML5/CSS. Post final project to the class server along with your new design comps in the source file folder.

  • Test your design on other mobile devices

    Before you finish building the site (and after a version is uploaded to a class server), view your design on multiple devices. I recommend you go to a Staples, OfficeDepot, Radio Shack, AT&T, or Verizon store. Any store that has an array of different devices so you can look at your design on several devices with a variety of different dimensions.

    Please upload your final project to the class server before our class at 6:30pm on Thursday, December 13.

 

Helpful Resources

Best Practices for Responsive Websites
http://www.catswhocode.com/blog/tips-and-best-practices-to-develop-responsible-websites

Responsive Web Design Tools
http://www.hongkiat.com/blog/rwd-tools/

Build a Responsive Website in a Week (Four parts)
http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1 

Skeleton (Framework for Responsive Design)
http://www.getskeleton.com/

Create a mobile website using jQuery mobile
http://www.netmagazine.com/tutorials/create-mobile-website-jquery-mobile

Build a Responsive, Mobile-Friendly Web Page With Skeleton
http://designshack.net/articles/css/build-a-responsive-mobile-friendly-web-page-with-skeleton/

Responsive Web Design Testing Tool
http://mattkersley.com/responsive/ 

Vector Icons for Responsive Web
http://www.awwwards.com/thousands-of-free-vector-icons-and-icon-webfonts-for-interfaces-and-responsive-web-design.html#iconfonts

Social Media Icons
http://www.webdesignerdepot.com/2010/10/ultimate-collection-of-social-media-icons/ 

Leave a Comment