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.
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.
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.
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.
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 contentDue Monday, February 01 by 11:59PM ET
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.
Due Monday, February 08 by 11:59PM ET
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.
Due Monday, February 15 by 11:59PM ET
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.
Due Monday, February 15 by 11:59PM ET
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.
Due Monday, February 15 by 11:59PM ET
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.
Due Monday, February 22 by 11:59PM ET
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
Due Monday, March 01 by 11:59PM ET
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.
Due Monday, March 08 by 11:59PM ET
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.
Due Monday, March 22 by 11:59PM ET
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.
Due Monday, March 29 by 11:59PM ET
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.
Due Monday, April 05 by 11:59PM ET
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.).
Due Monday, April 12 by 11:59PM ET
Animate something on your drawing from E11. It can be something added to it or something existing.
Due Monday, April 19 by 11:59PM ET
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.
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.
Due Tuesday April 27 by 11:59 ET