I'm the guy who creates handcrafted digital things with my Tegra team
Share

Get better at Web Design in 8️⃣ simple steps


Ruslan Galba - February 16, 2020 - 0 comments

Get better at Web Design in 8️⃣ simple steps

Get better at Web Design in 8️⃣ simple steps 💪

Courtesy of @tomrossmedia

Want to create better websites?

I’ve put together the ultimate quick guide to how to beautify your website (and make it convert like a beast too!).

Oh, and I’m getting bored of seeing super dry copywriting everywhere so wrote in my natural speaking voice 🙈 (went extra sassy in this one)

Here’s the tips (but definitely swipe the album for full details and context:

◽ Less is more (start by removing all the obsolete shit)

◽ Higher = better (ensure important elements aren’t pushed way down your page)

◽ Font consistency (don’t use a billion fonts and font styles, it triggers anxiety)

◽ Alignment (get everything lined up pixel perfect and feel your website get more purdy)

◽ What’s the point (work our the main purpose of each page, it’ll help your design decisions)

◽ Key elements breathe, but not too much!

◽ Substance over style (don’t add flashy shit for the sake of it, focus on fundamentals)

◽ Get friends to test your site. Not only that, but sit back and don’t help them at all. Just watch what they naturally do. Promise it’s a game changer and will tell you a lot.

1. LESS IS MORE  We're not talking about pizza here people, this is web design! When I used to consult for clients, I would ALWAYS start by seeing what we could remove. Stripping out all the obsolete elements and details that add nothing is the quickest way to improve your site. The ultimate spring clean!

LESS IS MORE

We’re not talking about pizza here people, this is web design! When I used to consult for clients, I would ALWAYS start by seeing what we could remove. Stripping out all the obsolete elements and details that add nothing is the quickest way to improve your site. The ultimate spring clean!

HIGHER = BETTER 
It could be life advice from Seth Rogan, but it's equally true when it comes to your website. So many folk have bloated top sections to their site, meaning that key elements and calls-to-action are pushed way down. Bring those bad-boys up where they can find more eye-balls!

HIGHER = BETTER

It could be life advice from Seth Rogan, but it’s equally true when it comes to your website. So many folk have bloated top sections to their site, meaning that key elements and calls-to-action are pushed way down. Bring those bad-boys up where they can find more eye-balls!

FONT CONSISTENCY  Nothing makes a website look bad faster than inconsistent and endless font variants. Limit your website to 2 typefaces (3 max) and define clear formatting for headings, body text, links etc... Keep it beautifully consistent throughout your site and watch that ugly duckling turn into a swan!

FONT CONSISTENCY

Nothing makes a website look bad faster than inconsistent and endless font variants. Limit your website to 2 typefaces (3 max) and define clear formatting for headings, body text, links etc… Keep it beautifully consistent throughout your site and watch that ugly duckling turn into a swan!

ALIGNMENT ON POINT!  Another big no-no is inconsistent alignment. Ensure your elements line up beautifully using some kind of grid system. Keep those content edges pixel perfect and everything will just feel that much more 'together'. Ah h... isn't that better? :)

ALIGNMENT ON POINT!

Another big no-no is inconsistent alignment. Ensure your elements line up beautifully using some kind of grid system. Keep those content edges pixel perfect and everything will just feel that much more ‘together’. Ahh… isn’t that better? 🙂

WHAT'S THE POINT?  For each page of your website, ask yourself, 'what's the purpose of this page?'. Don't feel you need to add a ton of stuff 'just because'. Remember, less is more, so keep the content of each page mainly focused around the key objective for that page.

WHAT’S THE POINT?

For each page of your website, ask yourself, ‘what’s the purpose of this page?’. Don’t feel you need to add a ton of stuff ‘just because’. Remember, less is more, so keep the content of each page mainly focused around the key objective for that page.

ANDDDDD BREATHE!  Nothing triggers web induced anxiety like closely bunched page elements with virtually no padding. Equally, some folk apply so much padding you feel like you're drowning in space. Work to get that balance right and browsing your site will be a positive, flowing experience.

ANDDDDD BREATHE!

Nothing triggers web induced anxiety like closely bunched page elements with virtually no padding. Equally, some folk apply so much padding you feel like you’re drowning in space. Work to get that balance right and browsing your site will be a positive, flowing experience.

SUBSTANCE OVER STYLE  There's no point being the best dressed at the party if your chat sucks shit. Same thing for your website. Put that parralax Html 5 fancy effect back in the box and ensure that the fundamentals are all working as they should be.

SUBSTANCE OVER STYLE

There’s no point being the best dressed at the party if your chat sucks shit. Same thing for your website. Put that parralax Html 5 fancy effect back in the box and ensure that the fundamentals are all working as they should be.

HUMAN GUINEA PIGS  Testing is SO helpful. Ask friends to browse your website and don't explain it to them. Offer ZERO direction. Just quietly sit back and watch how they navigate it, and where their attention is led. Trust me, it's a game-changer and will give you a gold-mine of improvements to make.

HUMAN GUINEA PIGS

Testing is SO helpful. Ask friends to browse your website and don’t explain it to them. Offer ZERO direction. Just quietly sit back and watch how they navigate it, and where their attention is led. Trust me, it’s a game-changer and will give you a gold-mine of improvements to make.

Bonus — 8 useful tools for everyday usage:

FlyWheel —  is managed WordPress hosting built for designers and creative agencies.
Integromat —  is a powerful automation tool that connects your apps and services to work smarter, not harder.
Leadpages —  lets you build beautiful, high-converting websites, unlimited landing pages, pop-up forms you can add to your other websites.
FlowKit — allows designers to create frighteningly fast user flows within Sketch and Figma.
GetResponse — an email marketing platform that enables you to create a valuable marketing list of prospects, partners, and clients, so you can develop relationships with them and build a responsive and profitable customer base.
Manychat —  visual bot builder for Facebook Messenger with broadcasts, analytics, scheduled posting and many other features!
Crello — free graphic design editor that helps create images for social media, print, and other web-based graphics.
Funnelytics — the best funnel mapping software available to marketers and entrepreneurs today.

Be free to send me any feedback by reply or reach me in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Like the content? Take a second to support me on Patreon!

Related posts

Leave a Reply