50 MORE Web Design Mistakes (And Why)

Показать описание

The Website Architect

Рекомендации по теме

Комментарии

Your content is much better than typical boring tutorial based stuff from other channels, keep it up!

quantum_nebula_

Will you ever do mobile-focused design videos? You've spoken a lot about designing on desktop already, so I'm looking for new things to learn.

GrantGryczan

Here are the 50 web design mistakes summarized in points:

Layout and Design

Don't center align titles with left-aligned paragraph text
Use content containers or wrappers to ensure usability on wide monitors
Avoid adding line breaks to headings for aesthetic purposes
Don't hover scroll-to-top buttons over footer content
Avoid crazy letter spacing that makes text harder to read
Use sufficient text area space to encourage users to provide more information
Headings and Typography

Headings should not be the size of sentences
Avoid using stock photos
Use a consistent font size and style throughout the website
Don't use more than two to three bold colors on a website
Use italics for reviews, testimonials, or quotes
Navigation and Links

External links should open in a new tab
Set the HTML theme color to match the website's color scheme
Provide a way to get back to the parent page from sub-pages
Don't hide the sidebar on mobile devices
Use hover effects on buttons, even on mobile devices
Accessibility

Ensure sufficient color contrast between background and text
Provide captions for videos and images that require explanation
Make sure the logo is readable in different navigation styles
Use focus effects to help users understand what's been clicked
Content and Organization

Don't use too many button styles
Design for your target demographic
Provide a dedicated page for important information like contact or pricing
Use a clear and consistent URL hierarchy
Avoid using too many body paragraph styles
User Experience

Avoid horizontal scrolling
Provide a clear call-to-action on the 404 page
Use a search field or provide high-level links to help users find what they're looking for
Use an overlay instead of text shadow to make text readable
Use proper line breaks on paragraphs
Miscellaneous

Avoid using full background colors on titles
Use descriptive text on buttons instead of "Learn More"
Avoid top notification banners that cover navigation
Use sticky menus to improve navigation
Ensure text is at least 12 pixels in size for accessibility
Avoid using off-canvas menus for contact information
Don't use decorative borders around the viewport
Use breadcrumbs at the top of the page
Group related items together to improve scanning
Avoid using two call-to-actions side by side
Include products on the homepage of e-commerce websites
Include currency when mentioning pricing on the website
Avoid center aligning drop-down menus

Dhiiraj

Having just watched and commented on the previous 50 that really sparked my artistic soul, I have to say these new 50 feel much more user-focused and less restrictive on creativity. In my opinion, they are much closer to what I would consider "must-dos".

DNsyL

Great list, going back to review the first one.

BarbaraDay

While there are some good ideas in there, half of those are just opinions, and contradict each other (i.e. Show 3 testimonials so users have more info on screen, // Always use sticky nav (which reduce the screen real estate, and thus the amount of info you can display))
You’re obviously a bright individual. I wish you’d put in the effort to give nuanced explanations that people can actually learn from, instead of a list of rules (immutable laws, really, in the way you present them and how they're going to be perceived). This is treating the symptoms, not the disease.

bluetheredpanda

this is so helpful ! we want more ! thank you for sharing your knowledge

ysabellpp

Great list! I agree with every single item!

EdwardBlack

Another great video from The Website Architect. Awesome tips to make your website more user friendly.

ralgie

"whatever the hell this is." I nearly spit out my coffee. :)

LandyVlad_Rides

1:05
But: the more info you let people write, the more text you will have to spend time reading. And when someone has gone so far that he will write and send you a message that box size will not stop him.

jellycoding

Refreshingly useful content. I mean I knew all of these since I'm a god damn professional :) bit still, very useful.

TheMarouuu

I made 49 of 50 so either, 1. there's still hope for me or 2. I best take up golf.

memyselfandi

Can you do a video on css manipulation of text per item 26 please?

LandyVlad_Rides

Hey hello! How should I start web design? I’m really interested in creating designs in Canva, but I’m unsure if it’s as good as using something else to practice.

PyxlFie