Web Design Basics: What Not to Do

Web design can be hard.  Whether you’re creating a site for a comic, a store, or just a portfolio of sorts, they all offer different sorts of challenges.  This is often the case regardless of how you make the site (in other words, whether you use a website builder or code it from scratch).  Choices of font, layout, and the likes all come into play throughout the process, and it is inevitably a trial that tests both a creator’s aesthetic abilities as well as their ability to write, organize, and beyond.

Now, I certainly wouldn’t consider myself an expert web-designer (if that wasn’t obvious).  There are a lot of things I don’t understand, such as common SEO practices, logo design, and graphic theming to name a few.  However, I have dabbled enough to feel confident in naming things you shouldn’t do.  As such, I would like to give you three tips today for what not to do when designing a website.

These tips are more for absolute beginners, so if you know a bit about web design this probably isn’t the article for you.  Without further ado, let’s begin.

 

  1. Don’t design the website wider than 1024px (if you’re not using responsive design)

When you begin to plan a website, the first thing you usually want to do is make a concept mock-up so you can understand the layout and where you’re going to place your various elements.  Unfortunately, this is the first step where many people mess up.  Rather than considering multiple screen sizes, the beginner will design based on what looks good on their screen.  The problem comes in when this theoretical web designer is using a screen that is something like 1920px by 1080px.  Depending on what it is and how it’s coded, the website may not be able to shrink/rearrange all elements to suit smaller screens (especially if the site is in a static, fixed position).  This is not to mention that sometimes the shrinking process makes it harder for users to see what each element is.  So, while that user may have a beautiful website utilizing all 1920px across, the website on my 1366px by 768px laptop may look like a garbled, convoluted mess.

As such, to overcome this problem, it is best to design your website no wider than the smallest standard screen size, which is 1024px by 768px.  This ensures that you won’t have extreme shrinking problems for people on smaller screens and can have the most users possible using your site.  This applies to mobile as well since viewing websites on mobile is becoming the new standard in a lot of ways.

This being said, this applies mostly for static sites that aren’t going to use responsive design (or are only going to make it partially responsive).  A lot of website builders do force responsive design, so for those not raw coding it is less an issue.  However, it is something to keep in mind when testing, because not all built in themes are able to shrink elements flawlessly (particularly large images).  If you are going to use responsive design, please still keep in mind screen sizes.  For instance, if you utilize Bootstrap, you can design three layouts: one for a screen that’s larger than 1366px, one for a screen that’s between 1366px and 800px, and one for a screen that’s less than 800.  There is a lot of benefit to using responsive design.  However, regardless, keeping in mind the various screen sizes people can be using is always a good practice.

 

  1. Don’t let aesthetics override functionality

Another common mistake beginners will make is to create a website that’s too fancy, for lack of a better word.  Graphics can vastly improve a website and make it more engaging for users.  After all, many studies show that people are more likely to respond to images.  Sadly, this often gets taken too far by those just learning that fact, and what the user gets is a confusing mess.

For instance, say you’re making a comic site.  You decide to make your banner extremely detailed and fancy.  Under that, you have equally detailed buttons that link people to various main pages.  Each of these buttons has a character that lights up when you hover over it.  The site is also divided into two columns.  The smaller column on the left is another side menu, which includes tons of resource links.  Each item has a really fancy favicon attached to it.  The larger page has a mix of comic pages, ads, and other fancy images to promote the creator’s Patreon, Kickstarter, etc..

Now if that sounds like it’d be really cool, let me assure you it is not.  While having graphics is great, you can have too much of a good thing.  In this case, having so many graphics confuses the user’s eye.  There is no particular graphic that draws the user’s attention, so the eyes wander until they get bored.  This is not to mention the graphics will override the text, so it may become really tedious to navigate.

In the end, beginners should remember one thing: it is better to have a functional site than a pretty but ultimately confusing site.  No matter how pretty your website is, users are going to be turned away if they can’t figure out how to navigate through it.  Regardless of how you want to pretty up your site, always prioritize the functionality.  The point of a website is to deliver content first and foremost, so the wrapping paper you put on it should be a secondary issue.

 

  1. Don’t go theme-less/don’t use too many acidic colors

Briefly, let’s discuss theme and colors.  As I mentioned, I am not particularly an expert on themes, so how to create a good theme is still something I’m trying to learn.  However, one thing I do know is that you always want to utilize a specific color scheme when designing a website.

A lot of beginners do not know how to utilize this properly.  In their efforts to make certain elements stand-out, they wind up creating a mishmash, acidic, rainbow palette that can burn the eyes.   Not only does this ruin your website’s potential aesthetic quality, it just makes it painful to look at.

Ultimately, before designing any website, you want to choose branding colors.  How many branding colors you use is up to you.  Some sites use as few as two, while others utilize five or six.  There are even websites that help you pick your branding colors, my personal favorite being Paletton.

Either way, choosing branding colors not only helps users readily identify your site as belonging to you or your brand, but it also gives your site visual consistency.  Rather than a mismatched palette, it creates a sense of theme for the site, which may or may not help you choose graphical design elements.  For the most part, though, it makes your website less eye-bleeding to look at, which will help keep users on the website.

In summary, do not use too many colors.  Instead, narrow yourself down to a specific set that will allow you to highlight elements while not being overwhelming.  This vastly improves the appearance and gives you a coherent look.

 

 

All in all, keeping these do not tips in mind should help you when starting out with your very first website.  Website builders definitely help combat some of these issues, but mistakes can still be made if the builder offers lots of customization options.  Everyone has to start somewhere, so my hope is I’ve given information that will help beginners create something a little more quality.  There’s always room for growth past this point, though, and there are plenty of articles out there to help you improve from there.  In the end, I wish everyone luck with their websites and hope the woes of website design don’t get you down.

ipad-605420_640

Image: Courtesy of FirmBee on Pixabay.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s