Category Archives: Project 5

Project 5

“2427 Eats” Website

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 .

 

Design Resources

Indesign Wireframe tools

Homepage Sketch File

12 colum grid

Creative Brief Sample

 Pinterest Page Web Design

http://pin.it/BDTGgPi
http://pin.it/Oz6x_AR

InDesign Tools

Indesign Wire Frame Web Design Guide:
InDesign User Guide:

Creative Cloud Libraries

Grid Design Guide:

Guide to use of grid for web
gridpak.com
http://gridr.atomeye.com/
http://sneakpeekit.com/
https://webdesignledger.com/grid-design-for-website-mockups/

Restaurant  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

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

Type 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/

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

Assignment 14 FINAL Project4/5

FINAL DUE Project 4
Typography in Motion

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

Part 2

Bring a print out of your layout to class

2427_WebPage Mockup Boards

12 colum grid PDF

Creative brief_CUNY_2427

References  

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

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

Online tutorials

Indesign wireframe guide

Comprehensive Web Grid Guide

 

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

 

FINAL DUE Project 4

Typography in Motion

Upload to 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”

2427_StoryBoard

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”

Kinetic Typography

References  Class Pinterest Page samples
http://pin.it/17K6YhS

https://www.youtube.com/watch?time_continue=6&v=J59n8FsoRLE

Vimeo motion Type Section
https://vimeo.com/channels/kinetictypography
http://www.artofthetitle.com/title/oceans-eleven/#
http://www.creativebloq.com/typography/examples-kinetic-typography-11121304

 

 

https://www.creativebloq.com/typography/examples-kinetic-typography-11121304

 

Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#

http://blogs.adobe.com/contentcorner/2016/12/22/create-animations-using-adobe-indesign/
Annimated GIF  Tween fade between fades
https://helpx.adobe.com/indesign/using/animation.html

Annimated GIF  Photoshop

Create animated GIFs with Photoshop

Fade In & Fade Out an Animated .GIF in Photoshop

 

Animated GIF  Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

Fade in Fade Out  Animated GIf

https://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht#sm.001gtlrmj1d33dijr521ai81433kk

Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#

Create animations using Adobe InDesign


https://helpx.adobe.com/indesign/using/animation.html

Combining Multiple animation effects InDesign

 

References  Class Pintrest Page samples
http://pin.it/17K6YhS

Vimeo motion Type Section
https://vimeo.com/channels/kinetictypography

https://giphy.com/search/kinetic-typography

http://www.creativebloq.com/typography/examples-kinetic-typography-11121304

http://www.artofthetitle.com/title/oceans-eleven/#

 

 

Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#

Create animations using Adobe InDesign

https://helpx.adobe.com/indesign/using/animation.html

Annimated GIF  Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

https://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht#sm.001gtlrmj1d33dijr521ai81433kk

 

Save

Save

Save

Assignment 13-P4-P5

Due Next week

Project 4
Typography in Motion

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

2427_WebPage Mockup Boards

12 colum grid PDF

Creative brief_CUNY_2427

References  

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

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

Online tutorials

Indesign wireframe guide

Comprehensive Web Grid Guide

 

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

 

 

 

 

2427_StoryBoard

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”

Kinetic Typography

References  Class Pinterest Page samples
http://pin.it/17K6YhS

https://www.youtube.com/watch?time_continue=6&v=J59n8FsoRLE

Vimeo motion Type Section
https://vimeo.com/channels/kinetictypography
http://www.artofthetitle.com/title/oceans-eleven/#
http://www.creativebloq.com/typography/examples-kinetic-typography-11121304

 

 

https://www.creativebloq.com/typography/examples-kinetic-typography-11121304

 

Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#

http://blogs.adobe.com/contentcorner/2016/12/22/create-animations-using-adobe-indesign/
Annimated GIF  Tween fade between fades
https://helpx.adobe.com/indesign/using/animation.html

Annimated GIF  Photoshop

Create animated GIFs with Photoshop

Fade In & Fade Out an Animated .GIF in Photoshop

 

Animated GIF  Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

Fade in Fade Out  Animated GIf

https://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht#sm.001gtlrmj1d33dijr521ai81433kk

Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#

Create animations using Adobe InDesign


https://helpx.adobe.com/indesign/using/animation.html

Combining Multiple animation effects InDesign

 

References  Class Pintrest Page samples
http://pin.it/17K6YhS

Vimeo motion Type Section
https://vimeo.com/channels/kinetictypography

https://giphy.com/search/kinetic-typography

http://www.creativebloq.com/typography/examples-kinetic-typography-11121304

http://www.artofthetitle.com/title/oceans-eleven/#

 

 

Animation InDesign
https://indesignsecrets.com/indesign-basics-your-first-animation.php#

Create animations using Adobe InDesign

https://helpx.adobe.com/indesign/using/animation.html

Annimated GIF  Photoshop
http://blogs.adobe.com/contentcorner/2016/08/10/create-animated-gifs-with-photoshop/

https://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht#sm.001gtlrmj1d33dijr521ai81433kk

 

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

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