Web Design II

Introduction

This project challenges you to redesign an existing small business/e-commerce site. You will apply principles of usability you learned from the Krugg book and implement the grid design theory covered in the Vinnh text. Your site must include the following:

• Be aesthetically pleasing and functional as a prototype site, applying principles of usability from the Krug readings. Any "unfunctional" features must be user-friendly and tidy.
• Use appropriate techniques based on coursework to this date (semantic markup, BEM convention, efficient CSS, flexbox layout technique, etc.)
• Implement an intentional grid system include baseline grid, rows, and columns as discussed in the Vinh text and online lesson.
• Include 3 fully operational pages (home page, category page, product page) and a single "Content coming soon" placeholder page as a stand in for all others.
• Be responsive from smartphone up to standard desktop with 3 designed layouts as a recommended minimum.

Deliverable A: Planning -- Grid and Style Tiles

Use the template provided to create style tiles for your project that reflect your intended visual direction.

For your style tiles:

• Consider full color family that accounts for colors you may not plan to use in a significant way but provide options if needed.
• Consider fonts at intended size, with leading, spacing, etc. demonstrated to communicate strong aesthetic sense and visual hierarchy for type.
• Include actual or intended imagery for the site.
• Consider button styles and different states of buttons.

For your grid system:

• First create paper and pencil sketches of the layouts you intend to use in your site. Consider at least the home page, product category page, product detail page, and standard content page.
• Base this on the method covered in the readings from the Vinh text.
• First plan the font sizes and leading that can span all device sizes: minimum of 318px, mid stop around 768px, and desktop minimum of 1200px.
• Next consider the overall grid you need: how many columns will be needed? How many rows do you want to accommodate above the fold?
• Now do the math you need in order to determine your column placement, golden rectangle line on desktop, and the row lines.
• Finally consider how this grid flexes for your smaller devices.

Add an artboard/frame to your Figma file that is 1200px wide. Use the features in Figma to set up the Layout (grid columns, rows and baseline grid) that you've planned. Then add text boxes on the artboard/frame the outline the following specs:

• Number of grid columns you are using and the pixel amount for the gutters. This should match what you have set up in your layout setting for the artboard/frame as well. Example: Columns: 12 columns; Gutters: 40px
• Baseline grid (body copy leading) in pixels. Example: Baseline grid: 20px
• GRL (golden ratio line) that you determined based on Vinh's grid approach. Example: GRL: 720px
• Number of rows you are subdividing from your GRL. Example: Rows: 3 pr GRL, 240px each

Complete your style tiles and grid system work in the provided Figma file and submit the corresponding assignment by the deadline.

Deliverable B: Design and Prototype

Follow these notes diligently to complete this deliverable.

1. Create Figma mockups for each of your page layouts and at each of at least three device sizes as you did on previous projects. The Figma template shows these by viewport, but you may reorganize this to show each viewport for a given page together if you prefer.
2. Be sure to use fonts from the Google Fonts API and implement a grid system as discussed in this unit.

Complete your work in Figma and submit the corresponding assignment by the deadline.

Deliverable C: WIP Build -- Markup and Mobile Content Styles

Make any adjustments to your mockup based on feedback from your instructor.

Create the simplest, semantic markup you need in order to begin to build out your design using HTML and CSS. Begin to implement BEM carefully. Follow the same process you have with previous projects for this deliverable.

Ensure your work is complete in Codio and updated in Figma (as needed) by the deadline.

Deliverable D: Final Build

Carrying forward with your full build out, now add additional settings and media queries in order to build the responsive layouts you've designed. Use your layout analysis from earlier as a guide and be sure to consider microlayouts as well and be careful to implement simple BEM convention.

Tidy up your work for final submission, ensuring the site is responsive and functional as a prototype site.

Ensure your work is complete in Codio by the deadline.