Design for Web

Estimated Time: 1 hour

In this lesson we’ll cover all things to do with UI design for websites. Designing for web is slightly more difficult that designing for mobile, mainly because there’s more screen real estate and less interactions to work with. Users can click, swipe, long press, pinch, zoom, etc when interacting with mobile interfaces while on the web, users can click, drag, long press and double click. There are also no specific guidelines, space/size factors or icons when designing for the web. Based on this, a few good-to-knows when designing for web have been highlighted below:

  • Feel free to use icons, images and illustrations from anywhere as long as the styles match and create balance in your design.
  • Use any size/spacing factor that you’re comfortable with as long as it's reasonable. I use either 6px or 8px since that's what I use for mobile (keeps things simple).
  • Click targets should be no smaller 24px x 24px.

Other than these and the basic principles of UI design covered in chapter 3, there aren’t many other considerations you need to make when designing for the web. We’ll cover anything else you need to know during the user experience (UX) part of this course, you’ll also pick up more useful tips and guides as you spend more time designing.

Responsive Web Design

As of August 2022, about 54% of global website traffic was on mobile devices while about 46% was on desktop. This tells us that websites were accessed more on mobile devices than on desktops. This is the result of a trend that has been growing over the last decade where more people are able to gain access to the web using mobile devices since they are cheaper than desktops.

It means designers have to create responsive web designs. Responsive web designs are designs that change and adapt based on the devices/screen sizes used to access them. You may have noticed this yourself but just in case you haven't, check out the exercise below.

Layout Grid

Layout grids allow designers to create layouts that change dynamically based on the device/screen size used to access a website. In theory this means that based on the layout of a design at one screen size, it's relatively easy to predict how the layout will change at other screen sizes. This leads many early stage designers to believe that if they create their design on one screen size, it can be adapted later in development to respond to multiple screen sizes, unfortunately this is not the case. Best practice is for designers to layout their designs at multiple screen sizes (often called breakpoints). These breakpoints act as guides for the development team which tells them what range of screen sizes a particular layout should hold before changing to a different layout. More details on breakpoints will be shared in the sub-section below. Layout grids consist of columns, gutters and margins, they are also useful for aligning and separating content in UI design. Please watch the video below to learn what columns, gutters and margins are and how to create a layout grid in Figma.

Designing for Different Breakpoints

As mentioned above best practice when designing for web is for designers to layout their designs at multiple breakpoints (screen sizes). Depending on the team you’re working with you may need to layout your designs on anywhere from 3 - 5 different breakpoints. In cases where you're the only designer working on a product, 2 breakpoints should be acceptable (as long as your team is onboard with this). So what sizes should your break points be?

Depending on if you’re laying out your designs on 5 or 3 breakpoints, your largest screen width (frame size in figma) could be either 1920px or 1440px respectively - personally, I use 1440px as my largest breakpoint. The smallest breakpoint is usually 360px. You’ll often hear/read that a mobile-first approach should be used when designing for web. This means that when designing for web, designs for the smallest mobile breakpoint (360px) should be done first before designing for the largest (1440px or 1920px). This is due to the stats shared above about global website traffic on mobile devices vs desktops. Personally I do the opposite, I design for the largest breakpoint (1440px) then work backwards to mobile. This is mainly because I find designing for mobile easier than web and from my experience I’ve found that many designers do the same. There's no right or wrong way to do this, as long as all breakpoints agreed upon by your team are designed whichever one you start with should be fine. Some other breakpoints you may come across are 1280px, 1024px, 720px, 600px, etc.

As you layout your designs at different breakpoints the layout grid you use will need to change to match the breakpoint you’re designing for. Please watch the video below for how to layout your designs at different breakpoints and how to create layout grids for different breakpoints.

Resources and Inspiration

We’ve spent the last two chapters introducing you to UI design, design principles and designing for mobile and web. Even with all this information it can still be difficult to create different/unique designs that aren’t only functional but also aesthetically pleasing for the many products you may design in the future. A good starting point when creating visual designs for a UI’s, is to take a look at some sources of inspiration. These sources of inspiration can be helpful when deciding on a visual direction for your UI designs and also in showing you the possibilities of features and functionalities you can use in your design. Below is a list of a few places I go for inspiration:

The list above is not exhaustive, there are many others out there, these are just the ones that I use when I start working on a new UI design. Some of the sources of inspiration listed focus on beauty over function (dribbble and awwwards). Replicating UI designs seen on these platforms may not be feasible when designing interfaces everyday people are expected to interact with. They can also be a nightmare to implement for developers. Ensure that whatever features, functionalities and aesthetic styles you bring into your designs from your sources of inspiration are common and relatively straightforward to implement. It's important to note that UI design isn’t a competition about who can come up with the most unique/creative designs. It’s about ensuring that users can achieve their desired goals with the features and functionalities of the product and that it’s also aesthetically pleasing to use. In short, form and function come first, then comes aesthetics. With this in mind, know that it's completely ok, in fact expected, for you to copy from other designs, designers, sources of inspiration, etc. All designers copy and there are little to no new or unique usable UI designs.

With sources of inspiration covered, you’ll also need resources such as; images, icons, illustrations, etc for your design. Bookmarks.design is an amazing bank of platforms that provide all these resources including sources of inspiration, videos, communities, design tools, etc. If you’re ever looking for anything UI design related, most likely bookmarks.design has a link to a platform that provides the service. Some honorable mentions of platforms I use are:

These platforms are all accessible on bookmarks.design as well.

Reflect

We’ve covered quite a bit of content on designing for web. Before moving on to the next lesson, spend a few minutes reflecting on why responsive design is important, how layout grids help create responsive designs and why designing for different breakpoints is important. Also think about the resources you may need and where you can find them.