Project 1: Hello, World!
"Prof. Dr. pages have their distinct appearance: primitive and all the same. And that makes them historically significant...Primitivity tells us the story of the browser being not only a browser, but also an editor. Every user of the early web was a producer of web content. Web pages were to be opened in the browser to look at them, but also to edit them, using existing pages as templates for new pages. The simple design of HTML made it possible for the first users to create state of the art pages with only four to five principal tags. The result was an extremely fast growing web. There were not many options, this is why we got many pages."
— Olia Lialina
For our first project, you will be designing a “homepage” for yourself. Using a thoughtful grid system, compose three unique directions for a single-page, personal website that describes your design practice and your theory of Interaction Design (as it stands today). You will be restricted to typography, color, and your Language of Vision (LoV) tools and 3 images.
I'd like you to first prototype your design in Figma and then use HTML/CSS to make a live website. The translation from prototype to code will naturally make your site "ultralight"— capable of being easily loaded, using limited energy, and minimalistic in its design.
Remember, allow yourself to experiment with things. You may not know how to get it to look exactly the way you imagine at first, but the key to learning how to make websites is exploration and experimentation. You may come across something unintended that’s even better!
Objectives
- Grid systems must be distinct from one another.
- Minimum of two typefaces that make sense together.
- No more than four (4) colors (including black and white) in your final design.
- CSS Properties to explore:
- background
- border
- padding
- margin
- width
- height
- color
- font-size
- font-style
- font-weight
- line-height
- font-family
- text-decoration
- text-align
- list-style
Deliverables
- Link to Figma Design File
- Link to Glitch website
- Step 1: Compose
Start by considering the text you will be designing around. Take some time to think through and compose your thoughts on digital and interaction design, and respond to the following questions. You should shoot for having a couple of sentences (at least) for each response.- How do you define “Interaction Design”?
- What are the differences between designing for say, a print product, and a digital product?
- When was the last time you saw digital design in the world that surprised you?
- What does “UX and UI” mean to you (if anything)?
- What are you most interested in learning in this class?
- Step 2: Sketch
Based on our initial in-class critique, you will sketch some grid ideas that might be appropriate for your text. In Figma, create three (3) 1440 px wide frames. Design a distinct grid system for each. The particulars of each system are up to you, but consider the limits of the frame width, and the length of your text as constraining factors. - Step 3: Prototype
Start mocking up your text into each grid system. Try to keep things in black and white - we will determine the use of color later. You will select a typeface or variation for the header, subheader, and body text. Be creative and discover ways to adhere to, and break apart, each grid system. - Try to avoid jumping ahead to the CSS parts of the project and focus on experimenting and seeing what's possible with just HTML.The site should have at least:
- 1 heading <h1></h1>
- 1 paragraph <p></p>
- 1 image <img>
- 1 list (with at least 3 items) <ul><li></li></ul>
- 1 link <a></a>
- 1 html element we didn't cover in class (consult the w3schools reference)
- Step 4: Code
Choose one of your grid systems to flesh out with html and css in Glitch. Introduce no more than two (2) colors to your design - be thoughtful in your use of color! You are also allowed to introduce three (3) images to your Homepage. Please also make space for your future projects and exercises in this course.