This may be true enough from the perspective of someone already comfortable with the basics, but if phrases like “CSS responsive grid system” and “Google Web Fonts” are alien to you, then jumping into the supposedly “oh-so-easy” world of web design may still seem a daunting proposition.
In recognition of this, we put together a truly basic set of web design basics with the beginner in mind. Of course, it’s never a bad idea to review the fundamentals, even if you consider yourself a wiz.
Since the invention of the codex in the 1st century, the grid has determined how we read. Thousands of variations, involving different arrangements of rows and columns, have emerged over time.
Think of the way text and images are arranged in books, newspapers and magazines. These are the systems that were more or less directly carried over onto the web, and they work. Word to the wise: many a designer has attempted to avoid the grid in the name of “creativity”; many such websites go unread.
In a world where people are as, if not more, likely to browse the web on phones and tablets than on traditional computers, the issue of “responsive design”—designs that translate to smaller screen sizes in a smooth and intentional manner—is also paramount.
We recently wrote a full article on this subject, so we’ll be brief here. Basically, it’s a known fact that in most cultures, people read left-to-right and top-down. However, it is also a known fact that, within these parameters, reading behavior follows a much more complex set of rules. This is especially true on the internet where people actually “scan” pages much more than they “read” them.
Good web pages are built in response to these measured reading patterns by placing important elements, like the logo, call to action or a key image, along the axes that the reader is expected to scan. These conventionally take either an “F” or a “Z” shape.
Beyond that, visual hierarchy is about signaling to readers what should be read first and what should be read next. After page placement, this may involve strategies like font size, spacing, direction and typeface pairing, as well as the use of color highlights.
Today, it is still true that certain fonts are supported by most browsers while others fonts are not, but the number of web-safe options has exploded thanks to the adoption of what is known as @font-face embedding in most modern browsers. Indeed, many designers complain of having too much to choose from.
Fee-based font services include Typekit, WebINK, Fontdeck and Fontspring. You can find nice free fonts, too, if you do a little searching through free services like Google Web Fonts. Here is a recent roundup of nice free web fonts.
Now that you know where to look, there are just a few general rules to keep in mind:
This post was written by Alex Bigman and comes to you from our friends at the 99designs Blog. 99designs is the world’s largest online marketplace for design.