Web Design I

Overall instructions

Throughout the semester you’ll work on pieces of a website that is about something you’re interested in and that both features serial content and products. For example, you could build sites like this:

• Marvel comic fan site: A site that sells a series of products related to the Marvel comics such as movie posters, original comic books, and other swag (products) as well as publishes news related to comic book series, movies and TV series (information).
• Apologetics site: A site that sells books and other content to help Christians be prepared apologists (products) and publishes short articles in response to current issues (information).
• Artist site: A site that markets the artwork of a particular artist or group (products) and on which the artist publishes blog-like articles about their life and work.

I recommend that you create a site based on content that already exists on the web. Alternatively, you can create a new site, but just be aware that this will require the additional work of writing the content and potentially generating new images.

You will create this site through a series of stages, each of which is explained in more detail in the week in which it is due. These will outline a specific set of requirements and evaluation points for each.

The final submission will fulfill the following requirements:

• It will contain a home page, an "about" page, product list page, at least 5 product pages, article list page and at least 5 articles (14 total pages).
• It will be beautiful and refined, worthy of including in a portfolio.
• It will be easy to use and navigate.
• All final website files will be neatly contained in a single “site” folder.
• It will contain cleanly formatted and semantic markup in organized, properly named, HTML files, stored in the “site” folder or an appropriate subfolder.
• It will contain a single centralized, neatly formatted and organized CSS file that is stored in the “site” folder.
• It will contain a single “images” folder placed directly in the “site” folder containing any images used in the site. These may be further organized in subfolders as needed. Each must be prepared in the most appropriate file format.
• All final design assets will be prepared in Fireworks (or other software as approved by the instructor) and organized in a separate “artwork” folder.

In the first 5 lessons of the course we'll build an HTML-only but fully functional prototype of the site. In the last five lessons we'll design our site using Figma and then build out the styles and layout using CSS.

Watch this video that introduces the project wireframes and the sample site:

Resources

• View the professor's example prototype site »
• Download the sitemap template
• You will be given access to your own Figma Project that will contain templates for other deliverables such as your Style Tiles (Deliverable 7) and your design mockups and prototype (Deliverable 8).

Deliverable 1 -- Proposal

If you haven't already, first read through the Project Overview and Resource pages and video walkthrough to be sure you understand the scope and nature of this project.

Given the project description and outline of deliverables above, the first thing you must do is choose what your site will be about. Consider topics you’re interested in about which people are writing and that has related products for sale. You will not create an actual live site or be expected to actually own or sell any of the articles or products. Begin to collect a list of the articles and products you could include.

For your submission of this assignment:

• In the space provided explain the topic you have chosen for your project.
• If you are trying to decide between ideas and want feedback or direction, provide each idea along with what interests you about each.
• Finally, be sure to include examples of articles and products you might include in the site according to the topic you’ve chosen. Ideally, include hyperlinks to the original articles or product pages.

Deliverable 2 -- Site Structure

This short deliverable allows you to get the file and folder structure setup that you will need for your final site.

• Set up your site with placeholder files and folders based on the provided sitemap.
• No content is needed in each page beyond the basic HTML document structure covered in Lesson 1.

Watch this video demonstration:

As this is a relatively short deliverable please look ahead at Project Deliverable 3 and get started early.

Deliverable 3 -- Content Collection

Your goal in this deliverable is to collect the content, images and other assets you anticipate needing for your final project. This means collecting a combination of articles and products as well as writing one "about this site" page yourself.

Read more about these and be sure to watch the demonstration video near the end of these instructions.

The About Page

You must write a brief page that describes the site, and optionally, includes a brief biography (if relevant). Basically, this page can be anything you need in order to support or describe the articles and products in this site.

Article Content Collection

Collecting the minimum of five articles for your site is a matter of finding relevant articles on the web and copying their details into a file you can refer to later when its time to build the actual pages.

Keep in mind that you must truly find "articles" for your site, as opposed to more static informational pages. Articles should have an title, author, and a date published. They should also ideally have a cover or lead image.

It is completely acceptable to use content and articles you find on the internet; we'll be citing the original author and date for each and only creating this site in the context of educational use. Since this project is being completed for a course that is not about writing our own content I do not expect you to generate but just to borrow and attribute.

We're not actually creating web pages yet, so you only need to collect the content and related image assets for now. Don't worry about any comments or advertisements throughout the article; clean up the article content to be simple and neat.

Product Content Collection

You must also seek out at least five products to include in your site and harvest the content from them. This should include at least the following:

• The name of the product
• The price of the product
• An image of the product
• A description of the product.
• Optionally, some small set of additional content or specs for the product. Keep it simple.

