Download sketch (if you don't already have it). The sketch files provided all use the Google Font, Roboto.
Install the FontBuddy sketch plugin. When you open sketch documents, you'll be able to install the missing fonts.
Open sketch-dev-day-warmup.sketch and follow the instructions for each exercise.
Now that you're familiar with sketch, we're going to look at some flawed designs and start fixing their issues. This dev day isn't focused on design fundamentals, but we'll cover the 3 most common mistakes so that we can understand them and fix the issues in our mockups.
Without further ado, the 3 most fundamental (and easily correctable) mistakes in design are:
There are 4 common problems seen with spacing.
1 - Things that belong together should be closer together
In the example on the left, the labels and the inputs are 1rem apart. The padding between the elements and their container is also 1rem. This makes it hard to tell what belongs together. This issue is corrected in the example on the right where the padding on the container is the largest (1.5rem), followed by the spacing between the fields (1rem), followed by the spacing between the label and it's input (.5rem).
2 - Things should not be needlessly far apart
In this example, middle name is very far away from the other inputs. It certainly shouldn't be any further away than the container padding of 1.5rem.
Here is a more reasonable amount of spacing:
3 - Spacing should be consistent
In this example, the spacing between the elements and their container is different. Certainly there wouldn't be a reason for the top, left, and bottom padding to match.
4 - Not using enough space
It's very temping to use cards and border and backgrounds to separate logical groupings. Every element you add to the page (a border, a background color) makes your design more complicated. Whitespace can be used instead and will help simplify your designs.
Designs with high levels of alignment appear organized and as if care was put in to the design. Designs without alignment can be confusing and look disorganized.
In this example, the word 'Optional' is not aligned with the label 'Middle name'. Ideally, the text would be aligned at their baseline.
Visual hierarchy is more generally referred to as contrast. You create visual hierarchy by emphasizing important elements, and de-emphasizing less important elements. With text, this might be achieved by font weight, font color, or font size.
The next exercises you'll be asked to fix drawing with these 3 common design problems.
Open sketch-dev-day-fundamentals.sketch and follow the instructions for each exercise.
One of the most outrageous websites I've come across recently, is the Yale School of Art. Navigate around the site and pick aspects that you want to incorporate into your design. Do a sketch mockup using a subset of their content to create a proposal for a site overhaul. You might also want to check out some good sites as inspiration for your design. We will share our designs at the end of the day.