Spring 2021 // Tuesday 10:30–1:10 & 1:30–4: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. This project puts you in each role of the process, from the initial idea to the design to, potentially, the final build.

Full Project Description

Project 3a: Single Serve

A single serve website is comprised of a single page that only does one thing. You will come up with a concept and design for a single serve website and then build the website.

Full Project Description

Project 3b: Build Project 2

As a designer, you are often only responsible for providing the design of a site and not actually coding that design. Now is your chance to take all of the knowledge you have gain from this class and put it to use in a single project.

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 Monday, February 01 by 11:59PM 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), no text or images. The shapes could represent images, icons, text, etc. or you could be making some formal compositions without any meaning to the shapes. 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 Monday, February 08 by 11:59PM 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 the files from the link on Blackboard 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 Monday, February 15 by 11:59PM ET

E4: Site Map

Create a site map showing the structure and organization of a website. The website can be any site of your choosing but I would recommend a relatively simple site with only a few 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. Also include who you think the intended audience is and what the main action or actions the site is hoping a user will accomplish.

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 Monday, February 15 by 11:59PM 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 Monday, February 15 by 11:59PM 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 Monday, February 22 by 11:59PM 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 Monday, March 01 by 11:59PM 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. If your site for E4 and E5 was not responsive pick a new site that is responsive for this exercise

Due Monday, March 08 by 11:59PM 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 be 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 Monday, March 22 by 11:59PM 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 Monday, March 29 by 11:59PM ET

Exercise 11: CSS Drawing

Create a drawing using only HTML and CSS of 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 drawing of something around your house
  • All styles in external style sheet
  • HTML uses divs and CSS uses positioning

Due Monday, April 05 by 11:59PM 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 Monday, April 12 by 11:59PM 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 Monday, April 19 by 11:59PM ET

Exercise 14: jQuery [various]

Option 1 – Interactions Create a single page that has at least three unique interactions on it using jQuery. The interactions should each use a different mouse event to start the interaction and each mouse event should do something different. For example, a mouse click could change the color of an object but hovering could change the position of some text. The content of the page should be a list of your top five favorite somethings. That could be your top five favorite songs, movies, places in the world, colors, etc.

The interactions should not be hidden and should try to have some relevance to the content of your list.

Option 2 – Guessing Game Design and create a single page guessing game using HTML, CSS, and jQuery. The game should ask a user to answer a question and then react to that answer. This could be a game like Hot or Cold where the game is only over once the user guesses correctly or could be a one chance game like Rock, Paper, Scissors. The game should have a different answer each time the page is loaded, meaning that the game cannot be “Guess My Middle Name” and the answer is always “George” but it could be “Guess a Name” and that name is randomly generated from a list of names.

HTML/CSS - The page only needs two things, a question and a place where the user can input an answer. More might be necessary depending on the complexity of the game you are building. It should also be responsive.

jQuery - The jQuery should have some kind of variable, a way to check the input against that variable, and then an outcome or outcomes based on whether that input is right or wrong.

Option 3 – Plugins Find a jQuery plugin online and integrate it into a page. The plugin can do anything but it needs to be added to the page appropriately and function as intended.

  • Various based on which option
  • Functioning HTML, CSS, and jQuery

Exercise 20: Programmer and Computer

PART 1 - THE PROGRAMMER: Create a simple drawing in XD in 2 minutes. Once you are finished, write a very precise set of instructions that will be executed by a computer. A classmate will be the computer and the result of that person following your program should result in an exact copy of your drawing. You cannot use images or verbal communications to help explain your instructions, only written words. You also cannot let the computer see what the final drawing should look like.

Upload the instructions to your website but do not upload the drawing yet.

PART 2 - THE COMPUTER: Using a classmates program, execute those instructions to recreate the drawing. Do not assume instructions, follow what is written as closely as you can. Send the final drawing back to the programmer. Do this step for two different programs.

PART 3 - UPLOAD: Once you have two drawings back from the two different computers, upload the two drawings along with your original to the same page as the instructions.

BRIEF HISTORY LESSON: A computer was actually a job description held by many humans at one point in time, especially during WWII, where computers (mostly women) were hired to do calculation and computation on vast quantities of numbers. Also, Ada Lovelace (December 10, 1815–November 17, 1852), the daughter of poet Lord Byron, published the first algorithm intended to be carried out by a machine and is regarded as the first computer programmer. Furthermore, the term “debugging” originated from the actions of programmer Grace Hopper (December 9, 1906–January 1, 1992), who took a literal moth out of military computer. In today’s male-dominated tech fields, it’s important recognize the roots of computation and programming.

  • The instructions to complete the drawing your website (the program)
  • Your drawing along with the two drawings from your computers (3 total images)

Due Tuesday April 27 by 11:59 ET