Summer 2020 // Online

Intro to Web Design

Projects and Exercises

Projects

Project 1: A website about [blank]

Students will conceptualize, plan, design, and code a multipage website using one of several provided topics. The project will build off of the lessons each week and be a synthesis of the concepts and skills learned over the course of the semester. Each students project will be unique in content and form but be based on the same set of requirements.

Full project description

Exercises

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 the 1.2 tutorial.

Requirements

Due Thursday, June 4 by 11:59 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. Check out the 1.3 tutorial for some help with XD if you need it.

Requirements

Due Thursday, June 4 by 11:59 ET

Exercise 3: 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 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.

Requirements

Due Thursday, June 11 by 11:59 ET

Exercise 4: 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.

Requirements

Due Thursday, June 11 by 11:59 ET

Exercise 5: 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.

Requirements

Due Thursday, June 11 by 11:59 ET

Exercise 6: 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. Three of the layouts will just be in black and white with no images and 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.

Requirements

Due Thursday, June 18 by 11:59 ET

Exercise 7: 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

Requirements

Due Thursday, June 18 by 11:59 ET

Exercise 8: 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.

Requirements

Due Thursday, July 2 by 11:59 ET

Exercise 9: Layouts

Create the first three layouts in the E9 PDF on Blackboard with HTML and CSS. 10 points of extra credit for creating the tennis court and 30 points of extra credit for creating the california case.

Requirements

Due Thursday, July 2 by 11:59 ET

Exercise 10: 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 and taken with your browser at widths of 1440px, 1024px, 768px, and 320px. Combine the screenshots of each width in Illustrator, XD, or Sketch on an artboard that is the appropriate width and height.

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

Requirements

Due Thursday, July 9 by 11:59 ET

Exercise 11: Type on Screen II

Pick the 2 best layouts from Exercise 7 and code them as two separate web pages. Use at least one media query to make some aspects of the site responsive.

Requirements

Due Thursday, July 9 11:59 ET

Exercise 12: CSS Drawing

Create a drawing of something in your house using only HTML and CSS. To do this you will draw 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.

Requirements

Due Thursday, July 16 by 11:59 ET

Exercise 13: 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.

Requirements

Due Thursday, July 16 by 11:59 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.

Requirements

Due Thursday, July 23 by 11:59 ET