Class Overview — 9/15/16

Overview

Class was good, glad to see that for the most part the step by step homework went well with some minor errors. Watch the brackets, commas and semi-colons. Wireframes looked good, be sure to get your wireframes done before class.

We also had some fun working on sketches of footers, super exciting. We didn’t go over any code, you need a break here and there. Code will continue in the next weeks.

Homework

You have 3 assignments listed below, one of them if you were in class you probably completed.

Wireframes

Continue working on wireframes, take your homepage wireframe and create the tablet and mobile versions. Note that really only the images shrink in size. Keep fonts the same size or since they will wrap differently the length of your paragraphs will increase. See the example below and of course email me if you have questions.

Desktop, Tablet and Mobile Wireframes

Suggested design sizes for screen size and content area. Feel free to make the content area smaller or larger.
Desktop 
Screen Size — 1400px
Content Area — 1000–1100px
 
Tablet
Screen Size — 768px
Content Area — 728–688px
 
Mobile
Screen Size — 410px
Content Area — 370–350px

Designs

You can start designing!!! I’m looking to see 2 comps, 1 will probably be pretty close to what you created as a wireframe, the other I want you to push your ideas and try something different, whether thats colors, textures or layout. So start adding colors, images, proper text and fonts.

InvisionApp

For those who weren’t in class or haven’t signed up yet the information will be included in the email, don’t want this being too public.

When you sign up, you’ll need to create 3 prototypes, Desktop, Tablet and Mobile. Upload a simple design or wireframe to each of these and email me a link to each one of these prototypes (green share button on hover). I’ll be using these links to reference when we present designs and new wireframes during class.

Create these three prototypes, add a simple image so you can send me a link to these prototypes. Green share button will show when you hover over the grid item.

Be sure to get the InvisionApp prototypes set up, wireframes and designs uploaded so you can present them at the beginning of class. Otherwise you may not get credit…and that would be no good.