Web Design Techniques

Modern web design is so much more than creating something “that looks nice”. A web design has got to be engaging and hold the user’s interest and guide them in carrying out a certain action, or series of actions for that matter.

Fundamental design techniques such as balance, hierarchy, colour, contrast, form, shape, unity/harmony etc help us achieve this engagement, and it’s why “design” (deployed properly) can be so valuable.

Web design in 2016 requires us to design interactions, to develop narratives and explore the relationship between the decisions of our users and our designs. It also allows us to be iterative, to test user’s responses and see where they click.

Vivid Colors

Using bright colors in your website designs can add a lot of visual interest. They’re best for sites that want to appeal to younger demographics or for more casual sites. Using colors either in the similar hues or saturation makes for a more cohesive appearance and keeps things from looking too busy.

Make sure when using vivid color schemes that you allow sufficient contrast between elements without using too much (such as red text on a green background). This is especially important with text, as improper contrast can make things very difficult, if not impossible, to read.

Gradients and Lighting Effects

Gradients and lighting effects can be used for dramatic or subtle effects, or anything in between. Mixed or used separately, they can add a bit of extra polish to your designs. A subtle tone-on-tone gradient can make a great background, while gradients mixed with lighting effects are often used to create awesome header images.

If you’re mixing gradients with lighting effects (particularly multiple effects), be careful that your design doesn’t end up too busy. Limit either the colors used, the intensity of the lighting effects, or the overall number of effects for the best results.

Transparency

Transparent boxes work especially well over interesting backgrounds that aren’t too busy. Whether it’s a photo, a sketch, or just geometric and graphic elements, transparent layers can give your background a larger part in your site’s design.

Grunge

Grunge is a pretty broad category when it comes to website design. Adding in subtle grunge elements to otherwise clean and polished sites can contribute a bit of an edge to the overall design. You can also combine multiple elements of grunge design to create a site that’s clearly grungy.

Hand-Drawn Designs

Hand-drawn and sketched elements can make your site look a bit more casual and even fun. Whether you use complete sketches or just doodled elements, using hand-drawn elements makes your site look a bit more artistic and can sometimes add a whimsical element. It also evokes childhood and cartoons in many circumstances or, less frequently, fine art.

Muted Colors

Muted colors are a great way to create a subtle, inviting site. Mixing in muted colors with one or two brighter or darker accent colors can be put to good use to make certain elements of your site stand out. Muted colors don’t need to be limited to grays or browns. You can use any hue in the spectrum, just toned down or with a grayish-tinge.

Watercolor Effects

Creating a site with watercolor elements has become easier with the wide availability of watercolor Photoshop brushes and textures. Using watercolor effects in headers, backgrounds, and other elements is an important design trend. The beauty of watercolor elements is that they can easily be made to stand out or stay in the background depending on the colors you use and how transparent you make them. Either way works, and what you choose to do should depend on whether you want your site designs to have a bold or subdued appearance.

Nature-Inspired Elements

Nature-inspired elements are most popular on environmental and green industry websites, but they’re starting to pop up all over the web. Some of the most prevalent places are in designer portfolios and personal blogs.

Photo-Realistic Backgrounds

One of the most popular photo-realistic background techniques in the past year or two is the creation of desk-top or table-top backgrounds. These generally consist of a wooden surface with various papers, coffee, cups, and other elements overlaid on them. It’s a tough technique to pull off (making sure shadows and light sources are all consistent, etc.) but makes for an awesome effect when done well.