DEV Community

Cover image for 8 Fundamental Principles of Effective Web Design

8 Fundamental Principles of Effective Web Design

Imia Hazel on August 24, 2021

Web design is a significant component of the web design process. If you're fascinated by web design, we think you have such a creative streak. And...
Collapse
 
grahamthedev profile image
GrahamTheDev

Love everything except your alt descriptions, they need to describe what the content of the image is in context. Copying the heading text to the image just results in duplication for people who use a screen reader.

So you have two options:

  1. If you believe that the image adds nothing to the article, leave the alt attribute empty as this marks the image as "decorative".
  2. Describe the image as if you were explaining the article to someone over the phone, just enough idea to get an idea of the image without explaining minute details.

For example your first image:

"Accessible Entry" sign on graffiti covered wall.

Other than that (minor) point, it is a superb article, the "F" pattern is the one that most people forget so it was particularly great to see that getting attention!

❤🦄!

Collapse
 
imiahazel profile image
Imia Hazel • Edited

Thanks InHuOfficial,
ALT description is a great tip indeed.
I will refine myself to use it in more logical way.
Once again thanks and thumbs up.

Collapse
 
gmeben profile image
Grant Eben • Edited

Point #7 "F Pattern Design" applies to designs supporting any language that reads left-to-right, not just websites of "the Western world" which implies websites of "the Eastern world" are excluded.

I'm curious if the eye-tracking research you cited tested websites supporting right-to-left languages to reach the conclusions you mentioned.

I strongly agree with every other point.

Collapse
 
imiahazel profile image
Imia Hazel

Actually this point is about natural tendency of reader. Very next is,

A well-designed website will follow the reader's natural rhythm of page skimming.

I agree with you point and thanks for your interest and attention.

Collapse
 
gmeben profile image
Grant Eben

Yes, but your wording frames this natural tendency or rhythm as exclusive to or inherited from the Western world, and that's not true. There's designs from non-Western countries following "F Pattern Design" that predate the concept of "the West".

Thread Thread
 
imiahazel profile image
Imia Hazel

Thanks for your valuable comments.

Collapse
 
tmblog profile image
tmblog

Very nice and informative breath of fresh air incidentally, was looking for the bookmark button on this page whilst browsing from a mobile browser. OMG it took me ages to find it scrolled up and down literally 5-6 times until I accidentally noticed it on the sticky menu at the bottom of the screen. I wonder if the sticky mobile menu is a place to put all unnecessary things on? Any research on that I wonder, would be happy to hear your thoughts.

Collapse
 
imiahazel profile image
Imia Hazel

Thanks

Collapse
 
advillanuevag profile image
Alberto Villanueva

Thank you for such an interesting and enriching post. I am a beginner web developer taking my first steps in web design.

I´ll do my best to apply these fundamental web design principles in my journey to becoming a web developer.

Once again, thanks for your time and effort in sharing your knowledge.

Collapse
 
sidcraftscode profile image
sid

Great post!

Collapse
 
imiahazel profile image
Imia Hazel

Thanks for your appreciation.

Collapse
 
aaronmccollum profile image
Aaron McCollum • Edited

Thank you for writing! For fonts, is Google Fonts generally safe to use? If I link to fonts in my HTML document, will it show up no matter if the user has it installed or not?

Collapse
 
imiahazel profile image
Imia Hazel

Yes It will, as stated "Online-safe fonts address this issue and have become a de facto standard in web design."

Collapse
 
aaronmccollum profile image
Aaron McCollum

Thanks! Yeah google fonts have been my go-to recently.

Collapse
 
tsadarsh profile image
Adarsh TS

Loved your post and the resources. Thanks for sharing ❤️.

Collapse
 
imiahazel profile image
Imia Hazel

Thanks. I am happy it helped you.

Collapse
 
imiahazel profile image
Imia Hazel

I personally try to write a code for accessibility first approach.
Love to learn new things.
Thanks for your appreciation.

Collapse
 
jambofy profile image
Nyasha Shepard Ushewokunze

this article is englightening