If you’ve ever investigated website design concepts, you’re probably more than knowledgeable about the following mindset: “Web style is so easy these days. With lightning-fast web speed and sophisticated browsers, designers barely have to handle any of the restrictions that formed the early days of the web. A website is, more than ever, a designer’s canvas.”
This might hold true enough from the point of view of someone already comfy with the basics, but if phrases like “CSS responsive grid system” and “Google Web Fonts” are alien to you, then delving into the apparently “oh-so-easy” world of website design might still appear a complicated proposal.
In recognition of this, we created a truly standard set of web design essentials with the beginner in mind. Obviously, it’s never ever a bad concept to examine the basics, even if you consider yourself a wiz.
1. Grid systems
Considering that the invention of the codex in the 1st century, the grid has figured out how we read. Thousands of variations, involving different arrangements of rows and columns, have actually emerged with time.
Consider the method text and images that are set up in books, papers, and publications. These are the systems that were basically directly roll over onto the web, and they work. Recommendation: many a designer has actually attempted to prevent the grid in the name of “imagination”; lots of such sites go unread.
In a world where individuals areas, if not more likely to browse the web on phones and tablets than on standard computer systems, the concern of “responsive design”– designs that translate to smaller screen sizes in a smooth and deliberate manner– is also critical.
To make our lives much easier, a big number of pre-fabricated grid systems have emerged which are responsive, compatible with major coding languages, and normally free to download.
Some popular ones are 960. gs, Simple Grid, and Golden Grid System, but the list of excellent alternatives are really enormous, with some being more complicated than others. Here’s a good article from WebDesignerDepot to get you began.
Naturally, if you’re feeling adventurous or feel your task requires a really unique option, then, by all means, produce your own.
2. Visual hierarchy
We recently wrote a full post on this subject, so we’ll be quick here. Essentially, it’s a known fact that in many cultures, individuals read left-to-right and top-down. Nevertheless, it is likewise a recognized fact that, within these specifications, checking out habits follows a far more complicated set of guidelines. This is specifically real on the internet where individuals in fact “scan” pages far more than they “check out” them.
Excellent web pages are integrated with reaction to these measured reading patterns by putting important aspects, like the logo design, contact us to action or an essential image, along the axes that the reader is anticipated to scan. These conventionally take either an “F” or a “Z” shape.
Beyond that, the visual hierarchy has to do with signaling to readers what ought to read first and what must read next. After page placement, this may involve techniques like font style size, spacing, direction, and typeface pairing, in addition to the use of color highlights.
3. Web-safe typefaces
In 2014, the term “web-safe font styles” already feels like something of an anachronism. Back in the early days of the internet, internet browsers supported an extremely limited number of font styles– usually just ones that were currently set up in users’ word processing software– and if you deviated from these, some visitors would just wind up seeing random symbols.
Today, it is still real that particular fonts are supported by most web browsers while others font styles are not, however, the number of web-safe options has blown up thanks to the adoption of what is called @font- face embedding in most modern-day web browsers. Indeed, many designers complain of having too much to choose from.
Fee-based font services include Typekit, WebINK, and Fontspring. You can discover nice totally free typefaces, too, if you do a little searching through complementary services like Google Web Fonts. Here is a recent roundup of great totally free web fonts by CreativeBloq.
Now that you know where to look, there are just a couple of basic rules to bear in mind:
– Serif typefaces are for headings
In website design, serif typefaces are always scheduled for headlines, because at smaller sized sizes they become hard to read. Body text should usually be sans-serif.
– Keep typefaces very little
To lower mess, keep the number of different typefaces on a website to a minimum. 2 or three at the most. Take a look at our recent post on smart font pairing to learn more.
– Don’t use up excessive space
Remember that some font files can be pretty huge, and this might possibly slow the load time of a site.
4. Images and colors
The principles of image and color placement are not especially distinct to web design, so we won’t go into too much depth here. The main maxim to keep is: don’t overdo it.
For colors:
– Keep your color palette very little
Like typefaces, simply adhere to 2 or 3. They ought to naturally echo the host’s branding while serving to highlight crucial locations, as noted in the “visual hierarchy” area.
– Consider color blindness
One other consideration worth keeping in the back of your mind is the truth that something like 5% of the (male) population is colorblind, so beware of your color pairings. We composed a more extensive post on the topic here.
For images:
– Keep movement very little
Avoid images that move. Withstand the urge for flash. Even.gifs are extremely questionable unless performed with the utmost ability. In general, studies reveal that viewers much prefer sites that keep still.
– Choose images attentively
Don’t utilize images simply as a method to fill area; visitors will pick up on this right away and may lose interest in your page. Instead, just utilize images that communicate useful info– highlighting accompanying text or explaining something about an item being explained. This post on Designinstruct covers this concern more thoroughly.
– Always abide by all stock image licensing limitations
Be aware of the licensing restrictions related to your images. A lot of images are copyrighted, meaning that you or your customer will need to pay to utilize them, according to your needs. You can familiarize yourself with this subject using previous short articles we have written.
– Keep file sizes little
Ensure your image sizes are as low as possible (web resolution is 72 ppi). Images frequently account for 60% or more of the size of a website/loading time.
