Websites do not have to be complicated. Ask the ten questions we come up with in class to a classmate and document their answers as a website.
Show the columns of 3 different website's home pages. Use a well designed website, a website you visit frequently, and a “poorly” designed website.
Make a document that has 3 portrait letter pages. One site will be on each page. Draw the columns with a transparent fill on top of the site you chose.
Select a book from this list. Using the title, author, chapter title, and first paragraph, make 10 different black and white layouts. Each layout should be different and focus on contrast, heirarchy, and positioning. 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. Do not use color or images on these layouts.
Make five more layouts using the same book you used in Exercise 3. This time add color and images. Each version does not have to have both color and images but should have at least color or image(s).
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 to accomplish. The site needs to be more than a few pages. It should multiple levels of information across multiple pages. You can create your sitemap in any software you choose but it needs to be done digitally. My recommendation would be to use Illustrator.
Upload your final site map to your site and include a link to the website you made the site map for.
Create two wireframes for the home page of the site you used for your site map. The first wireframe should use the widest version of the site you can see. The second wireframe should use the mobile version of the site. You can create both of them sketched on paper, both digitally, or one of each.
Upload your final site map to your site and include a link to the website you made the site map for.
File naming and organization are important parts of making sure your files are easy to find both visually and while writing links. Download this 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. 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.
Copy and paste the text from the source file 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
Using what you have learned so far, make five patterns with html. You can use divs or type to make these patterns.
Create an image by drawing in the browser 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.
Next class we will display them all and vote on a People's Choice award and a Teacher's Choice award based on the quality of the code and the final image. The prizes are to be determined.
Recreate the layouts from this PDF with HTML using divs and floats. Remember that you might need to contain some divs inside other divs to get the layouts to work.
Pick the five best layouts from Exercise 3 and Exercise 4 and code them as five separate pages.
Start with copies of your Exercise 8 files. The first step is to improve the design of that page using ideas and principles we have learned up to this point — things like heirarchy, contrast, column widths, type size. The second step is to make it responsive. You will need a mobile version, something below 600px, and then the desktop version, something above 600px. The changes between screen sizes should be noticeable with the main principle being a well designed site.
Redesign the navigation of the same you made your site map and wireframes for from Exercise 5 and Exercise 6. This should be the desktop version of the site. Make sure you show hover states, dropdowns, and any other parts of the navigation that need to be interacted with to appear.
Part 1 - The Programmer Create a simple drawing in Illustrator 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.
Design a responsive single page site. The site should have a mobile version (below 768px), tablet version (768px–1024px), small desktop version (1024px–1440px), and large desktop version (1440px+). The content of the site is up to you but you should have text, images, and links to external sites. The digital versions should be built in Sketch, Illustrator, or XD and the final will be coded by you as Project 3.
Some ideas could be a site for a current issue, a site re-presenting a longform article, or a site acting as a type specimen.
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.
PART 1 - CHOOSE THE TEXT Pick a text that can be broken into parts (pagaraphs, sentences, words, etc.). The text can be something straight forward like a news article or more abstract like a poem. The text needs to be long enough to be broken into at least 10 pages.
PART 2 - BUILD THE SITE Now weave these distinct units together using many html pages and links. Allow for user choice, branching structures, loops, etc. The linking does not have to follow a linear sequence. See if you can produce new readings and ways of traversing your composition. When linking different parts of the composition together, think of the meaning of each link. Are they linking between similar content? Similar characters? Similar actions? Are the meaning of links consistent across all of your pages? Do you have different types of links? How could these different types of links be indicated? Remember that you cannot add words to the text, the links you create must exist in the original words.
You may include additional materials in the webpages if they add meaning to your sequences of links.
Build your Project 2 site.
Broadly speaking, websites are an interactive collection of things. Whether it be an e-commerce site, a newspaper or journal site, an email application, or a portfolio, the website is the container for a collection of digital objects.
Design a responsive website for a collection of your choosing. You might choose to create a portfolio website but I encourage you to choose a different collection of things than your own work. The collection can be something you collect — baseball cards, stickers, writing, photographs of leaves — or a collection you from somewhere else — the music of a band, art from a museum, items from an online store. The number of items in the collection should be around 10.
The final site should have a home page, a collection page that shows the entire collection, detail pages for the individual items, and an about page. The home page should be a broad overview of the collection that draws users in while the detail pages should elaborate on a specific item in the collection with more text and more images. The about page should tell the user about the collection, where it came from, how it was gathered, the history of it, and any other relevant information.