Harvesting this content can be as simple as copying and pasting content into a Word file. For any images, however, try to download the image file itself and store them along with your content. Rename them as needed. Also collect all images you can for any product and archive them so that you have options later if you need them.

As mentioned before, we typically would not download and use other people’s images but we are doing so under educational fair use for this class.

Image processing

You should also resize and/or crop any images you plan to use in the website based on the sizes you see in the provided wireframe file. This is your first chance to lear a bit about working with Figma so be sure you've completed the Figma tutorials provided in the Support section of the site and that you've identified where and when you'll use Figma in the labs or on your own computer.

Demonstration

Watch this video demonstration for some tips on how to collect content and prepare images for your site.

Deliverable 4 -- Page Templates and Navigation

For this deliverable you will add branding, navigation, footer, and overall organization to each of the site pages you created in PD2.

Follow these instructions:

1. Review the professor's example prototype site ». Note the overall organization of the site, particularly the branding, navigation, and footer.
2. In Codio, open your root home page. In it, add the markup that you need in order to create the necessary structure for the site using the organizing tags you learned about in Lesson 4.
   • This should go directly inside the <body> tag.
   • You will need to create hyperlinks in the navigation list that correctly point to the corresponding pages of your site.
   • Ensure that you have a simple, appropriate structure for the page that could also work on other pages of the site.
   • Test the results in the browser and double-check your markup to eliminate any errors before you move on.
3. Duplicate this same overall structure in all the other pages of your site.

• Ensure all the links are set up correctly in the other pages with the correct paths given the different folders in which each is located.
• Place the name of each page as an <h2> under the masthead on each page so that you can verify you're on the correct page as you test the links in the next step.

4. Test all of these pages in a browser to ensure things work as they should. Troubleshoot as needed.

Watch how to set up page templates and navigation:

Deliverable 5 -- List Pages

For this deliverable you will create three more pages of your site and add branding, navigation, footer, and overall organization to each of your existing pages.

Follow these instructions:

1. Review the interactive sample site provided for the finished site project provided in the course website. Note in particular the three list pages: the main home page, the articles list page and the products list page.
2. Now open three more pages: the main index.html page in the root folder, the "Products" page in products/index.html and the "Articles" page in articles/index.html.
3. Look at each of the corresponding pages in the interactive wireframe. Add the markup that recreates the overall content and structure from these wireframes, using the content that matches your intended site. Note the following:

• The Articles page should list each of your five articles and hyperlink to each one even though you don't have the actual content in them yet.
• The Products page should list each of your five products and hyperlink to each one even though you don't have the actual content in them yet.
• The main home page should list three featured articles and three featured products and link to each one. There should also be a hyperlink under the articles that points to the articles page and a hyperlink under the products that points to the products page.

4. Test all of these pages in a browser to ensure things work as they should. Troubleshoot as needed.

Watch a demonstration of how to create these list pages:

Deliverable 6 -- Functional Prototype

For this deliverable you will add the actual article and product content to each placeholder page in order to make the site feel complete.

Follow these steps:

1. Open your project in Codio.
2. Add your About page content into about.html.
3. In the articles folder add the content for each article to the correct page as you planned earlier in the course.
4. Repeat this process for each of the pages in the products folder as well.
5. Test all of these pages in a browser to ensure things look as they should. Troubleshoot as needed.
6. Check your full site in a browser to ensure the links are all working. At this point you should have a fully function website, even if it is a little bland and unstyled.

Watch a demonstration of how to create these list pages:

Deliverable 7 -- Style Tiles

In recent years, a trend has emerged to use “style tiles” as a way to present visual style ideas to a client and get feedback before spending the time and energy to build out the whole site as design comps.

For those interested in more details, read a longer description from Matthew Carver’s The Responsive Web »

Your task for this deliverable is to create style tiles for your final project that help establish some styles you can use in upcoming deliverables.

