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. 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.
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 Thursday, September 03 by 10:30 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) 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.
Due Thursday, September 10 by 10:30 ET
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.
Due Thursday, September 17 by 10:30 ET
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.
Due Thursday, September 17 by 10:30 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 Thursday, September 17 by 10:30 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 Thursday, September 24 by 10:30 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 Thursday, October 01 by 10:30 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 Thursday, October 08 by 10:30 ET
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.
Due Thursday, October 22 by 10:30 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 Thursday, October 29 by 10:30 ET
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.
Due Thursday, November 12 by 10:30 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 Thursday, November 19 by 10:30 ET
Animate something on your drawing from E11. It can be something added to it or something existing.
Due Thursday, November 26 by 10:30 ET