Websites // Web Design

Web Design

By Josh Bertrand
Sep 25, 2018

Start with a strategy

We know your goal is to have a fantastic cutting edge design, but what are your goals? Functional web design should involve a strategy and it starts internally. Really think about your business as a whole, what you want on your website, how it will be used and by whom and what your goals are.

It is a good idea to do competitive research and get a feel for what your competitors are doing. If you have a current website, check analytics and see how your users have been using the site in the past. Their behaviors can help you determine what can make your site more successful for your business.

It is always good to see what’s worked well in the past and analyze. You should keep the good parts, but expand your horizons and see what’s new out there. Although there is no perfect formula for a beautiful web design, there is certainly a process and it involves best practices & a whole lot of creativity.

Know your assets

After a good amount of discovery, you have an idea of what you want to do, then it is time find inspiration. Our advice when beginning to concept your web design is to start with your assets. What do you have to work with? Meaning, do a review of all your assets to understand what content you are working with.

You should look at:

  • Previous Website
  • High Resolution Photography
  • Sales Brochures
  • Email Templates
  • Billboards
  • Social Media Accounts

Once you know what you are working with, you can better guide your design. i.e. you won’t go with a heavy photo design if you don’t have the photography to support it.

It’s about them, not you.

If I told you that you have maybe 2 seconds (if you are lucky) to grab a users attention before they close their browser, what would you put first on your page? The harsh truth about Web Design is that users have the attention span of a squirrel and you have to grab their attention quick. Ask yourself, when was the last time you went to a non-educational/news website and actually read all the content on the page? Understanding user behavior, helps you understand how to guide them on a page. You can highlight the most important information about your goods or services.

Let’s talk about a home page design as an example. As the first page your users will see a majority of the time, it needs to serve as a complete guide of everything your website has to offer. It should also show you are a respectable brand with credibility that can be trusted. This is why a home page design strategy might be to take all of the top pages of your website and lay them out in importance from the top down. It might also have a lead in with content from some of those pages to capture a users eye.

Bottom line, figure out what matters most to them and incorporate that into your design strategy.

Start with a blue print

We understand everyone is eager to see what the final design looks like, but just as an contractor wouldn’t build a house without a plans, it would be hard to build a strategic and functional web design without a wireframe. It’s just helpful to lay out your plan first in black/white before you jump headfirst to how to make this colorful & creative.

The overall goal in your wireframe process should be to layout all elements, content, etc. on a page, the purpose behind why they are there and what your intended action is. This allows you to really step back and make sure the content flow on the page makes sense. A wireframe should help you catch things before the design phase and allow you to easily move things around or change direction if needed without having to put a fresh coat of paint on.

Execute your design… and be creative!

Responsive Design?

You can’t talk about web design in todays world without bringing up responsive design. At this point in time, Responsive Design is an assumed practice in the web design industry for all new websites. What it means is that your design is user friendly on every type of device a user might use to access your website.

When we go through this process, we are really taking a deep dive into everything we have learned about what your brand is and what it represents to translate how that can be turned into a successful asset for your business. The color, the message, the imagery, the flow is a constant thought throughout each page we touch.

There are 4 major viewports we are talking about:

  • Mobile
  • Tablet
  • Desktop
  • Large Desktop

The introduction of responsive design really forced web designers to think about and change strategy towards web design. You have to really step back and think through how users perceive content with each different type of device. For example, on a mobile device, long pages are not optimal. The longer your page is, the more likely your user will leave. A good designer will develop a strategy to condense your page layout on mobile verses desktop layout.

Responsive design also birthed the creation of the Burger Menu (that 3 little bar icon you see to find a sites navigation menu – yes, it has a name) in the web design world. It was the best way to present a navigation menu to the user. It needed to be clear and standardized for the best user experience.

I’ll admit, the actual design stage is really the part I’m antsy to get to. This is where all those inspirational thoughts and information during the discovery, research and wireframe finally get to come out into colors and pictures. But, and it’s a big BUT, I can’t stress enough how important all the other steps are to producing amazing end results. So take your time, don’t cut corners, and have fun!