7 Sneaky Tricks Web Designers Use For Silently Improving Websites

  • Post comments:0 Comments


I’m going to show you seven silent UI hacks that web designers use to make more attractive looking web designs the first is an inspiration board it’s something you can create before designing a website where you take pictures of dozens or even hundreds of other sites after that I head to figma and paste them all kind of like one big brainstorm and this helps me create the design for the website I’m building because one quote that’s famous in the design world is that good designers copy and great designers steal and one thing you can be certain of is that you’ll never hear me saying I copied a website but I’ve definitely taken inspiration from quite a few another thing that designers might not mention is that every font is unique just like a snowflake I’m special rather than just going with the popular Roboto or intern fonts it’s important to pick a custom font for your web designer that suits the look and feel for a site because at the end of the day most people go onto a website to read text except for those people who mindlessly scroll through insta and this is why one of the very first steps before even doing a web design is creating a style guide with topography in mind and while your client might not understand it at all and you’ll have to explain it to them like they five deep down inside you know you’ve done a good job next is to understand what that font looks like on the website this means adjusting it for its paragraphs and headings never ever use the default line height provided by the browser or framework on Chrome the default line height is 1.2 but this isn’t an ideal option while some tools like Tailwind CSS provide a preset line height which is 1.5 every font Works a little bit different with its natural line height and what you should use I used to find this confusing kind of like finding matching socks but I’ve got a tip to make this work if you aren’t sure begin in the golden zone between 1.25 and 1.5 then just keep adjusting it until it feels right for headings font Keling is one of the best ways to ensure that your titles look powerful and condensed it’s adjusting the space between letters while most letters look once you increase their size the space between the letters also increases this often feels unnatural just like me if I’m wearing a t-shirt that’s too big so just like with line height you need to adjust the font Keling for each font differently it’s important to consider how much you want to adjust it depending on what font you’re using I usually go between -1 to -5% so that the letters are close but not touching next we have font pairings which can elevate your web design giving it a more Dynamic style a font pair is when you have two different fonts for the heading and the paragraph text the two fonts need to have a healthy relationship almost like they’re dating each other which means they should kind of look similar but different while this sounds like a contradiction when it’s done right it looks beautiful if you find it hard to find the right pair then try the website font pair. all right now let’s move on to Colors one tricky part of creating a web design is picking the right color to use some color pets are defined by the logo of a business and sometimes actually most times they’re terrible because good graphics design changes almost as fast as genz slang and what’s slays today might not in a decade which is often how long a business has been around for so it’s up to Graphics designers to pick a good combination of colors to use for a website but if you’re not a designer just yet let me show you some tricks that work one design hack I’ve learned over the years is to never go full saturation while it can look vibrant almost always it’ll cause eye strain for anyone looking at it for too long and it can take away focus of other elements on the page instead you’ll want to use a safe zone of colors if you’ve used a Color Picker before it’s this safe range just here this inner part has more shade tint and tone and it means that the color isn’t as harsh as some of the options around the corner and if you’re still having trouble I’ve always found the colors from Tailwind CSS a good resource to use so you have one color but that’s not enough a good design always has a few different colors a primary a secondary and a tertiary color it’s time to create some color Pairs and there’s a trick to it designers use color theory to pick things like analogous or complimentary colors and there’s a few handy tools that let you do this online my favorite is Adobe color but there’s also Ava design system as well as pelone and using resources like this also helps in other ways such as creating gradients or radial auroras which are all the hype these days if your website doesn’t have one of these floating Circle gradients in the background was it really designed in 2024 finally is micro animation it might not seem like much but there are subtle bits of Animation that a designer can add to a page that makes it feel more alive this can include things like having half a second of Animation when you load the page or or a small transition when you’re resizing the window or just a scrollin animation when you’re scrolling up and down while such movement is often made to be very subtle it creates the perception of a higher quality website and these days it’s easier than ever to add such features in

Web design has a number of hidden trips and tricks that help you build better looking websites. In this video I explore some of the unsaid ways that designer use to build better looking sites. These are things I’ve learned over the years, some might be general knowledge others not mentioned much, but they are small ways I make my UI / user interfaces just look a bit better.

1. Inspiration Board
2. Unique Font Family
3. Line Height
4. Font Kernelling
5. Picking Colors
6. Color Gradients and Combinations
7. Micro Animations

#ui #website #design

Check out my courses!
Teach Me Design: https://www.enhanceui.com/
OpenAI GPT: https://enhanceui.gumroad.com/

Join my Community!
Discord: https://adrian-twarog.hopp.to/wix-studio

Software & Discounts!
Admin Templates and UI Kits: https://bit.ly/themeselection15
Screen Recorder: https://screenstudio.lemonsqueezy.com?aff=po745
⛌ Wix Studio: https://wix.com/studio/?utm_campaign=pa_influencers_community_adrian^social&experiment_id=^yt

Leave a Reply