Here we’re going to collect some tips to help you when creating and modifying your site UI. UI stands for User Interface and are the elements people use on the site. Dividers are not always needed [tweet] Increase whitespace (when appropriate) [tweet] Containers are overrated [tweet]
Category: Design
Color
This is a quick resource. It will be filled in more later Color Contrast Checkers Lea Verou’s Contrast Ratio WebAIM’s Contrast Checker Deque University’s Color Contrast Analyzer Adobe’s Leonardo Corey Ginnivan’s Who Can Use For more information read Christopher Schmidtt’s Color Theory and Contrast Ratios Other Tools Accessible Palette https://accessiblepalette.com/ Pantone Connect https://connect.pantone.com/ Deep Dive If you want to really… Continue reading Color
Typographic Resources
Some Resources on Typography. Posts on our Class Site
Responsive Images and Video
Images are by default inline elements that are a certain size and will take up that space on your web site. For responsive web design we need our images to be able to shrink in size if the container they are in is smaller than the image. For example: The following needs to be in… Continue reading Responsive Images and Video
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 web typography won’t suck. It will most likely be pretty good. The simplicity of the… Continue reading Typography Basics
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 the reader two basic things: what text is more or less important, what kinds of… Continue reading Typographic Hierarchy
Web Fonts List
This is a LONG list of web fonts. It’s meant to be used as a resource that you can come to when trying to find the right fonts for your web sites. It is not a full list of what’s available but more as a help and starting point. Fonts with multiple weights These fonts… Continue reading Web Fonts List
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 to have a discussion about the design with teammates, clients etc, in a quick way… Continue reading Style Tiles
Media Queries
In order to have a fully responsive web page you need three things: Fluid Layout: the width of the layout is set in fluid units like percent or fr units. This allows the layout to expand and contract to fit the width of the browser window. Flexible Media: images, video etc can also adjust their width… Continue reading Media Queries
CSS Grid
CSS Grid is relatively simple to get started but it is also deep with a lot to learn. This page has resources about CSS Grid for those just getting started to exploring more complex layouts. Getting Started Guides These guides are designed to help you learn Grid. They all teach the basic ideas but with… Continue reading CSS Grid
CSS Games
CSS Diner: Selectors Game Play Game: https://flukeout.github.io/ This is a web game that requires you to write CSS Selectors. It’s a fun way to test your knowledge of writing selectors for CSS. It also explains the selectors so it can be a good learning tool as well. By the end of this class you should… Continue reading CSS Games
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 of what they see. They are particularly useful for web design where we’re using a… Continue reading Gestalt Principles and Web Design
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 (written and video): https://web.dev/one-line-layouts/ Editable Demo Examples on Glitch: https://1linelayouts.glitch.me/ GitHub Repository: https://github.com/una/1linelayouts YouTube Video… Continue reading One-Line Layouts
