Put your thoughts on paper first
Think about the content, the layout and the functionality before starting to drop shadows.
Start sketching a top level framework
The framework is the UI that surrounds the content and helps to perform actions and navigate through it.
Design, Navigation, and Site Architecture
This may involve strategies like font size, spacing, direction and typeface pairing, as well as the use of color highlights.
4 Key Principles of Web Design
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 designer has attempted to avoid the grid in the name of “creativity”; many such websites go unread.
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.
In web design, serif fonts are always reserved for headlines, because at smaller sizes they become hard to read. Body text should generally be sans-serif. Keep the number of different fonts on a website to a minimum, or it will start looking cluttered. 2, 3 at the most.
Images and colors
- Like fonts, just stick to 2 or 3. They should of course echo the host’s branding, while serving to highlight important areas, as noted in the “visual hierarchy” section.
- Don’t use images simply as a way to fill space; visitors will pick up on this immediately and may lose interest in your page. Instead, only use images which communicate useful information—illustrating accompanying text or explaining something about a product being described.
- Avoid images that move. Resist the urge for flash. Even .gifs are highly questionable, unless executed with the utmost skill. In general, studies show that viewers much prefer websites that keep still.
- Keep file sizes as low as possible (web resolution is 72 ppi). Images often account for 60% or more of a web page’s size/loading time.
Responsive Design with Better Performance
Images should be properly optimized
We all know that images are often the main culprit when it comes to slow load times and this is just as true of responsive sites. There are a couple of ways to approach this and the quickest and easiest is to use Adaptive Images. This detects screen size and automatically creates, caches and delivers a scaled down version of the image, without having to change the
There are tons of decent frameworks to be found online that do away with the need for using media queries, such as Bootstrap, for example. But does this mean that you shouldn’t bother learning about them? No, too much knowledge can never be a bad thing and do you really want to rely solely on the code of others?
A media query in responsive design is a CSS declaration that is used to call other declarations, based upon the size of the screen on the target devices. You can use them in two ways: as an external call or one that writes directly inside the stylesheet.
Micro-interactions will also be one of the most popular trends in 2015. Micro-interactions are small interactions that help accomplish one simple task such as posting a status, changing a setting, rating a song or liking an article.
They encourage engagement and are used to make a static webpage more interactive and engaging as well as provide affordance, feedback, usefulness and overall better usability.
Usability and the Utility
Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.