There are lots of things to consider when it comes to designing your website.
Whether you’re creating your very first site, or you’re reimagining a site that you’ve been maintaining for years, it’s important to know what you can and should control about your online presence.
Some people will tell you that there are standard rules for web design. It’s true that there are “best practices.” These are things that honor the capabilities and limitations of web technology. Some best practices include placing your most important content at the top of the home page so people don’t have to scroll to see it. Or making your site responsive so that it resizes for tablet and mobile browsers. Or making links a different color or style so that people know what’s clickable and what’s not. These are all good practices to follow, and most designers will guide you through these basics.
When it comes to the actual design—the way your site looks and feels—there are no hard and fast rules. Don’t listen to people who say things like you should never use more than two fonts on a website or sidebars always look better on the right the side of the page. These things come down to personal taste. Don’t confuse trends with rules. It’s your site, and you should do what you want with it.
That said, there are some things that will never hurt a website. Here are a few qualities that define really beautiful websites for me. Not all sites have all of these qualities, but if you can achieve at least half of them, you’re doing pretty well!
Clear hierarchy and well organized
Make sure your content is easy to find. Details about your background and philosophy should live in the About section, and all of your products should be easily browsable in your Shop section. This seems obvious, but disorganized sites are surprisingly common. Keep your top level navigation clean and simple so that people aren’t overwhelmed with options. Within each page, provide clear headings and subheadings so you can scan the page easily to find what you’re looking for. Use imagery, color blocks and icons to draw attention to key information. Blogcademy is a great example of a well organized and accessible site.
Design by We Are Branch.
Easy to read
This is a simple one, but again, font size and weight are not always well considered. Make sure any text longer than a few lines is big enough to read comfortably. Pick a font that is meant to be read in large chunks versus something that’s overly decorative and quirky. Give plenty of breathing room above and below each line, and around each block of text. Oh, and the text probably shouldn’t be yellow. The Great Discontent is a gorgeous site that’s also wonderfully easy to read.
Design by Ryan Essmaker.
Refined typography
I love when type on the web feels sophisticated without being overly fussy. This is a hard thing to pull off since there are so many variables at play in every website. Melissa Ambrosini’s site is a great example of how careful use of multiple fonts and pull quote styles can really elevate a page.
Design by Sian Richardson.
Flows seamlessly between browser states
Every website should reconfigure nicely to fit smaller browsers, but some designs do this better than others. Grids are nice because a row of three boxes can easily become a row of two on a tablet, and then a single column on mobile devices. Fluidity is a beautiful thing. I love the fluid grid layout of Jess Lively’s site.
Strong imagery
Sometimes a strong image and a little bit of type is all you need on a page. It can be a nice reprieve from a typical text heavy page. Squarespace is probably my favorite example of this approach. Even if you don’t have a budget for photography or illustration, big swatches of pattern, color and texture can achieve similarly impactful results.
Organic elements
I’ve always loved handwriting, touches of illustration and texture on the web. These are little reminders that the world around us isn’t as flat and as hard-lined as the screens we stare at all day. Organic elements are especially tasty when they’re used sparingly and in combination with clean lines, like on Garance Doré.
Design by Colorz.
Room to breathe
Don’t you just love a single column layout these days? Sidebars have their place, and sometimes a busy page can be beautiful, but some content just needs extra room. Don’t be afraid to take advantage of the vertical space on the web. Try making your navigation bar static so that people can always get to where they need to go without extra buttons and callouts. I love Blogcademy again because everything has lots of room to breathe.
Design by We Are Branch.
Something unexpected
This can take many forms, and it can be simple. Maybe it’s a cute rollover state like the buttons on the Rewined site. Or an interesting overlapping of textures, or a header that’s rotated 90 degrees. Have a little fun with the details.
Design by Stitch Design Co.
It looks like you, not like anyone else
This is probably the single most important thing to consider. Danielle and Marie have lovely sites that are perfect for them, but please don’t try to replicate their look. Make design choices that amplify YOUR content and YOUR personality. I love how the giant typography and the fierce imagery of The Middle Finger Project are as bold and as brash as Ash’s words.
Design by PolishLab.
Whatever your design style might be, remember to trust your gut instinct. Make something you love and don’t worry about how it stacks up to other websites. There’s always room for new ideas.
Happy designing!
xo
Rebecca
