Web Design Basics: Go With the Flow
"Design is thinking made visual."
Over the past couple of weeks, I've launched two new websites: piattmhc.org and intentionalchurchconference.com. While it's exciting to jump into a new website design "face lift" or complete overhaul, it's important to reign yourself in and follow these basic steps first:
Create a flow chart
Collect content
Select a color palette and fonts
I always begin with a good ol' flow chart. There's nothing sexy about it, but it's crucial if you want a great website that is easy to navigate.
You website's flow chart should not be based on your internal organizational chart but on how a client might navigate your site.
When working on piattmhc.org, the first thing I did was sit down with the Executive Director so that together we could talk through their main menu. While they originally had structured their old website according to their internal organizational chart, this isn't necessarily how one might navigate their website. For example, The Center originally had "addiction services" under "mental health." While this makes total sense to The Center's employees, the average person may not correlate addiction to mental health services so we made "addition services" under its own heading.
Once a flow chart is created, I collect the desired content such as text and photos.
The desired content will determine if your website should just be a one-page site or much larger necessitating subpages.
Because The Center has many different services that they offer with detailed criteria, they wanted to be able to point clients to their website for further information as well as links to state services that can be difficult for clients to find on their own. So rather than have a homepage menu with a dozen pages, we created subpages making navigation easier. For example, if someone needs information for developmental services only, we created a landing page with a menu of all their developmental services.
Once I know the flow and content, it's time to pick the color palette and font choices. If an organization already has a color palette, that's great, but that isn't always the case.
The color palette and font choices need to enhance a website, not distract.
For The Center, I took their logo and updated the color from its original bright blue to a blue that is more subtle. Then after looking through the photos they produced, I noticed a theme of some colors that would look well together and still have a very professional, clinical feel yet still inviting and not too sterile. I also chose fonts with readability and timelessness. While I personally love bright neon colors and futuristic fonts, they aren't appropriate in a clinical setting.
Now you are safe to begin designing . . . and, if you're like me, having fun!
As you can see, there is a lot more that goes into website design than just jumping in head first. It involves creating a foundation first and then building upward. When you have 20+ web pages, you don't want to change your mind half way through on the design. Been there, done that.
Happy web designing!