Seeking suggestions for leveling up web design skills

#help #design #web

Hello DEV community,

I am seeking to level up my abilities as a designer to be able to boost my confidence building visually pleasing (Sorry I know this is vague) websites & UI.

I believe I exercise a good amount of HTML & CSS as I can take a design given to me and create it in code. I'd like to be able to start designing web UIs that I can myself translate into code. I was wondering if there are courses, resources, tips on how I can get better..

Thanks a ton!

Top comments (10)

Vuild • Apr 29 '19 • Edited

The best tip I can give you is work on live sites that have traffic & you can change.

If you can see 50,000 people a day, you can make small changes that will improve conversion - you will learn much faster. A large % design tips published are made up & inaccurate.

Knowing what makes a website time on site 5.16min, not 1min 22 is the better level of web design.

A lot of visually pleasing design is why websites fail. Busy websites have very similar UIs & design decisions. This site we are on is a good example of good design as it fits purpose really well (it's early growth phase, content expansion, user adoption).

Over-visual web design is mostly (good creative agency tool) a huge mistake & there are graveyards full of fancy sites. The website is the frame for the content. Aim to lift the content & lower the boilerplate.

alexa.com/topsites top 500, white bg, dark txt, simple, low animation, high performance, big earning, value adding, profit center, high time on site (or fast execution), growing. Exception: Adult sites tend to be dark with light text. Bad UI costs actual money/jobs in cases. If you want a big or decent site, start with those principle.

More technical stuff:
developer.apple.com/design/human-i...
design.google

To design beautiful visual stuff:

Use math/geometry for positioning (and sometimes other things).
Lots of white space. More padding than you are comfortable with on everything. Possibly more.
Take time to pick nice color combos (trial and error is fine to begin). Use tools if you need (wheel/pickers).
Use great pictures. Great photos are generally someone else's art/skills condensed for you. This is the main hack for many(other people's stuff: logos/art/quotes/videos/stock etc).
Smaller text is easier to look good but less usable.
Focus on mobile mostly (it's near 90%).
Don't read opinions (that don't have competent provable backing).
Break it down & focus on the thing you want to make nice (whitespace, typography).
Understand basic usability (eye tracking, interaction, who presses what & when & why).
Ignore people who declare it magic/special/born talent. It's all practice & rework.
Many design decisions are made before people see your stuff (that upline part often helps define you). For example, who or where you are mentioned. It's not a vacuum.
Act designer-y (this has the best results from this list possibly).
These rules can be broken with justification.

Make something.
Get some traffic.
Make it better & try to make it better looking (designers mostly just push things around until they know what works). Time on site, interactions,
Repeat.

If you reach a high time on site average (with decent traffic) you will have something that flies on it's own (in most cases). It is surprisingly hard to get those numbers up (at growth) but it teaches you the most.

I hope some of this is useful.

Edwin Mak • Apr 29 '19

Wow thats an incredible amount of useful information! Thank you Vuild for your response. I feel like I've been tied up on the "visually pleasing" part a little too much and would likely have gone down to overdoing it at the expense of usability.

I think with this information, I feel more confident publishing something. I often get too hung up on what it looks like or the lack of fancy elements.

Vuild • Apr 30 '19 • Edited

You are welcome. I hope it is useful. Do it this way:

Produce interesting content first.
Write nice HTML (accessible/document structure/headers etc).
Write simple, vanilla looking CSS & make everything simple/nice/basic. Try to leave as much default as possible. Think mobile.
Get some traffic to it.
Change the colors (links/section bgs etc) substantially & see if it has any impact. Most things don't. Measure your conversion goal or time on site. Do things to push this up (usually that is more interesting content, not pretty design).
Avoid feature bloat & familiarity bias (being used to a UI makes it feel simpler).

80% of traffic usually goes to a small number of areas but most people put their energy into the homepage. FB/twit/Goog/Medium/yt do not give the highest priority to the home, they put the focus on the detail & listing pages (content). When you spend a month making a stunning homepage but your blog post gets hot on HN & your page view ave is 1.1ppv, nobody sees the home anyway.

People mostly click links in content, not boilerplate. They look at a handful of pages. You need a website with 1M pages. The visual arts should be the content mostly.

Common sense is the best way to look at things. How I explain it (and why most expert UI info is not true):

Do you know what the frame of the Mona Lisa looks like?
Imagine it had flashing lights & moving things on it.

Sometimes it is appropriate (animation sites, design agencies, movies, production) but a lot is people justifying their jobs/ideas/bias.

I put my site live, some of the best (really) in various disciplines have seen it & haven't finished the homepage (look at it). Doing it live forces you to accept/get on with things.

Niels Bom • Apr 30 '19

But how about local maximums? If your only tactic is A/B testing you’ll only optimize to a certain extent.

Vuild • Apr 30 '19

It's not my only tactic, it's to answer the question. We can discuss more advanced UI no prob, but I am addressing general ways to remove creative block/visual distraction from the workflow & to order the design process while addressing imposter syndrome specifically. I'll bet it all looks better than imagined.

It's more a 'get stuff done' than drilldown on UI/UX/ROI/conversion type info.

Start a UI thread & we can get into UI details that would help everyone. :)