Websites do not have to be complicated. Make a website that answers the questions that are asked in class.
Using Illustrator, XD, or Sketch 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. Use your grid to determine what makes sense where. The grid should be your guide for how your shapes line up and fit on the page. Do not ignore the grid.
File naming and organization are important parts of making sure your files are easy to find both visually and while writing links. On Blackboard 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. 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.
Find a site that you consider well designed and take screenshots of the home page of your site from top to bottom. Take those images and put them together to remake the home page in Illustrator, XD, or Sketch and make your artboard the size of the final site.
Now that the full home page is built start to shapes over the content so you get a visual representation of what the site looked like without any of the actual content. The shapes should be solid black or a black outline and white fill. Type should be covered with the solid black shapes and images/graphics with the black outlined and white filled shapes.
Once you have covered all the content, export the final file as a PNG and post it to your website.
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
Select a book from this list. Using the title, author, chapter title, and three or more paragraphs, 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.
Each layout should be on an artboard that is 1440px wide by however tall it needs to be to accommodate the content.
Using what you have learned so far, make five patterns with html. You can use divs or type to make these patterns.
Make five more layouts using the same book you used in Exercise 5. 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 the layouts in the E8 PDF on Blackboard with HTML and CSS. Remember that you might need to contain some divs inside other divs to get the layouts to work.
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 wireframes to your site and include a link to the website you made the site map for.
Take 4 sets of screenshots of the home page of the website you used for E9 and E10. 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.
Pick the 5 best layouts from Exercise 5 and Exercise 7 and code them as five separate pages.
Redesign the navigation of the same site you used for E9, E10, and E11. 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.
Start with copies of your Exercise 4 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.
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.
Create a Halloween themed 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.
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.
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.
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.
Design a responsive single page site. You will design a mobile version (320px), tablet version (768px), small desktop version (1024px), 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 Illustrator, XD, or Sketch. You are not coding this project.
Some ideas could be a site for a current issue, a site re-presenting a longform article, a site acting as a type specimen, or any some other content source.
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.
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. The concept can be simple or complex but the site must only be a single page and serve a single function. The URL of the site should help explain the concept and the content should help reinforce the URL. If you need a place to look at single serve websites go here. That website is a single serve website that takes you to other single serve websites.