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 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’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!


Leave a Reply

Your email address will not be published. Required fields are marked *