Imagine scrolling through social media and doing your daily check-ins until an ad pops up. Normally, you would scroll right past the ad and continue on with your business, but this one is a bit different. It features an image of a microphone, which is exactly what you have been looking for. You give it some thought, but ultimately decide to click on the website to check out the microphone.

Unfortunately, as soon as you arrive to the website, you get thrown off by how horrible it presents itself. There’s text laid out all over the page, there’s no images, you can’t even find the logo of the company, there are ads popping up all over the screen, and worst of all, some of the text is cut off because you’re on your phone and the website wasn’t designed for mobile use. Before ten seconds pass, you close the website because you were more worried about what looked like a virus than purchasing the microphone you really wanted.

That was a pretty extreme scenario, but the point is that poorly designed websites can make a horrible impression on potential customers or subscribers. Are you looking to build a website, whether it be for a business or a blog? If so, continue reading to learn how to make your website look its best.

Make sure it works for mobile!

Blender’s website on an iPhone

Mobile devices are everywhere today, which means it is more important than ever to get your website as compatible with smartphone devices as possible. In fact, in 2018, 52.2% of all global web traffic that year came from mobile devices. This should encourage designers to make their designs as user-friendly as possible. Bigger buttons, less words, and important annoiuncements are all that’s needed on the front page of a mobile webpage. Blender‘s website works really well on mobile because right away we can see the latest release is out, we can download it, and we know it’s free forever.

Nintendo Life’s blog site on an iPhone

On the other hand, Nintendo Life‘s website is not as intuitive for mobile use. The most glaring issue is that the word “Features” on the top right corner is cut off by the edge of the phone screen. There are also too many words, the arrows to scroll through featured articles on the site are too small, and there is no need for a calendar in the middle of the page.

Let the design flow and enable exploration.

macOS Big Sur preview on Apple.com

There’s something to be said for clean, cohesive web designs. They naturally garner more attention and are more aesthetically pleasing to look at. Most websites follow the standard “E Format,” where three rows of information are on the site: the main menu, the submenu of the page you’re currently looking at, and the page itself. Apple does this really well, as they’ve even lowered the opacity on their second row to ease the reader from the top menu down to the main page.

One other note about Apple’s page is that they’re really good at keeping you on their site. If you go to look at any hardware or software product, Apple animates its page so cleanly that it does not fell like you’re even scrolling down and all the information is actually coming up to you. such as in this macOS Big Sur preview.

craigslist’s home page….

Whatever you do, however, do not build your website like craigslist. There is no sense of flow, no fancy colors, no difference in fonts, or anything that would constitute an effective website design. When I went onto craigslist for the first time, I thought I somehow clicked the wrong link. I was not expecting a website I’ve heard so much over the years look this embarrassing.

Use negative space effectively.

PlayStation’s homepage

Believe it or not, white space (or negative space) is just as, if not more, important as the positive space (areas filled in by words, objects, etc). Using negative space allows your website to have a more professional feeling, as anyone that arrives on the website will not feel cluttered or overwhelmed with the information presented to them. Take PlayStation’s website, for example. We immediately get a product shot of what the PS5 and its accessories look like, with no other distracting text or images taking our attention away from the upcoming product. The grey row below also has a lot of negative space, leading our eyes from “PlayStation 5 | Launches Holiday 2020” to the sharp blue button “Find Out More.” PlayStation’s use of negative space on their website is an effecitve example of visual heirarchy, which makes it easier for users to see and perceive the more important information first.

Homepage for Whatculture.com

A webpage that is really lacking in negative space and visual hierarchy is Whatculture.com. Four ads are present in this screenshot alone, with Call of Duty’s ad taking up so much of the screen that it can make users think that they’re actually on Call of Duty’s website instead of this blog page. It is not a smart idea to fill negative space with ads because it makes the website look more complicated than it has any right to look. The posts themselves get lost in the sea of ads and unnecessary words, thus making the website not appealing to look at.

Make it easy to understand.

Google Stadia’s homepage.

One thing to keep in mind as web designers is the word choice. If you add in complicated words, or just too many words in general, users may be too intimidated to continue browsing your website. Simple words make it clear to the customer what you’re trying to tell them, and combining that with a simple, colorful layout will make their experience richer. Despite the product having an unfavorable launch, Google Stadia’s website is very simple and easy to understand. The two-toned color scheme of black and red are easy on the eyes, and there are not any buttons that are unneeded. Right away, you can see what games are avaiable on the platform, how much the service costs, and a one-button link to sign up for the service.

Panasonic’s homepage

If you’re goal is to sell products, then fill your home screen with some of your best products rather than a list of blog posts. This is the mistake Panasonic has made with their website. The site lists a lot of articles that state their achievements and passions, which feels a bit cluttered, even on a desktop computer. It’s not difficult to find their products, but adding that extra step instead of displaying them right on the homepage may be enough to send some potential customers away from the site and onto a competitor’s.

These are just a few of many tips that can help you create an effective website. Remember to keep your website simple, clean, and mobile friendly. There are many things to take into consideration when creating your own website, so study some of the design techniques from some of the website’s I’ve provided and go make the best website you can possibly create.

About the Author Gabe Walerysiak

My name is Gabriel Walerysiak, and I am a graduate student at Quinnipiac University in Hamden, Connecticut. I graduated with my Bachelor's Degree in Film, Television and Media Arts, with a minor in Mathematics in June 2020. I am currently pursuing a Master of Sciene in Interactive Media and Communications and will graduate with my master's degree in May 2021. I recently interned at GlucoseZone this past summer, where I edited and helped film a bunch of promotional content for their social media pages. I have a hobby of capturing and editing video-game footage for a YouTube channel that I started in the Seventh grade, and that channel is the primary reason I chose to major in Film, TV, and Media Arts. I am also a passionate runner, and even though I am no longer on a team, I run to keep in shape because I know how important that is in today's world. I am looking forward to be more fluent with technologically enhanced creative programs such as the Adobe suite, productivity tools such as Microsoft Office, and any other creative tools I can get my hands on to further improve my work as a creator.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: