Stream - A Simple Guide to Web Design
Pointer

A Very Simple Guide to Web Design

This site is a small collection of some basic knowledge of web design that would be helpful if you’re just starting out, or are transitioning from print design. You should have at least a basic working knowledge of Adobe Photoshop going into this, but this information may help you either way.

Web vs Print

Web Vs Print

Unlike print design, that has specific requirements that need to be adhered to, web is much more fluid and can be made to adapt to the many ways it can be viewed. The layout can be shifted for different sized viewports, things can be animated and layered creating depth and movement throughout, all from the same design. When putting together a web design you’ll want to think of more than just the layout, but also ways that you can add more dynamic elements to give a better user experience. In some instances, web and print can even be made to work together to convey an idea, with things like QR codes for example.

Printed work is typically not interactive, and is usually a finished product that someone can hold in their hand. You have limited area to get a message across and convince the viewer to take further action. On the web, with the exception of banner ads you have an infinite amount of space and pages to work with, with a design that will be forever evolving. Your goal is to keep a user engaged and stay on your site as long as possible, as well as getting a user to hit specific conversion points. So you really want to keep the design clean and uncluttered, to try and keep your overall message as easy to understand as possible. Clear navigation is key, with other conversion points sprinkled throughout to entice users to click further into your site, instead of immediately bouncing.

A few other key points of interest are that print is measured in inches, while on the web you’re measuring in pixels. For print you’re designing for a specific size, but on the web the goal is to create one design that works consistently across all monitor sizes and resolutions. For print it’s a lot easier to move certain design elements around from design to design, but on the web you typically want to keep certain design elements consistent from page to page, like navigation for example.

The goal of the two mediums is essentially the same when it comes to advertising, to be informational and convert viewers into leads. But the process of getting to the finished design can be vastly different.

There are a lot of methods for starting a website design. Some people support starting mobile first, some say you should just skip Photoshop all together and design right in the browser. Once you get more comfortable with web design you should explore these other options and go with what works best for you. For me, I still like to start with the desktop view in Photoshop. I feel that if you plan ahead enough with the desktop version of the site, planning for things like responsiveness and how the elements in your design will shift for different resolutions, it will make the transition into development that much quicker and easier.

Document Setup

To start your design, you should set up a template PSD file that has all your guides in place. Once you set this up you can use this whenever you start a new design. I like to start with a width of 1400px, and a height of 857px which I adjust as I’m designing, all at 72dpi. For web design, the dpi should always be at 72 because that's the resolution of most desktop and laptop monitors. If you have the resolution higher or lower, some images or other elements might appear skewed or pixelated in a browser, or the load time of your site could increase significantly.

Guide Left Guide Right

I like to begin my designs in Photoshop with vertical guides at 100px, 115px, 700px (center), 1285px, and 1300px. That gives your design a width of 1200px to work with, with 15px space on either side. This can be adjusted to whatever you need to fit your design depending on what you plan to do. I also put a horizontal guide at 650px. This is where people usually consider the "fold", the place where the page gets cut off in the browser when the site initially loads. Once you get more comfortable with web design, you can set your guides however you like, or not have any at all. Some people also like to use grid layouts when putting together a design, which is another way to help with planning, responsiveness, and consistency. You also don't really need to set a max width on the site, because with a responsive design you could have the design go as wide as the viewer’s screen allows. I just like keeping a max width for easier development. A lot of responsive design within coding is based on percentages, and it sometimes makes it easier to have a set max width to base these percentages on. That's just a preference of mine and another thing you should experiment with once you're comfortable with it.

HTML & CSS

One of the best ways to get comfortable designing for the web is to have a basic understanding of how a site is built. If you learn how the things you design will be handled once developed, it will help you make creative problem solving decisions during the design phase rather than having to adjust during development.

There’s two basic layers to understanding how a site works. HTML, or Hyper Text Markup Language, makes up the content of a website and CSS, or Cascading Style Sheets, determines the styles of that content. Think of it as HTML being like a house, and CSS is the color of the siding, where the living room is located, the paint color of the walls, etc. Each element on a page is wrapped in an identifying tag, which you use in CSS to identify where your styles are being applied. For example, a block of text can be wrapped in a paragraph tag, then with CSS you can apply styles specifically to all elements wrapped in paragraph tags.

HTML

<p>
This will be a styled paragraph.
</p>

CSS

p {
color: #75d3bb;
font-weight: bold;
font-style: italic;
font-size: 22px;
}

RESULT

This will be a styled paragraph.

This is why when designing for the web, you want to try and keep styles for things like font and spacing as consistant as you can. The more consistant you are, the less styles need to be written during development. For example if you always have 15px of space on either side of your design, then one style will be written to add that spacing. But if it fluctuates from page to page, additional styles would need to be applied to get the positioning of certain elements correct. The same goes with font color, font familes or sizing, background colors and patterns, pretty much anything that will show up all throughout the site. Special cases can be made for areas you’re trying to draw attention to or if your design calls for it, but for the most part consistancy is preferred.

The Extra Layer

The Extra Layer

One other thing to keep in mind when designing a website is that you can add a little extra to your design using javascript and plugins. Javascript works in the background to add functionality to a website that otherwise might not be possible. For example, you have an extensive navigation that you’d like to have stacked along the side of the page, you can use a plugin to collapse the nav and keep it more compact and easier to work with within your design.

There’s all sorts of plugins like this available to add an extra layer of creativity to your designs. If you have an idea, just research for a plugin that might work or speak with a developer to see what’s possible.

Media Queries

Media Queries

Media queries are a tool used to apply different styles to a website based on certain information. The most popular use of media queries is applying styles based on screen resolution, which allows you to adapt a design to different resolutions rather than showing a whole separately developed website (which is still a popular way of handling mobile design). Here is an example of how different styles can be applied.

Resize window

to see how

it effects

the layout.

As your screen is resized, a 4 column layout can switch to a 2 column layout, then a 1 column layout. Other styles can also be applied to these same elements depending on resolution, which enables you to create a completely different user experience on mobile if warranted. Understanding how your content will shift during the design phase will help plan for making your design as fluid as possible, and will also help development go smoothly and stay as true as possible to your initial design.

The Toolbox

The longer you work in web design, the more you’ll come across different resources and websites that you’ll continuously visit to aid with future projects. As an example, below is a short list of resources I like to use whenever I hit a metaphorical wall in a design. Personally, I like sites that give me creative ideas, and sites that keep me informed about current web practices that could effect the process of how I do my job. Feel free to use these resources, or start your own collection.

Thanks for reading. Hopefully you know more now.