Creating Websites With Character and Function For The Modern Web

Alec Lamothe

May 25, 2022

Websites With Character and Function 

It’s easy to design a website that gets the job done, but it's much harder to design a website with a style that will leave users with a strong impression of your business. There’s many factors that play into creating a strong website, such as color, layout or typography, but the magic of a well designed site is when all those items come together to create a cohesive identity. I’ll walk through my thought process on combining function and character on the modern web. 

Know the difference between art and design

Unlike art, design’s main role is to serve a function. Because of that, the need to be original is not your main concern. There’s a reason all of your favorite apps and websites share similar user experiences, to serve the user as best as possible. Sure, you can add your own flair to your site, but you want the user to be comfortable when they arrive and not need to learn a brand new method of navigating. That’s why you should only be original with your styling, rather than the actual functionality of the site. There are exceptions to this rule of course. For example, if you’re creating a website for a high fashion client or similar experiential brand, you can really let loose and do something with shock value. 

Thinking conceptually

When you’re starting on a new site, rather than jumping straight into your website builder of choice, I’d try to envision an overall theme for the company through some of the design elements you will be using. For example, let’s say you are creating a site for an ice cream parlor. I like to start with typography, so I may think of a fun, bubbly font that will suit the business well such as Poppins, by Google. From there I would continue that bubbly and fun vibe and translate that into other aspects of the website as well. 

Here are some example of how I take inspiration from my font choice and translate that into other aspects of web design: 

Section Design - Let’s take a look at our font. It’s rounded and playful, so let’s give our sections that same rounded look. Sharp corners can come off too professional especially for an ice cream brand. So let’s translate that same style onto the layout. 

Color - I’d use a pastel color scheme. Nothing too harsh to avoid high contrast. Keeping the vibe neutral and inviting just like the text

Iconography - I think you’re starting to catch on. Something more youthful would work best. You could take this a step further as well and make the icons themselves have their own color style rather than the common monotone design. Adding an extra level of complexity that the users will appreciate. 

You can apply this thinking to every aspect of your site and soon you will have your own theme fully developed. I like to take one aspect of your site and ride with it. I always start with type, but you can do this process with almost anything. 

Fit in while standing out

If I’m struggling to start with a design style, I will always take a look at other sites for inspiration. Let’s say I’m creating a website for a tech company. When I close my eyes, I picture a few things; the color blue (Twitter, Facebook, LinkedIn), I also picture lots of white space, modern clean photography, and a business casual style. This is the status quo for tech companies and every industry has one. When I want to create a tech website I use this style as inspiration but always add a flair to it to make sure users can clearly tell the difference between us and them. 

For example, the client's colors may be blue, but if you add a unique gradient to the colors, that's a small way to show you are not just another Facebook or Twitter. And rather than the usual stock photo look of office photography, you could use 3D models and interesting graphics. 

It’s all about taking what a client is used to and putting your own spin on it. There are so many websites thrown together with no real style. So look up to your favorite companies for inspiration, but always add your own style to make it unique. 

Final Thoughts

Design is always in service of function, but creating design that is smart and eye-catching is what every designer should strive for. Refining your designs and thinking in big concepts will let you see the big picture and match your designs to a style that serves the client perfectly. 

Sources: 

https://dribbble.com/shots/15929837-Ice-Cream https://dribbble.com/shots/15253750-Icecream-Landing-page https://dribbble.com/shots/17591722-Scribe-Icon-Set https://dribbble.com/shots/16046711-Color-Pop

< Return to Insights

Launch your next project

Take your business to the next level and get Canada's leading advertising agency on your next campaign.

Let's Get Started