Fall 2020 // Thursday 10:30–1:10 // Online

Intro to Web Design

Projects and Exercises


Project 1: Linking Narratives

The structure of a website is as equally important as the design of a website. Getting from page X to page Y needs to be intuitive and simple. This structure also needs to be reflected on the back end. Create a site that takes the user through a narrative using text, links, and multiple pages.

Full Project Description

Project 2: Website for a [Blank]

Understanding each step in the process of a website project is important no matter what role you take in that process. Understanding how a website is planned and conceptualized or how a website is build can help the design. Understanding the concepts and principles that went into the design can help how a site is built. This project puts you in each role of the process, from the initial idea to the final build.

Full Project Description


Exercise 1: 20 Questions

Read through each discussion post from your classmates and create a web page that answers each question asked. That means you will answer 20 questions total — 19 of your classmates questions plus one of your own. The page will be simple and use default styles but should display the question and your answer in a clear way. If you need a little help starting, check out Tutorial 1.

  • title element with relevant content
  • a page title using a heading element
  • 20 questions and answers

Due Thursday, September 03 by 10:30 ET

Exercise 2: Make the Grid

Using XD or other approved design software make 5 artboards that are 1440 pixels wide by 3000 pixels tall. On each artboard create a grid that could be used to layout a website. The grid does not need rows, only columns. Once you have 5 different grids start adding some “content” to your pages. The content should be shapes (squares, rectangles, circles) that could represent images, icons, text, etc. Some shapes should be tall, some shapes should be short, some should be wide, and some should be narrow. The grid should be your guide for how your shapes line up and fit on the page. Do not ignore the grid. Keep in mind ideas about space and that every pixel of the page does not need to be filled. If you need a little help starting, check out Tutorial 2.

  • 5 png files at 1440px wide by 3000px tall
  • Layouts use only shapes
  • Layouts use different grids

Due Thursday, September 10 by 10:30 ET

E3: Organization and Naming

File naming and organization are important parts of making sure your files are easy to find both visually and while writing links. Download this zip file and you will find there is a simple site with a terrible file structure. Rename these files something clear and simple and then organize them into a nice folder structure. The site has a main page and then 3 sub pages for an about page, a menus page, and a gallery page.

Once you have organized and renamed the files, take a screenshot of the new structure and post it to your site (Atom’s sidebar is a great view). If you cannot get a view where all the files and folders are shown in one folder, take multiple screenshots or position multiple folders on the screen to show the structure.

  • Folders and files appropriately named
  • Folders and files appropriately organized
  • Screenshot(s) of folder and file structure and names on your site

Due Thursday, September 17 by 10:30 ET

E4: Site Map

Create a site map showing the structure and organization of a website. Also include who you think the intended audience is and what the main action or actions the site is hoping a user will accomplish. The site needs to be more than a few pages. It should multiple levels of information across multiple pages. You can create your site map in any software you choose but it needs to be done digitally. My recommendation would be to use Xd.

Upload a PNG of your final site map to your site and include a link to the website you made the site map for.

  • URL for your website
  • Site’s intended audience
  • Site’s primary action for the user
  • PNG of your digital site map on your site

Due Thursday, September 17 by 10:30 ET

E5: Wireframes

Create two wireframes for the home page of the site you used for your site map. The first wireframe should be created from the site as it looks on your computer (desktop size). The second wireframe should be created from the site as it looks on your phone (mobile size). You can create both of them sketched on paper, both digitally, or one of each.

Upload your wireframes to your site and include a link to the website you made the site map for.

  • A desktop wireframe
  • A mobile wireframe
  • Two image files on your website

Due Thursday, September 17 by 10:30 ET

E6: Type on Screen I

Select a book from this list. Using the title, author, chapter title, and the first 1000 words, make 6 different layouts. Each layout should be unique in design but the content will be the same. Focus on contrast, hierarchy, and positioning and make considered decisions about the type you choose. The first three of the layouts will just be in black and white with no images and the second three you can use color and images if you want. Design some pages with one typeface and some pages with multiple typefaces. Try symmetrical and asymmetrical layouts and size, weight, style and other typographic concepts to create a well designed, readable page. All the layouts should use a grid to help with the layout.

