Six Deadly Sins to Avoid as a Beginner Designer
Beginner web designers and developers often end up with flawed creations but aren’t sure where the real fault lies. Take a look at these six design flaws and see if you might be able to improve your web design skills.
Join the DZone community and get the full member experience.Join For Free
Beginner web designers and developers often end up with flawed creations but aren’t sure where the real fault lies. There are so many design books out there for guidance, but even after reading them, the final designs just don’t make any sense. It can be really challenging to create a seamless design in the first prototype—in fact, getting just a single section right is tough.
Sometimes the design is so bad that it is completely beyond saving. There can be so much wrong with it that few tweaks won’t do the job. But, how do you know what to fix when you don't really know what’s wrong with your design? Here are six pitfalls that beginner designers often fall victim of. Find out how avoiding these mistakes and replacing them with better fixes can magically improve your designs.
Wrong Color Contrasting
When a user visits a website, the first thing he’ll do is scan the website to get a gist of it and see whether the site will solve his problem. If a user is unable to instantly find the right button, option, or other form of navigation, chances are he will not hunt for it and end up leaving the page. Often this is due to inappropriate contrasting of colors, causing your users to visually miss out on what's important.
Color contrast choice is definitely an important decision to make when you are trying to guide the user from one page to another or perhaps to provoke an action (Call to Action). Ensure that buttons like CTAs stand out from the rest of the website. If they do so, the user will be able to locate them quickly, improving conversion rate. For color design guidelines, take a look at this detailed work from Google. It will help you in theory as well as provide tools to get to work with greater ease.
Ignoring the Icons
Users can read texts, right? Then why do some people use icons instead of text? Isn’t it easier to just provide text? True, it may be easier, but is it attractive? Generally speaking, no. Text-only interfaces are typically not aesthetically pleasant and instead are boring to the user... which is why utilizing icons is necessary. Not all designers understand this and so ignore the importance of icons for grabbing users' attention.
If you write in plain text and expect the user to stick around and read every heading, you'll likely be disappointed. But, if you add an icon, users can instantly tell what's going on and your page doesn't become some blurred wall of text. So, remember to help the user out by adding little icons next to the options in the navigation and elsewhere. Need some examples? Awwwards collected some awesome examples of websites with remarkable uses of icons, check them out.
Way Too Much Content
There are two main ways to explain any concept: Either use lots of words with examples and stories to lighten up the mood or just get to the point. A first time user will likely be less interested in reading an abundance of content and probably just want to be delivered information as quickly as possible. This is because at first visit, they'll probably scan first and then decide whether they should go any further. How can you expect them to consume a lot of content with that behavior?
To make things better and easier for them, your headers (especially on the first page) should be 3-7 words, and if they exceed, they should be really enticing and inviting for the user. The explanation underneath the header may include one to two lines with a “Read More” button if you have more to share. But, let the user decide if he wants to read the rest of it. Check out how Lumosity has incorporated this perfectly.
Consistency is a crucial element to a great website design. A lot of designers ignore uniformity when laying out content and forget the importance of a consistent design.
Keeping a similar format for related pieces of information in close proximity is important, and consistent colors/patterns/etc. help the user in creating those connections that get lost when there is no coherent design. Keeping these elements consistent is the key. Every time there are instructions, any CTAs, buttons to next page, or any other content that plays a similar role, they should all stay consistent throughout the entire website design, with the same font and same size, regardless of their location on the website.
No Color Balance
Balancing of colors is another important matter that is often discarded. Careful color management can provide clarity and order for a website. If there are too many similar colors, differentiation becomes impossible, but on the other hand, intense clashing of colors can be chaotic and simply unattractive.
To ensure better readability and overall usability, colors should never be out of place. They need to create the right harmony amongst themselves so that one part of the website doesn’t stand out and look ugly. Be it web design or classic art design, striking the right balance among colors can be really impactful for an overall outlook. For starters, you can try this super-fast color generator: Coolor.
Paying Zero Attention to Alignment
If you want the reader to read most of the information on your page, then perhaps you need to make that information look useful and digestible. Alignment plays a huge part in this matter. Determining where a user’s view should begin is what alignment is all about. It should be comforting for the eyes of the user.
Content on the website is either center-aligned or left-aligned. If you put it right in the center, leaving a lot of negative space on the left and the right, the user will have a hard time in digesting the content. The sole purpose of making it easier for the user's eyes is gone. Also, the visual content, if any, will also seem unrelated if placed on the far side of a center-aligned text. Most good websites have their text left-aligned as it mimics how we've learned to read printed text. Everything on the website needs to be aligned and grids can help you achieve just that. Read this detailed post by Tuts+ on alignment and grids to find out more.
If you are a beginner designer and you are guilty of these missteps, then take another look at your designs and see if these fixes can help you out. The designs that once seemed irreparable will suddenly begin to make a lot of sense. Don't forget that professional designers were once beginners too, they got better because they actively tried to understood the little things like this, and so revisited these many components that they ignored earlier. So take your mistakes into account and make fixes right away to create websites that are pretty as well as user-friendly—because the only way to improve is to be critical of what you're doing.
Opinions expressed by DZone contributors are their own.