Designing Websites versus Web Apps

Growing from websites to software

When I started my career as a web designer, I really had no idea where it was going to go. The field of user experience design really hadn’t been born when I started my post secondary education, so I wasn’t aware of what my options were. I knew that I like building websites and I knew that I was pretty good at coding, so after I finished up my B.A., I decided to pursue web design.

Moving through my career, most of my jobs have been designing and building websites for businesses and organizations. The SaaS and web based software model didn’t come along until more recently, and that’s when it all really came together for me. I realized that I could take my design skills for websites and apply them to software. The idea was pretty cool for me, because it really gave me time to focus on the behaviour and patterns of users in the software, track usage, and actually make edits to the interface based on that behavior. Pretty cool stuff.

Don’t get me wrong, I still love doing websites. If I didn’t, I wouldn’t have started Oaktree. But there are perks and downsides to both types of web design, and I’ll focus on those differences below.

Designing with the user in mind

The primary different between designing web apps and websites is the user. The intentions of someone visiting a website are totally different than what people expect to get out of a web app.

Most web apps out there have a specific purpose. Facebook focuses on connecting with friends and sharing information. Pinterest focuses on social bookmarking. Soundcloud focuses on sharing music. Even business apps like TribeHR focus on booking vacation time or filling out a performance review.

Websites, in contrast, are designed to give your customers information about your product or service. The focus of small business websites, as a general rule, are to share information about your company or organization, NOT to perform specific tasks.

The difference for the user is huge. As a designer, we need to hone in on each focus of the website or app and design around that workflow. Keeping that in mind, let’s move forward.

Navigation structure

Most company websites can actually get away with a basic navigation structure: Home – About Us – Services – News and Updates – Contact Us. Because of the nature of business, the visitors on the website are likely to be interested in one of these five areas. Web apps, by contrast, have a navigation structure that focuses on the tasks that the app performs. This may seem obvious, but it one of the primary differences in how a designer will create an interface.

Marketing versus servicing

There is no need to sell when a user is using a web app. They have already bought in and are using the app. By contrast, a company website is a marketing tool. While both interfaces will need to consider primary calls-to-action, the CTA must be much more compelling on a marketing website.  When someone is using a web app, and you already have the buy in, they will be looking for how to complete tasks, rather than the website visitor who is just looking for general information. You need to draw the website visitor in.

Let’s look at a quick example:

Pinterest.com

Pinterest is a popular web application that allows you to save and share website links.

Looking at the navigation structure of Pinterest, we don’t see anything about the company that built it, or how to contact them, mostly because the users don’t care! What they care about is browsing pins, and so the navigation is structured in such a way that it makes it easier to find the type of pins that you might be looking for. Next, think about where your focus is drawn when you look at the page. There is very little in the way of CTAs. The focus is primarily on the images: the pins, which is the main focus of the application.

Now let’s look at a company website that sells a popular product by contrast:

Apple

Apple’s Canadian website focuses on one thing, and one thing only…

Take a look at the navigation. We are now giving the visitor the option of exploring more information about the various products that the company offers. Apple may not be the best example of corporate website navigation structure because they assume that the visitor already knows what the company offers. The important aspect of this page is the exclusivity of the content to one primary CTA. Visitors don’t have a lot of options when visiting the page for the first time. For the record, there are more options below the page fold, but the visitor has to scroll in order to see them.

The Differences and the Similarities

I’ve talked about the differences between website design and web application design, but it’s important to focus on the similarities as well. While the purposes of each type of design call for different elements on the screen, the process of creating both designs should have some of the same steps.

Design with a purpose

Before starting ANY design project, it’s important to outline the goals of the design to keep yourself focused. With TribeHR, I have 4 main design principles that help keep me in line:

  1. The user should always be in control.
  2. Good design is invisible.
  3. One primary action per screen.
  4. Consistency matters, but don’t be afraid to be innovative.

When I’m stuck on a complex design problem, turning to these principles help keep the design on track and help me make important decisions.

When approaching website design, I have similar design principles:

  1. Content is King.
  2. The market is specific.
  3. Allow the user to explore.
  4. 80% of users are looking for 20% of the content (the Pareto principle)

Just like in app design, these principles help keep me focused and help make decisions when designing company websites. The rules are slightly different but the method is the same.


For more of my work, visit Oaktree Media. You can always get in touch with me if you have any questions!

Learning to design

I thought a good first post would be something that was easy for me to talk about – learning the art of web design. I often have people asking me where and how I got started in designing websites and software. I’m pretty much self taught, so my stock answer is always “play”. But what does that mean exactly?

Play in Photoshop

There are a ton of good tutorials out there that will teach you how to move around Photoshop, which is the best tool out there for designing websites. Most of the tutorials, however, will walk you through specific actions required to create a specific design or element of a design. If you’re trying to learn new techniques, these tutorials can be really advantageous. My recommendation for “learning the ropes”, however, is to copy. Pick 5 websites that you really like and try to recreate them pixel for pixel. Quite often you will find yourself stuck because there is a specific technique that is used in the design of the site that you don’t know how to replicate. That’s where good old Google and the aforementioned tutorials will help you along the way.

Amateur Web Designer Night

Play with code

HTML, CSS and JQuery are amazing tools for any web designer. Knowing what’s possible when a client asks you for specific features can make or break a project. Again, there are ton of tutorials out there that will help you learn. Try and find some functionality in a website that you like, such as CSS sprites, a javascript image slider, or true table-less design, and practice until you get them just perfect. A great way to learn is to deconstruct other people’s code line by line to see what everything does. That’s how I built my first website when I was 14.

Play with personal projects

Building up a portfolio can sometimes be a daunting task. Try picking a topic and building a website around it. Maybe a fan site for your favourite band, or a database of recipes of your favourite foods. Learning to design and build within a theme is great practice for learning about target market, UI design and social media tools. At Oaktree, Aaron and I decided to build a website that would feature local live music events. It’s been a great learning experience!

Dive right in

When I used to start a new project, I procrastinate because I don’t know where to start. I’ve learned over years of practice that the best approach is to dive right in. If you’re starting with a website design, look for inspiration through gallery sites. Pick a style that you like and try to recreate some of the element (not pixel for pixel, mind you – just the general concept). As you move forward with the design, you’ll find that it changes and evolves as you pick up on specific elements of the design that you fall in love with – an oversized header, or an awesome font in the navigation.

After you’ve found that inspiration, the sky is the limit. Create two or three designs for every project you’re working on. Then take a break and revisit them the next day. You’ll see what sticks and what doesn’t, and ideally the end result is a beautiful, sleek site that you’re proud to include in your portfolio!


For more of my work, visit Oaktree Media. You can always get in touch with me if you have any questions!