You want to improve your design skills. I’m pretty sure you stumbled on this post because you searched for it! You likely wouldn’t be interested in a post which addresses design, if you aren’t into design yourself.
You had a problem, and I’m glad to address it. No design is perfect, but making your design easy to scale for your user or client is the major issue of concern for most designers.
Every one of us at some point or the other always have issues with perhaps too much color, small fonts, or irregular alignments; what’s more? You probably show a colleague and they totally condemn your stuff! I know that feeling.
Maybe it’s time we worked on those design skills together – What do you say?
My name is Ayomide Johnson, your friendly neighbourhood techie and I’m here to answer your questions once again.
So, it’s very easy to improve your design skills; well not perfectly, but with some very helpful tips that would greatly improve your design from now. And please do not contact me for a perfect design too. I am laughing out loud on that but I am serious. I am not perfect too, I condemn my designs much more than anyone else would, but I definitely believe it shapes my designs to look better eventually.
Learn to accept criticism even from yourself, but don’t go “Low Esteem” on you.
Designing a website is a very challenging position. I mean, you have to struggle to meet the expectations of many users. Different users with different wants and expectations and this can even lead to creating more complicated problems for your design eventually or stop new design ideas.
So how can you balance this?
It sometimes helps to often revisit a previously completed website design, and do some upgrade. It helps you take some steps back and think of new ways to redesign your website.
Visit other related websites to yours and gain inspiration from their designs. You don’t have to replicate. Create something unique from what they’ve got. A good example of a resourceful website you can gain inspiration from is CollectUI.
It is a great website which features amazing design efforts from several designers around the world.
You can get inspiration on almost any type of design you need. From landing page designs to contact forms, about pages, blog designs, app designs, product designs, and many more I can’t mention. C’mon it’s over a thousand categories.
Before getting all inspired anyways, you should likely take note of few basics which you are probably missing and is surely telling on the quality of your design. Little droplets make an ocean, the quality of the little components that make your design will tell on the overall appearance eventually.
Below are some handy tips and tricks to creating your next great website design.
It is a big deal for most designers to find a mature color combination for websites they are to work on. To achieve the great design, I depend on nature first. Everyone appreciates nature’s way of rendering things, and if you create your design following nature’s pattern; everyone will surely appreciate your design.
Learn to get inspired first by nature. Take pictures of natural wonders around you, or find quality landscape photos on the web. Websites like Pixabay.com and Pexels.com have a great collection of free stock photos you can download, all for free. Use color picker extensions or software to select the color codes from those photos and apply them to your design. Nature’s way of combining colors never fails.
Starting your design with shades of gray provides a valuable and reusable approach to design. To greatly improve your design, turn your design wireframes into visual grayscale, add grayscale photography as well. Get the framework set.
Then gracefully apply your color to each element and frame sequentially. Using this approach has helped me a lot. It easily helps you define where you are going, prevents color conflicts, overemphasized design and helps place importance and clarity on components that need them.
It’s 2018 and creating quick prototypes of websites, landing pages or components isn’t much of a big deal anymore. There are several tools out there which have made the job easier, so you shouldn’t bug yourself over an advanced knowledge of PhotoShop.
I would love to recommend a lot of tools, but I would recommend Figma.
Figma is an advanced and very easy to use prototyping tool. What’s more? It works even in the browser. All your designs are saved instantly on the cloud.
With Figma, it is easier to even collaborate, contribute to and share your project with your team. It’s a total cloud design system. Figma is cross-platform as well, so you don’t have to worry about compatibility issues. So whether you are into app, web or product design, I believe Figma is the right tool for you.
There are others too, you can make research on that, but I would recommend Figma since I use it and it sure serves my purpose.
It also very easy to create and send mockups or prototypes to clients who want to see how their end products or designs will look like before they go into an agreement or contract with you. Figma has helped in many ways like that. Figma is so portable, you can export your designs into different style languages.
Prototyping goes a long way in improving your design syntax.
Straight to the point, there is no reason you should use more than two fonts in your design. One for your headings and the other for your body.
Anything going beyond that can completely change the balance, tone, and alignment of your design. Most times it is crucial to use your own judgment, but you might need to really SLOW DOWN on font usage.
You might have seen this great new font and thought of implementing it into your design. But before you do that, sit back and think.
“Is adding this extra font going to improve the experience? Or I’m I just trying to get things overcomplicated”
There aren’t really any rules relating to font usage, but the best approach to design is keeping that third font you are considering somewhere in your pocket and stick to the two you’ve got.
I’m going to stress again happily that there are no specific rules that state you can’t use a million fonts in your design, But trust me there are many other factors to consider when using multiple fonts.
Visual Hierarchy: Your design contrast matters. Even in cases where you are using a single font, minor adjustments to properties like line height, spacing, paragraphs can change the balance of your design. Again, it is important you use your judgment.
Font Weight Relative to Page Size: Every font comes in weights. An average increase in font weight is about 40kb. Now say you have 3 fonts, each with their variants of bold and italic, headings, subheadings; we will be talking about nearly 300kb or more being added to your page size.
Now think of page size, it affects page load time as well. Technically, you have just created an awful experience for your users. Your website loads slower.
I can emphasize enough that font usage has great effects on your design. Want to know more about that? Visit quality websites, observe their design patterns.
I know you are almost gonna ask me why we have to remove such beautiful and visually appealing component of the design. Yes I know right. I love sliders too.
It is a great way to get lots of information to your users on just one part of the website. The issue with slider carousels is that many people won’t stay long enough to watch all your slides.
Attention span is really short nowadays. The slider instead distracts them from getting the relevant info about the website within the short time of their visit. You should focus on what visitors should take away from your website first.
Promote that one aspect and let go of the rest. It keeps your design simple enough.
Learn to reduce the options your visitors have whenever they visit. It helps guide them to the most relevant aspect. Don’t overwhelm your users with too many links to every page. Keep your navigation simple.
Avoid the use of too many dropdowns. Reduce links in your header and sidebar.
Whitespace is a big hack for improving your design! You don’t have to saturate every area of your screen.
Give your design breathing space, your users will be able to find things much easier.
Research shows that fewer sidebars on a website increase reader attention and as well lead them to the call of action much easier. As a designer, learn that removing sidebars increases attention spans and clicks on the call to action boxes.
Does your blog have a sidebar? You might want to find out how that has been affecting your conversions and sales.
Great design starts with planning. Learn to get your ideas drawn on paper and whiteboard first.
Using a whiteboard to layout your designs first can make the design interactive and collaborative as other team members can contribute to your project as well.
Have you ever tried backing away from your computer screen, then closing your eyelids a little bit? Everything becomes blurry but you still notice larger and colorful features more. This technique greatly helps a designer know what a first time user is likely to see first when he visits your website.
Based on your current design, do you think your visitor will notice the most important parts of your website?
As a designer, I’m sure you have some undisclosed hacks you use while designing to create amazing experiences. What are your favorites?
How much can you apply any of these to create amazing experiences?
Share your thoughts in the comment box below.