1. Brainstorm adjectives that describe the style you hope your site conveys. Then consider visual components that support the style you selected. Use the following suggested resources and tips:

   Fonts and Typography

   • Search for fonts at Google Fonts. Here you can add font candidates to a collection, then review your collection to compare them side-by-side. Many fonts here also allow easy linking in your CSS, so be sure you use a font that allows you to download them to work with on your computer as these also usually can be easily used in CSS thanks to Google’s font service. YOU MUST use a free web font from Google Fonts for this project.
   • Show a strong sense of hierarchy and a balance of unity and variety.
   • So your body copy (smallest type) should usually be no smaller than 13 points for the web, and usually not larger than 18 points. Then your headings should scale up from there with the lowest level being noticeably contrast in size, weight, and/or color from the body copy and each successive level scaling up as well. I sometimes use modular scale for determining my font sizes... put in your base font size such as 13 pt and then choose the desired ratio for scaling up each level. I usually work between 1.2 and 1.75.
   • But don't forget to consider spacing as well: Spacing between lines inside a block of text such as a body paragraph is called leading. The default leading is usually a bit tight, so I like to play around with this and often increase it from the default value. We'll duplicate this appearance with line-height in CSS. Spacing between blocks of text can and should also be considered. Most design tools allow a control for adjusting space below blocks and you can also just separate the blocks manually by moving one block up or down closer to or further from another block. We'll duplicate this appearance using margin in CSS. If you move blocks up and down don't forget to also move the little label to the left of it so that we keep those aligned in the style tile.

   Colors

   • For the colors portion you might be trained to think of using just two or three colors in a typical graphic design. However, on the web we prefer to have a whole family of colors planned where each color fulfills a purpose in the system or is providing options for when we do. So while you might still use just two or three colors most of the time, take advantage of the style tile to plan a wide range of colors.
   • For selecting colors, use Adobe Color, a free tool that has a large library of color scheme from which you can choose, as well as features that allow you to create your own. There’s even a free app for mobile phones that allows you to create color schemes from images you take on your phone.

   Images and textures

   It is OK to use original images you found for the articles and products. However if you need new images or have other ideas you can search stock photography sites such as dreamstime.com, istockphoto.com, other such sites. GraphicStock provides free hi-resolutions downloads when you access this link from on campus.

2. Find the Style Tile Template provided in your Figma Project that has a smaller set of elements to mock up than the style tiles you might have seen at Samantha Warren's site.

3. Create at least two style tiles for your project site as two art boards in the same Figma document. Use the following as a guide for using this template:

   • Start by adding imagery for your site in the provided space for imagery. This could be samples of products, cover images from articles, or other imagery that you think represents the style/feel you're going for.
   • Use the color panels to choose colors. Use the labels below each panel as a guide for what each color should represent in the site but feel free to modify this baseline as you need. Remove any panels or labels that you are not using.
   • Use the fonts you've researched, downloaded, and installed from Google Fonts to add sample styles. Move the elements up and down as needed in order to simulate the spacing around each element. In the paragraph and list item blocks, be sure to play around with the leading and space between blocks using the controls on the properties panel.
   • Duplicate the entire existing "Style Tile" frame (artboard) to create your second style tile set and make changes to ensure the second style tile is distinctly different from your first one.
   • Name your two art boards logically, "Styles A" and "Styles B" or something very similar.

Watch this demonstration of the tasks involved in this deliverable:

Deliverable 8 -- Design Comps

Now that you have some sense of visual style based on the approved style tiles from the last deliverable, its time to design the pages of your site. Complete the following steps:

1. Use the Starter Wireframe provided in your Figma Project as a starting point for your work.
2. Beginning with the home page, design the masthead and footer areas as well as the overall background/frame of your page.
3. Duplicate these elements into the other pages of the site and finesse the content areas so that the whole layout is unified and appealing.
4. Add imagery in place of the temporary grey boxes, cropping and resizing your images as needed in order to fit the context and sizes provided in the wireframe.
5. Edit the content in the provided files to include actual content from these pages of your site.
6. Add variety and visual interest to the pages while also ensuring you maintain unity in the layout and site overall.
7. Watch how to set up prototypes in Figma and add interactions to your project so as to create a prototype that simulates interacting with the key hyperlinks on each page.

Deliverable 9 -- Content Styles

Based on your design comps from previous deliverables add basic content styles to your site prototype.

1. In your project space in Codio implement a central stylesheet to control your websites appearance and link it into all your site pages.
2. Set up typography/content styles for your site as a whole based on the methods discussed in this course.
3. Check the results in the browser to ensure that the work you're doing in the central stylesheet is reflected across all the pages of your site.

Watch this demonstration of the tasks involved in this deliverable:

Deliverable 10 -- Simple Layouts

Apply what you've learned about the box model and basic layout techniques to build out the layout for your article and product pages in your central style sheet in Codio. Be sure your layout work matches what you built in your design comps from previous deliverables.

Final Submission

Based on your design comps from previous deliverables and the discussion of Layout Analysis provided finish building out the remaining page layouts.

1. As needed, make revisions to your existing styles based on feedback from your instructor.
2. Build out the main products page, main articles page, and last of all the home page, using the provided layout analysis and tips.

Make final adjustments to your project to ensure each page looks clean, intentional, and appropriately matches your design comps.