Each layout should be on an artboard that is 1440px wide by however tall it needs to be to accommodate the content.

  • A title, author, chapter title, and 1000 words on each layout
  • 6 layouts exported as PNGs on your website (3 only black and white, 3 with color and/or images)
  • Each layout is 1440px wide

Due Thursday, September 24 by 10:30 ET

E7: seven-principles.txt

Copy and paste the text from the source file below to your HTML file. Mark up the document by keeping in mind which HTML tags are appropriate for which segments of content. Using your new knowledge of some simple CSS styling properties, style the Carl Dair content. Keep in mind web font implementation and font properties. Play with color and scale, and experiment to get familiar with this new language.

Download the Essay

  • The full essay text displayed on the page
  • Semantically marked up (everything wrapped in some HTML element)
  • At least one class or ID used
  • Some amount of CSS used to style the page through an external style sheet
  • Page uses Adobe or Google Fonts

Due Thursday, October 01 by 10:30 ET

E8: Visualizing Responsiveness

Take 4 sets of screenshots of the home page of the website you used for E4 and E5. The screenshots should be of the full height, meaning from top to bottom of the page, and taken with your browser at widths of 1440px, 1024px, 768px, and 320px (or the smallest your browser width will go). Arrange the screenshots taken at each width in XD (or your design software) on an artboard that is the appropriate width and height. Make sure the screenshots overlap so that it looks like a complete recreation of the live site.

Export the artboards as pngs and upload them to your website.

  • 4 PNGs on your site
  • Images are the appropriate widths (1440px, 1024px, 768px, 320px) and the height is as tall as the homepage is on the web
  • Using the same site you used for E4 and E5

Due Thursday, October 08 by 10:30 ET

E9: Patterns

Make a series of 5 patterns using HTML and CSS. Each pattern should be scrollable, take up the entire screen, be unique, and built using floated div elements.

  • 5 unique patterns (varying colors, sizes, layouts, shapes, etc.) in separate HTML files
  • Patterns must scroll for some amount
  • All styles for all five patterns in one CSS file
  • No styles in the HTML file

Due Thursday, October 22 by 10:30 ET

E10: Layouts

Code the first three layouts (checkerboard, 3 column grid, blog layout) in the E10 PDF linked on Blackboard using div elements and floats. If you code the fourth layout (tennis court) you will get 25 extra credit points and if you code the fifth layout (california case) you will get 50 points of extra credit.

  • 3 layouts on your site (checkerboard, 3 column grid, blog layout)
  • Layouts are built with div elements
  • Div elements use the float property in their styles
  • All layouts share the same CSS file
  • No styles in the HTML file

Due Thursday, October 29 by 10:30 ET

Exercise 11: CSS Drawing

Create a drawing using only HTML and CSS of something Halloween themed or an object around your house. To do this you will make some divs, position them on the page, and then style each piece with CSS. The divs will then get layered and moved around to make your final drawing. Take a look at this link for a reference on how these might get set up.

  • A Halloween themed drawing or a drawing of something around your house
  • All styles in external style sheet
  • HTML uses divs and CSS uses positioning

Due Thursday, November 12 by 10:30 ET

Exercise 12: Type on Screen II (Optional)

Pick the best layout from Exercise 6 and code it as a responsive page. Use at least one media query to make some aspects of the page responsive. If you need to make edits to improve the design please do (for example a smaller column width, larger type, greater line height, etc.).

  • 1 HTML file and 1 CSS file
  • No styles in the HTML file
  • CSS uses at least one media query
  • Has the viewport meta tag in the head of layout

Due Thursday, November 19 by 10:30 ET

Exercise 13: Make it Move (Optional)

Animate something on your drawing from E11. It can be something added to it or something existing.

  • At least one piece of the drawing animated in some way
  • Should be a copy of E11, not added to it (meaning duplicate E11, name it E13, and animate something in there)

Due Thursday, November 26 by 10:30 ET