Homepage Design Create a static homepage layout mockup for the 2427 Eats Publication
Research some examples of restaurant guide sites Make a new post named: âlast name_Firstname Project 5â, categorize it Project 5.
Homepage design using InDesign 1200 px x 900 px
Users should know what the site is about and where calls to action are 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 .
Continue work on kinetic typography Upload to Google Drive
FINAL DUEÂ Project 5
Homepage Design
â2427 Eatsâ Website Homepage Design Create a static homepage layout mockup Uploaded to OpenLab
This will be a static homepage to promote your 2427 publication . 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.
Project 5
DUE NEXT WEEK
Part 1
A. Create jpg of your final layout use InDesign
Size 1200 px x 900 px
name it âLastname Firstname_P5.jpgâ
B. Create a new post on OpenLab
Name it âLastname Firstname Project 5â
Place a jpg of your layout into post full size
A. Create a NEW FOLDER
your âLastname_FirstName_Project 4â
B. Final version of your type in motion project
Name file:Â âlastname_firstname_p4.gifâ
âlastname_firstname_p4.swfâ or âlastname_firstname_p4.htmlâ
Type in Motion
Kinetic typography is different from static typography
Assignment: Visually represent your selected quote or verb by expressing the content with typographic elements.
Consider variables and spoken word as it related to your animation
Variables:
typeface, type size, weight, color, focus, orientation, location;
entrance, performance, exit; sequence, speed, transition, transformation,
emotion, feeling, atmosphere, interpretation.
Read your copy out loud, hear how it sounds Then think about sounds, any breaks or pause in pronunciation. you can work from that to visualize your text.
______
I. Design Process
The animation should be no shorter than 15 seconds and no longer than 60 seconds.
1. Select a short quote, a verb or noun, you will animate. Start concept sketches
2. Type Research: Find examples of simple type in motion
Get a job folder to place all research, sketches reference and related items.
3. STORYBOARD â
The first step rough sketch or storyboard a sequence of panels showing main steps. You are showing what is going to happen in main steps. The drawings donât have to be great, just clear.
4. CREATE DIGITAL ASSETS â
Create the artwork for the steps that is to be animated.
5. PRODUCTION
Use InDesign or Photoshop
II. Final will be Upload to Google Drive Folder  Project 4 Google Drive A. Create a NEW FOLDER
your âLastname_FirstName_Project 4â
B. Final version of your type in motion project
Name file:Â âlastname_firstname_p4.gifâ
âlastname_firstname_p4.swfâ or âlastname_firstname_p4.htmlâ
Continue work on kinetic typography Bring any native files to class we will work in class
Finals Due Last Class Uploaded to Google Drive
Project 5
â2427 Eatsâ Website Homepage Design Create a static homepage layout mockup
Final layout Due Last Class Uploaded to OpenLab
This will be a static homepage to promote your 2427 publication . 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.
DUE NEXT WEEK
Research
Examples of restaurant guide sites
Make a new post named: âlast name_Firstname Project 5â, categorize it Project 5.
Insert two jpg images of homepages with urls into post
Layout
Create an initial homepage document sketch using
InDesign 1200 px x 900 px bring in native file
Type in Motion
Kinetic typography is different from static typography
Assignment: Visually represent your selected quote or verb by expressing the content with typographic elements.
Consider variables and spoken word as it related to your animation
Variables:
typeface, type size, weight, color, focus, orientation, location;
entrance, performance, exit; sequence, speed, transition, transformation,
emotion, feeling, atmosphere, interpretation.
Read your copy out loud, hear how it sounds Then think about sounds, any breaks or pause in pronunciation. you can work from that to visualize your text.
______
I. Design Process
The animation should be no shorter than 15 seconds and no longer than 60 seconds.
1. Select a short quote, a verb or noun, you will animate. Start concept sketches
2. Type Research: Find examples of simple type in motion
Get a job folder to place all research, sketches reference and related items.
3. STORYBOARD â
The first step rough sketch or storyboard a sequence of panels showing main steps. You are showing what is going to happen in main steps. The drawings donât have to be great, just clear.
4. CREATE DIGITAL ASSETS â
Create the artwork for the steps that is to be animated.
5. PRODUCTION
Use InDesign or Photoshop
II. Final will be Upload to Google Drive Folder  Project 4 Google Drive A. Create a NEW FOLDER
your âLastname_FirstName_Project 4â
B. Final version of your type in motion project
Name file:Â âlastname_firstname_p4.gifâ
âlastname_firstname_p4.swfâ or âlastname_firstname_p4.htmlâ
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
