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 …
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).
The video below shows how to use photoshop to …
Style tiles were created by Samantha Warren.
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 …
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.
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 …
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>
This version has appeared more recently and it just has links in …
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 …
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 …