Presentation

We will take some quality time to review—and give feedback—for the following assignments which have been submitted so far:

  • Gallery Pages, Version 1

Checking Color Contrast

Check the color contrast between your text and its background. Make sure that there’s enough contrast for legibility.

Wayfinding

Navigation and Wayfinding

Website Navigation

Guide to Website Navigation Design Patterns

Prototyping and Prepping

Protoyping is the process creating a preliminary model of something. In the case of web design, it is a tool for showing others how the site will work, and getting their feedback.

Prepping your mockup files for the people who will code the site makes for smoother transitions from flat design to fully interactive HTML, CSS, etc.

Prototyping

Sometimes clients and coders need a really firm grasp of how a series of interactions are supposed to occur, and your static mockups are not quite enough. This is where prototyping can come in.

InVision

Today we’ll take a look at how to use the InVision online tool for creating interactive prototypes from your flat mockup images (.jpg or .png).

Tour | Sign Up

Invision website prototyping application

My mockup for BusyKidz in a tablet environment (click to visit):

InVision tablet mockup for BusyKidz

Mockup Prepping for Coders: Making Your Specifications More Accessible to Website Coders

Specctr

“Have you ever submitted design files to a development team for production and a few weeks later gotten something back that looks nothing like your original work? Many designers and design teams make the mistake of thinking that their work is done once they’ve completed the visual design stage.”

“Designers also know that the details will make or break a product’s usability. But designers are also responsible for not letting those details fall through the cracks in production. Yes, those 5 pixels do matter! The development or production team also needs to understand how the product will work and what it will look like in every scenario and variation of the product’s use. Annotating all of these scenarios can be a nightmare, but this is where Specctr can help.”

Let’s play around with this with a duplicate of one of your mockups in Photoshop or Illustrator.

Creative Cloud Extract

“Extract CSS, fonts, colors and export optimized images from a PSD, right from your browser. Share it with your developer and go quickly from design-to-code. Extract is now available on Creative Cloud, for free.”