
15 UX Tools that make my work stand out.
A top designer like me relies on his tools to create true craftmanship in UX. Due to massive demand by the universal design community, I will let you in on my 15 top tools & tips.
I met Marion two weeks ago at a network party for the rich and famous, to which I was a star guest, together with Prince Reinier of Monaco. She told me she was an avid follower of my website. She had read all the articles and enjoyed the artwork, she said. That got me thinking. Doing a website is a lot like going to a network party.
Let’s assume for a moment you’re at such a party. You meet a guy, you engage in some small talk and then you ask him what he does for a living. He’s in the business of cloud hosting. The day after you go check his website and find a whole bunch of bloated words and meaningless pictures and get lost in an incoherent navigation. You don’t feel like going over all the pages to find out, so if you don’t get it in 5 seconds, you skip it. It’s not that important to know. The result is that this guy looses any spot he previously had in you mind. Unless he did a funny dance for you.
You know by dutifully reading my previous articles that I hate stating the obvious, but when people keep forgetting the obvious, it’s my duty as a designer to tell you to 1) know your damn audience and 2) understand that if you want it to be clear what you do, it must be clear in how you say or show it. People have no patience. If you know people visit your site and only do so because they expect to know what you do and who you are, than why do we spend so little time actually doing a good job with it? It isn’t exactly rocket science. All it needs is a little focus and attention and you’re fine. So, because I’m such a sport, I made a checklist, pimpstyle! It’s the most extensive checklist ever written with 25 fundamental laws I invented myself. So without further ado, let’s go party!
Disclaimer: This article is not aimed at webdesign professionals who think they know better than me. I honestly doubt if anyone does. It's aimed at a business owner who thinks he's brave enough to go about it by himself (or hire some douchebag to do it for him for minimum wage, which is always a very good idea 👍 )
5. Remain credible and original.
Make it credible while staying above the surface. Tell your story coming from yourself, not following the standard textbook copy of every other site in your line of business. For example, don’t tell your client you’re his number one partner in whatever it is you do. Everyone is! Don’t use fancy words you barely know how to use in a proper context like I do. Dive in deep enough telling how you can help your client without hitting him with superficial words. People grasp inauthenticity very fast.
Stay original. Don’t copy text from other sites, don’t let ChatGPT write your whole story. Before publishing, use a tool like Copyscape to ensure that it passes duplication standards. Posting duplicate content on your website will result in steep penalties from Google, including possible removal from search engine results.
Subsequently, make with some humour. I mean really, 9 out of 10 websites tell a similar story. When we meet people, we tend to tell the same stuff everyone does, because, well, it’s what everyone does. While I’m a big advocate for conventions in UX, I’m anti-conventional in things like copy and images. Look, I should be writing a fine article with fatherly advice but honestly, I couldn’t give a fuck whatever the fuck you do with this shit. It’s your life. Just leave me alone. Humour I say, just not as tasteless as mine.
Add testimonials or reviews. By featuring customer testimonials on your site, you demonstrate your company’s skills, products, and commitment to customers. If you already have a loyal customer base, reach out to a few and sollicit online reviews. If they’re willing to provide a recorded testimonial, take advantage of this opportunity to create a branded video.
Now, if you’re serious about your business, you would be well advised to hire a copywriter or content strategist that takes care of the above, just as you would hire a designer to take care of all that’s about to follow. It also makes sense to do this exercise in parrallel with a preliminary design phase, meaning you would structure and write out your text in relation to how it would be visually displayed on your site, using a wireframe to position your text.
8. Make it visually simple.
9. Respect conventions.
Conventions in webdesign are established design norms that users have become accustomed to. Conventionsare cool: it’s cool when a user doesn’t have to think too much to find something. Really, when everybody else does something, you should do too. Except when everybody raps in German.
Conventions in webdesign include logo placement, which is always in the top left-hand corner of the page. Research by the Nielsen Norman Group found that getting back to the homepage is around six times harder when the logo is in the centre of the page rather than in the top left.
Your navigation sits at the top of your page as a horizontal bar and is always sticky. You could do a sidebar navigation but it’s not conventional and users associate this more with functional web applications than websites. If you have a secondary navigation or submenu it usually resides right underneath your primary one or on the left side of your page. But again, less conventional for websites. When it’s an e-commerce site, that left-side place is more reserved for filters.
Buttons are visually noticeable and have higher contrast so users find them easier. They also have different interaction states (like hover or pressed) to disclose to users that it’s an interactive element that’s clickable.
It’s clear when something is a link and you can click on it, by either giving it a different colour (usually your brand’s primary colour) or underlining it. Underlining text that isn’t a link just confuses people. While underlining is a strong convention (in fact it was one of the very first with the advent of HTML and CSS), it isn’t a requirement anymore since users understand that a coloured text is a link.
You can go wild with using fancy icons but don’t mess with icons that depict a standard action like ‘edit’ (a pencil-icon), delete (a ‘trashcan’-icon) or close (an ‘x-mark’-icon). These icons play into what is known as affordance in UX and are too conventional to be replaced by something else. If your action requires an icon that’s not conventional, accompany it with a label or at least with a hover tooltip (which is advisable in any situation).
Similar to the above, labels to categorize items or convey actions on buttons should be conventional. A lot of sites try to be original by giving the navigation bar options original sounding names but people just don’t understand your sense of originality.
Respect the meaning of colours. But more on that in a bit.
Colours are immensely crucial to your website’s design. They not only make your site attractive but help us to process and store images more efficiently. It can help increase brand recognition and prompt visitors to take action. Studies suggest that people make a subconscious judgment about a product within 90 seconds of initial viewing. Up to 90% of that assessment is based on colour alone.
13. Worship white.
It amazes me how many times developers are afraid of a thing called margin or padding. Those are things in coding conceived to make a UI breathe. So why would we choke our designs like that?! Whitespace is the art of pulling things apart just enough to balance the design and give it breathing room. Now, whitespace doesn’t necessarily mean white, it could be any colour.
Consider using white as your background colour. It works best for readability and you can apply any matching colour palette with respect to contrast. A background is what it says it is, and should not distract the user’s attention too much from it. White doesn’t. So, a big advocate for white, but obviously black lives matter too!
Authenticity wins every time. It means you should not only have genuine copy but should also invest time or resources in authentic imagery. It can be something simple as a photo of you and your team during a teambuilding.
Don’t you ever dare use stock images! Not only do they seem horrendously familiar to any web surfer between Greenland and South Africa, they cost you and if they don’t cost you, it means you either found a free stock image even more websites use than the paid stock image used by 5 billion websites, or the stock image provider like Shutterstock or Getty Images has found you using one of their images without paying. And then you’ll pay some! Try making your own pictures or hire your 17-year old nephew who thinks he can handle a camera. Or just use stock photos if that doesn’t work.
17. Build a styleguide.
If you respect your business, you respect your branding and expect it to be consistent wherever it’s used. To be sure anyone respects it, you’ll have a styleguide where everything from logo usage to font, colour and effect styles are documented with accompanying values. It guarantees that anyone working with or for your business will maintain the same values and find out how things are to be set up, in what is commonly referred to as your single source of truth. If your designs are made up with a tool like Figma or Adobe Illustrator, every file will link back to your styleguide. Updating that styleguide once will then publish the changes to all linked files, making sure all vales remain the same.
A note on this chapter however. It’s not because it’s placed last in line on the part of design, that it means you should leave it to the very last. To the contrary, it should be something you start with. However, a lot of times your business doesn’t already have one, especially when you business is a smaller one. So styleguides often get made in parrallel with running business, pragmatically as you go along. If you have a logo but it needs updating, you do that updating in your styleguide. When along the way you notice you need some sort of notifications for your website, you add it to your styleguide.
Your website is performant. Pages load fast and images are optimized. And so much more you can find here, on a website with a name that says it all.
A top designer like me relies on his tools to create true craftmanship in UX. Due to massive demand by the universal design community, I will let you in on my 15 top tools & tips.
How is it possible that for an interaction billions of people engage in daily, there are only a few modes of communicating? Why can’t the honk be designed to communicate different messages? Read the story of Angry Adam.
HR is all about human interactions. This process can be made much more effective with the right kind of intelligence applied. How did I go about it and what can you learn from me?