10e20: 7 Essential Web Design Principles to Earn Trust. And 4 Things to Avoid!
Michael D
· 1 year ago
This is even better than yesterdays post. Not only are the tips great but the combination of graphics to space the piece out looks terrific.
Nice model for a well designed post.
sir jorge
· 1 year ago
this is web design 101
John Amore
· 1 year ago
Patrick,
What a WONDERFUL post! You illustrated these concepts so beautifully and concisely (something that is not easy at all).
Have a great weekend!
Tristan Zee
· 1 year ago
found your blog from stumble. really cool post and i love the part about 'avoiding gibberish'. it seems like sometimes people think that quantity is more important than quality.
you got a new subscriber here!
Jake Matthews
· 1 year ago
This is a great post Patrick! You are correct to point out that layout, navigation and copywriting are the HUGE factors in building trust + good bios with photos is always a great way to go too. Well done.
Jake Matthews
· 1 year ago
@ sir jorge - I'm always amazed by how many organizations actually do not follow through with the basic principles.
Patrick Winfield
· 1 year ago
@Michael D- thank you, that is great to hear you are enjoying these posts!
@John Amore- I set out to do a simple post then several hours later finished with this, thank you for reading and commenting! You have a great weekend also ;)
@Tristan- Yes, the gibberish factor is so critical to me. so happy you are a subscriber, thank you!
@Jake- thanks for reading!
John Tompkins
· 1 year ago
Blinking text is the devil!
Great post dude :)
Ben
· 1 year ago
I really like your headers, but noticed they are images - I assume you've made a conscious decision to sacrifice the seo benefits of text for an improved design. Is that right? Also, do you find the extra time to create the graphics pays off?
NewSkill21
· 1 year ago
Awesome post. Just disagree with 2 things.
1. For an e-commerce store online I do not think it is necessary or even recommended to put a picture and a description about you in the "about us" page. I think this will ruin the image of your website as being a small operation, and may not be up to par with other websites.
2. If you are an e-commerce site it is essential, and I mean essential to have a web-security seal or a HackerSafe logo. I beleive somewhere about 60% of online shoppers will not shop and an e-commerce site without feeling secure about the site. It should also be placed somewhere on the site where it can be seen at all times, making the customer feel more secure about the shopping experience.
Here is an example. It basically has everything you discussed, but I want to emphasize the Verification seal.
But really awesome post! I also submitted it to Digg for you!
John Rocheleau - Artist
· 1 year ago
Hi,
This is a great article, and your site is a fine example -- except for the following perhaps:
In the opening you said, "Typos and grammatical errors express a disregard for the user"
But then in #3 point you write, "User can not touch and feel your product like the may be able to in a store"
Well, I suppose this shows that it is easy for anyone to make these errors, but oh so important not to -- especially in an article like this.
Sorry, I couldn't resist pointing that out :-) Thanks for the article. It will help me with a site I am about to develop.
John
Patrick Winfield
· 1 year ago
@ John- Thanks, and I agree!
@ Ben- With the header graphics I am just repeating what is already in the text title. I strongly feel that the graphics make a big difference, the content must still be the king though.
Patrick Winfield
· 1 year ago
@ NewSkill21- If your company is small and you want to give the feeling of being a larger company than you would be correct. I was eluding to the idea of transparency. I %100 agree with the Hacker Safe logos and SSL certs on all shopping sites. Thanks for reading!
@ John- You got me ;) I should have seen that one, wow! I did set out to write a short post and it did turn into a larger one so this slipped- thanks for pointing it out! Good luck with your new site.
Joy
· 1 year ago
Great!..very helpful especially for newbies like me..^^..Thanks for being so generous!..^^
Patrick Winfield
· 1 year ago
@ Joy- Thank you for stopping by and reading, I hope you continue to visit!
NewSkill21
· 1 year ago
Patrick, I am awaiting a new article already! :)
fedmich
· 1 year ago
Great post :)
Patrick Winfield
· 1 year ago
Thanks everyone! New post coming up Friday, I hope you can stop by and read it. Have a great rest of the week.
Michael Clark
· 1 year ago
Nice article. Check for misspellings. Section 2: "While your at it, keep it up to date." Your should be "you're," a contraction of you are.
Patrick Winfield
· 1 year ago
Thanks Michael, you are correct. I appreciate it, have a great day!
Alex
· 1 year ago
First off, this was a good, thoughtful post that I think provides solid guidelines for anyone doing web development. That being said, as John wrote, if you're going to recommend proper spelling and grammar, you better triple-check your own writing. Sorry for the nitpicking.
- "While your at it..." should be "you're". - "...you will surely loose them in seconds" should be "lose". - "...guide the viewer or users eye around" should be "guide the viewer's or user's eyes around".
Patrick Winfield
· 1 year ago
Thank you Alex I made the revisions. I appreciate the commenting and I will surely triple-check my writing next time ;)
Mitch
· 1 year ago
"...effects the image..." should be "...affects the image...".
AJ
· 1 year ago
Very good tips. Simple but a lot of common sense
Shreemani
· 1 year ago
Thanks Patrick, each one of the 7 points are good. Images between the points does enhance your article. I appreciate you sharing these to us. Have a great day.
Another grammar correction: Put that apostrophe away! (In the image header for "Welcome Pages/Pop Up's")
Why do "pop ups" get the possesive apostrophe, but not "welcome pages", eh? Other than it being incorrect?
Also, as a graphic designer and a writer, those headers shouldn't be inter-capitalized like that. For the most posh polishing, grammer rules hold for headers in all layout domains, be it for print or web.
All caps for headers with an appropriate headline font are acceptable for style as are other stylistic methods such as all lowercase, but if you're going to point out the importance of text in earning trust you might as well go all the way. Un-needed inter-capitalization is just one of the things that'll drive someone like me crazy.
Liad
· 1 year ago
I would like to add avoid linking services and web directory submittal sites.I have just found out that my webmaster is considered bad neighborhood and is bring my pagerank down cause he has his link on all my pages.
Sidereal
· 1 year ago
"Welcome Pages/Pop Up’s" should be "Welcome Pages/Pop Ups", unless the Pop Up is possessing something :)
nwjerseyliz
· 1 year ago
Very valuable and frank. Thanks for the post!
Ben
· 1 year ago
Another mistake. In the third paragraph, "Typos and grammatical errors express a disregard for the user and effects the image...". `effects' ought to be `affects'. It was unfortunate to make a slip right there, or was it humour and I'm just slow today?
David Milor
· 1 year ago
If you have content that starts automatically this can deter someone to leave
Erm - persuade them to leave perhaps? Is this another example of gibberish? ;)
RafaQuiM
· 1 year ago
Great post.
Although in general your references are good, the one related to color usage is really horrible.
Spoting that out I sould sugguest you to add one more tip to be avoided, a fith one:
Avoid! Having Low Quality External Links
Thanks for this post anyway
Patrick Winfield
· 1 year ago
Thank you everyone for commenting and sharing your thoughts and ideas. I appreciate all of your responses. ;)
Jan
· 1 year ago
I think you should also avoid the use of the unnecessary apostrophe in "Avoid Welcome Pages/Pop Up’s" :-)
Alan
· 1 year ago
I read somewhere that it's also a good idea to follow the format of a newspaper layout. It makes it more familiar to read, but is this true of all webpages, design systems?
Kane
· 1 year ago
Excellent ides thanks everyone for sharing this nice info with us :)
Malcolm
· 11 months ago
Nice post Patrick "High Quality Photography" is not only necessary "When you are selling and need to showcase products". I think you need to use quality photographs with correct meaning matching to your website all the times because it enhances the beauty of the website and at the same time expresses perfectly your offerings.
Austin Web Design
· 8 months ago
Great points! These must be taken into account in every step of the process to be a top tier provider. I especially agree with "If a user is taken mysteriously to another page, that looks foreign from the original, this trust is broken and they will question the experience." I find myself doing this all the time. If the page I'm taken to looks sketchy I'm closing the window quick like.
Patrick
· 8 months ago
Thanks Austin web design! It is always a bad experience, I agree!
RohitK
· 8 months ago
Hi, Strongly agree with u. I want to say that In this web 2.0 design is essential. Traffic will be good if ur design,Font,navigation etc is extra ordinary. I think template selling business is going to rock now..
RohitK
· 8 months ago
Hi, Strongly agree with u. I want to say that In this web 2.0 design is essential. Traffic will be good if ur design,Font,navigation etc are extra ordinary. I think template selling business is going to rock now..
Mike
· 7 months ago
Quote: The look and design is clean and very nice aside from the legibility issue, but it is also done in Flash so it can’t be enlarged within the browser.
I have to disagree with you on that. Browsers support the zoom in function that comes with the flash player component. Also, Firefox supports additional zoom by using the special keys Ctrl and + or Ctrl + mouse scroll.
But I can totally see your point, fonts should be a little bigger than that. After all we write content for our readers and we want them to have a good time on our site.
Nice model for a well designed post.
What a WONDERFUL post! You illustrated these concepts so beautifully and concisely (something that is not easy at all).
Have a great weekend!
you got a new subscriber here!
@John Amore- I set out to do a simple post then several hours later finished with this, thank you for reading and commenting! You have a great weekend also ;)
@Tristan- Yes, the gibberish factor is so critical to me. so happy you are a subscriber, thank you!
@Jake- thanks for reading!
Great post dude :)
1. For an e-commerce store online I do not think it is necessary or even recommended to put a picture and a description about you in the "about us" page. I think this will ruin the image of your website as being a small operation, and may not be up to par with other websites.
2. If you are an e-commerce site it is essential, and I mean essential to have a web-security seal or a HackerSafe logo. I beleive somewhere about 60% of online shoppers will not shop and an e-commerce site without feeling secure about the site. It should also be placed somewhere on the site where it can be seen at all times, making the customer feel more secure about the shopping experience.
Here is an example. It basically has everything you discussed, but I want to emphasize the Verification seal.
www.heyyoubaby.com
But really awesome post! I also submitted it to Digg for you!
This is a great article, and your site is a fine example -- except for the following perhaps:
In the opening you said, "Typos and grammatical errors express a disregard for the user"
But then in #3 point you write, "User can not touch and feel your product like the may be able to in a store"
Well, I suppose this shows that it is easy for anyone to make these errors, but oh so important not to -- especially in an article like this.
Sorry, I couldn't resist pointing that out :-) Thanks for the article. It will help me with a site I am about to develop.
John
@ Ben- With the header graphics I am just repeating what is already in the text title. I strongly feel that the graphics make a big difference, the content must still be the king though.
@ John- You got me ;) I should have seen that one, wow! I did set out to write a short post and it did turn into a larger one so this slipped- thanks for pointing it out! Good luck with your new site.
- "While your at it..." should be "you're".
- "...you will surely loose them in seconds" should be "lose".
- "...guide the viewer or users eye around" should be "guide the viewer's or user's eyes around".
Thank you.
The Bloggers Times
Why do "pop ups" get the possesive apostrophe, but not "welcome pages", eh? Other than it being incorrect?
Also, as a graphic designer and a writer, those headers shouldn't be inter-capitalized like that. For the most posh polishing, grammer rules hold for headers in all layout domains, be it for print or web.
All caps for headers with an appropriate headline font are acceptable for style as are other stylistic methods such as all lowercase, but if you're going to point out the importance of text in earning trust you might as well go all the way. Un-needed inter-capitalization is just one of the things that'll drive someone like me crazy.
Erm - persuade them to leave perhaps? Is this another example of gibberish? ;)
Although in general your references are good, the one related to color usage is really horrible.
Spoting that out I sould sugguest you to add one more tip to be avoided, a fith one:
Avoid!
Having Low Quality External Links
Thanks for this post anyway
"High Quality Photography" is not only necessary "When you are selling and need to showcase products". I think you need to use quality photographs with correct meaning matching to your website all the times because it enhances the beauty of the website and at the same time expresses perfectly your offerings.
Strongly agree with u. I want to say that In this web 2.0 design is essential. Traffic will be good if ur design,Font,navigation etc is extra ordinary. I think template selling business is going to rock now..
Strongly agree with u. I want to say that In this web 2.0 design is essential. Traffic will be good if ur design,Font,navigation etc are extra ordinary. I think template selling business is going to rock now..
I have to disagree with you on that. Browsers support the zoom in function that comes with the flash player component. Also, Firefox supports additional zoom by using the special keys Ctrl and + or Ctrl + mouse scroll.
But I can totally see your point, fonts should be a little bigger than that. After all we write content for our readers and we want them to have a good time on our site.