While studying at SCAD, I explored many versions of graphic design. Website design was one such category. I didn’t quite understand the complexities of it until I built webpages in DreamWeaver. The HTML and CSS got confusing, yet remained intriguing and enjoyable.
Then I developed my portfolio. And failed. My sudden discovery of WordPress and Wix made life wonderful. And even though a later class taught me all the fundamentals and special tricks I enjoy, I wouldn’t part with these powerhouses and their templates.
But that doesn’t mean you stop designing. Even with an array of options provided by backend code, there’s work to do. And a website can still be designed poorly. So, here’s some friendly tips for designing in cyberspace.
General Website Setup
If you’ve been around the block with WordPress and Wix, feel free to skip to the next header. This section is for all the people who, like me, never thought twice about menu bars and navigation.
Think of a filing cabinet. Inside the drawer is a set of folders. Inside those folders are pieces of paper. Websites are basically the same format. Your filing cabinet is your website, easily discovered by its URL (composed of a domain name). The folders are pages in your website and the papers are posts that get displayed on those pages. If you work in WordPress, there’s a feature called “categories” which also works as a folder for similar posts, but since there’s no discernable way to design those, we’re going to stick to pages and posts.
Pages traditionally have three parts: header, body, and footer. While your header and footer repeat throughout your website, the body changes depending on the page. Each page should have a cohesive design that communicates to users that the website is one entity.
Navigation bars, or menus, would be tabs on folders. Their quick ways to find the category of posts you want without going through the entire drawer. The two points of navigation are the header menu (very top) and footer menu (very bottom). The top menu has your primary pages while the footer is more extensive. Below is a gallery of website designs I created in class so you can get a general feel of the possibilities.
Road Map and Flow
Designing a website includes designing the flow from page to post and back. People want information quick, so reduce the amount of clicks necessary. The landing page of your site should have a sampling of almost everything. It’s the first thing users see when they hit enter, so give them a cursory view of your offerings. New releases, special deals, thoughts of the day. All depends on you.
As mentioned earlier, every site has two navigation bars. The top menu should be pages, quick links that lead to more precise content. For example, the menu on my site has a link to “Specualtive Realm” which is all short stories. This differs from “Musing Meadow” which is all mixed media projects. The bottom menu should be more detailed; I include the categories so users can jump to a specific grouping of their choice.
Buttons and links on pages and posts are highly recommended. This continues a user’s journey through your website. It’s a rabbit-hole effect; you’re reading one article, then get curious about a different one, and keep clicking until you don’t remember where you started. Frustrating, but that’s why the two menu bars come in handy because you can find your way back to wherever you want to be.
Consider the flow and accessibility of information to your end user. Walk through the process with someone else and see if it makes sense.
Colors and Fonts
Onto the good stuff. While there are many options to choose from, you have to consider readability. A cursive font may be fun and pale blue super cute, but will users be able to read your work? Print reads very differently than digital. Our eyes don’t respond as well to the digital space, meaning more effort is needed to keep things legible. High contrast colors and simple stroke fonts will be your best friend. Where print type can be 10-12 point size, 14 is a little better for screens.
When brainstorming the flow of your website, thumbnails are still valid for designing. The next step would be jumping into Adobe Illustrator, Canva, Figma, or some other design program where you can quickly test your thumbnails and play with colors and fonts. This process prevents shell shock when you take in the multitude of options and gives you a place to practice before spending a dime.
In the case of fonts, not every computer has the same font. Your squiggly cursive or beautiful sans serif could be defaulted to Calibri or something else when a different user opens it. To avoid this predicament, try using fonts on Google Fonts. Nearly everyone uses Google so these fonts are available to them 24/7, preventing funky designs on your output. If it’s purely for decorative purposes, then save a PNG of your logotype and upload to your site.
Images and Videos
Sizing is everything. Websites have to load a lot of data at once, so smaller file sizes are better. I don’t have a ton of imagery, but I keep everything in RGB so the colors don’t go wonky. JPGs are the obvious choice since it’s a default for all cameras and has smaller sizes. PNGs are good for logos that require a transparency, though I’ve run into situations where the software didn’t like them. When coding sites, I learned to use TIFs because they hold more data than JPGs, meaning cleaner image quality. They’re huge though. MP4s are good for videos. No matter what you use, everything should be sized for what it’s being used for.
People are drawn to images. I’m sure you’ve skimmed most of this post because there’s SO MANY WORDS (sorry, can’t help myself). When designing, consider an even balance between text and imagery. The ratio will vary depending on what your product is (clothing, portfolio, blog). If things get too heady, add image breaks to rest the eyes. If there’s bold imagery, add white space for breathing room. Website design is a balancing act, so play with thumbnails and tweak for readability.
Final Thoughts: Check Your Website Regularly
I’d rather not think about how many people came to my site when I was busy with schoolwork. After I graduated, I opened my beloved website and found errors. Missing images, wonky spacing, you name it. I screamed and raced to fix everything.
Companies like WordPress constantly update their interfaces and plugins. While beneficial to your site, it can change the general setup and cause certain elements you relied on to vanish. Sticking to simple blocks like text and images can mediate those issues, but I suggest regularly looking over your site and testing it. If you’re posting frequently, then you shouldn’t have issues.
Just don’t leave it alone for a year like I did. Learn from my mishaps.
