Design a homepage for yourself. The site should be personal and low-stakes, highlighting something about either yourself or one of your interests. It should not be a professional homepage for your design work.
Design it three ways: one as though the website was programmed in 1998, one in 2006, and one designed in the present.
You might reference https://www.webdesignmuseum.org/ to review some of the timelines and stylistic motifs. Think about why they were designed that way in the first place. As a class, we will look at ways in which technology changed during these time periods and how you might echo some of those choices in your sketches.
Using Figma, create a Wireframe of the type of content you might include. You should know what your page will be about and a general summary of the content you’ll need. Do not design this any further.
⭐️ Big News, Adobe buys Figma for $20 billion
👩💻 Introducing Figma
Everyone should be designing in Figma in the DHP F22 Workspace. Please use the folder with your name on it.
📌Tips for Designing Websites(Figma and otherwise)
Make sure you have an art board on your page
To do so, press the keyboard letter“a” and select one of the presets on the right.
When designing a mobile-first website or application, you should use a phone sized art board.
Websites are responsive, so ultimately need to work on a variety of screen sizes, but initially I like to start with an art board that’s 1280 px wide for non-mobile designing. In Figma, that’s the“iMac” preset.
Name your art boards as soon as you create them. This prevents a headache later on.
You can make the art board as tall as you need it, just drag the bottom of it up/down
Always start with a grid
Figma has three different types of grid(uniform grid), column, and row. Uniform grids create a series of uniformly spaced fields across your frame(imagine a sheet grid paper) at whatever size you specify. The others have a few more options to create columns and rows. There are options for how it will scale, that we’ll cover at a later point. For now, let’s focus on creating a useful grid to start designing.
In the above, I set up a 12 column grid with 25 px margin and gutter. The margin indicates how much space on the left and the right of the art board. The gutter is how much space is in between each column.
12 column grids are most common, though I sometimes use a 14 column grid and 16 column grids are also common.
The shortcut for hiding/showing the grid is control + g
Everything item on the website should align to the grid
Images, as well as everything else you’ll place on the page, will appear as a layer on the left. You can change the order to adjust what’s in front of what.
👀 Slides
👥 Show and Tell, Something Old, Something New
Introduce Personal Homepage Sketches
⭐️ Big News, Adobe buys Figma for $20 billion
👩💻 Introducing Figma
📌Tips for Designing Websites (Figma and otherwise)