Project 5

“2427 Eats” Website Homepage Design

Create a static homepage layout  mockup for the
2427 Eats Publication

This will be a site to promote  the 2427 publication and content.  Users should  know where to look at and what the site is immediately. With typography hierarchy, layout, you can guide users in the direction you want them go.

Remember design principles such as alignment, proportion and white space when working with type.
Type is more effective than anything else to get  your message across on the web.

Graphics images can support and enhance layout  icons too, but communication happens mostly via the copy content.

Part 1
A. Create jpg of your final layout
Size 1200 px x 900 px
name it “Lastname Firstname Project 5”

B. Create a new post on OpenLab
Name it “Lastname Firstname Project 5”
Tag it “Project 5”
Place a jpg of your layout into post full size

Part 2
Bring a print out of your layout to class page

References  
Class Pintrest Pages
http://pin.it/UTcfxxt

Class Pintrest Page Web Design
http://pin.it/BDTGgPi
http://pin.it/Oz6x_AR

Online tutorials

TK

 

Online tutorials

TK

_

Other Reference

Restaurant  Guide Sites
https://www.zagat.com/
http://eat24.com/
https://www.yelp.com/nyc
http://www.renzell.com/
https://www.theinfatuation.com/new-york
https://www.zomato.com
https://www.opentable.com/new-york-city-restaurants
https://www.viamichelin.com/web/Restaurant/New_York-10007-Little_Park-468095-41102

Web Typography Design Examples:
https://www.awwwards.com/websites/
https://www.awwwards.com/inspiration/search?text=typography
http://www.nurturedigital.com/
http://oudolf.com/
http://culture.pl/multimediaguides/
http://dada-data.net/en/
https://www.awwwards.com/sites/susa-ventures

Typography for Web Sites
http://typographyhandbook.com/
https://fonts.google.com/
http://justcreative.com/2016/10/17/the-power-of-typography-in-web-design/
http://justcreative.com/2015/05/05/15-stunning-font-combinations-for-your-inspiration/
http://www.webtype.com/catalog/

Web Design Sites
http://thegridsystem.net/
http://www.modularscale.com/
InDesign User Guide:
https://helpx.adobe.com/indesign/user-guide.html
InDesign Keyboard Shortcuts:
 https://helpx.adobe.com/indesign/using/default-keyboard-shortcuts.htmlIn

Free to script to save InDesign files as a layered PSD.
https://indesignsecrets.com/save-indesign-files-layered-photoshop-files.php
http://www.zenodesign.com/forum/PageToPSLayersV6.zip

Leave a Reply

Your email address will not be published. Required fields are marked *