Resizing Images
In order to have a symmetrical grid of images or image cards, you need every image to be the same aspect ratio (relationship between width and height).
Resize Images in Photoshop
The video below shows how to use photoshop to …
Design
Style Tiles
Style tiles were created by Samantha Warren.
Style Tiles
The purpose of these is to start to show the visual design elements are not in a wireframe without having to create a full-blown mockup of the site. This allows you …
One-Line Layouts
10 MODERN LAYOUTS IN 1 LINE OF CSS
by Una Kravets
In this article and related resources Una shows how to create modern layouts with just a small amount of CSS. The layouts mostly use CSS Grid and Flexbox.
- Article
Typographic Hierarchy
Most of the web is text so much of what you have to design is text. A typographic hierarchy helps the user to quickly scan a page and find information. Also, done right, it will make the page more visually attractive.
Typographic Hierarchy tells …
Navigation
HTML
Classic Version
The classic version uses an unordered list for the navigation:
<nav id="navbar">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#" >Projects</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>Newer Version
This version has appeared more recently and it just has links in …
Gestalt Principles and Web Design
A big part of graphic design in general and the web design we do in this class is communicating a message to a particular group of people (audience). The Gestalt Principles were created to help explain how people make sense …
Typography Basics
This post presents the basics of typography through a set of rules to follow. Like all rules they are made to be broken, but you should learn them first before you start breaking them.
If you follow these rules your …
