Web Design

conventions and techniques

The Web has grown exponentially since its inception. Though it was initially seen as a space for researchers, hobbyists and fandoms to congregate and share their interests, today having a website is seen as a requirement for every brand and institution. Plenty of platforms exist for quickly carving out a brand's corner of the Internet, whether that's creating a social media account or using a website builder like Squarespace or Wix, but when a brand wants a unique and custom online presence they turn to web designers. Web designers approach HTML and CSS from the point of view of graphic design, concerned with traditional design concepts like typography, composition, color theory, etc.

However, the Web presents unique challenges that graphic designers never had to consider before, for example: how do you achieve a balanced composition when you can't be sure of the resolution/proportions of each individual viewers screens? How should a design change/respond to user interactions? So it should come as no surprise to know that the world of web design has it's own set of techniques, trends and conventions.

Web Design Trends

Here I've put together a collection of web design trends seen through a single element: . Take a look at these examples, experiment with them and dig deeper into any of the styles/trends that interest you.

Responsive Web Design

Writing code that dynamically adapts a site's design to the viewers screen size/resolution is known as Responsive Web Design (RWD). I've put together an interactive RWD tutorial (~43mins; backup: video version here) which covers the basic concept and most popular techniques for achieving these. Below you'll find sketches for each of the techniques covered in the tutorial.