Web Design II

Overview

This project is aimed to help you continue to improve your speed and proficiency with HTML/CSS skills as well as experiment with a specific genre of web design: a single-page (micro) site.

Choose a topic of interest that includes a variety of high quality images, features or highlights, and some narrative. Examples include an innovative product, a ministry or cause, and an upcoming event. Your site should act as an advertisement or "call to action" (CTA) for the topic such as "Buy now" for a product, "Take action" for a cause, or "Register" for an event.

Use the starter file provided for this project for you in Figma as a guide for building out your design.

The site will use the following structure:

• First, it begins with a striking masthead that contains a full-bleed image, the topic and a tagline.
• Next will be an overview section that includes a short lead-in paragraph, several supporting paragraphs and an action button beside a supporting image.
• Third will be a set of four features or highlights on the topic. For example, this could be features of a product, key points or appeals of a cause, or highlights of an upcoming event. Each of these will contain a single image and brief supporting text.
• Fourth will be a larger narrative section that includes several robust paragraphs and at least one bulleted list.
• Finally, the "footer" will contain one more image, a final statement an action button and a copyright statement.

Requirements

• Build a single-page site using the deliverables below as a guide.
• Process and deliverables must make use of required tools including Figma and Codio.
• Apply a consistent and aesthetically pleasing look and feel to your project.
• Final submission must include simple, semantic HTML and implement the CSS row-and-column theory covered in a previous class.

Deliverable A: Design

Use the wireframe starter provided in Figma to create your site concept. According to the wireframes this should entail a multi-column layout with a full-bleed masthead but that otherwise occupies a centered 1200px primary layout. Consider 12 100px columns subdividing this space and vertical blocks of 240px for vertical rhythm where practical.

You must use Figma to create your comps in a single document. Activate the grid guides on a given artboard by selecting the artboard/frame itself and then turning on the desired items under the "Layout Grid" section in the right-hand sidebar.

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

Deliverable B: Final

Create the simplest, semantic markup you need in order to build out your design using HTML and CSS. Follow this process:

1. Layout Analysis: Identify and label the rows and columns in your comp.
2. File setup:
   1. Open the Project 1 starter project in Codio and in it create an images folder, styles.css, and index.html.
   2. Export any images you need from your comp using the slice/export options and upload them into your images folder in Codio.
3. Content Markup: Analyze the structure of the content in your comp and create the corresponding simple HTML content in your index.html file.
4. Organizing/Layout Markup: Based on your layout analysis, add minimal simple organizing markup around your content markup in order to ensure that you have rows and columns all accounted for.

Next add styles to our project:

1. Type/content styles:

   • You should have at least 7 different styles to account for from your comp including the following:

     • normal paragraphs
     • normal list items (bulleted or ordered)
     • primary heading
     • secondary headings
     • tagline
     • lead paragraph
     • action links

   • Place your styles in styles.css and be sure you're linking this into index.html.

   • Also be sure that you're linking to any custom fonts in a valid way from within styles.css, such as by implementing the Google Fonts API. Also keep your selectors simple, being only as specific as necessary.

2. Layout styles: now add row and column settings in order to recreate the layout you've designed. Use your layout analysis from earlier as a guide and refer to the provided layout patterns for assistance.

Ensure your work is complete in the project space provided in Codio by the deadline.