Authors Notes & Background
I wrote this as a helpful list for people to read before posting on Project Feedback. I have 262 replies in this topic, So I see a lot of the same mistakes and I wanted to showcase the most obvious mistakes. Some people have 1000’s of replies but I often see people just completely miss these important details when reviewing. This doesn’t cover everything and I suggest doing research into finding webpages you like and replicating those ideas.
I often notice that people completely miss links when I post them like this. Please don’t be that person.
Annoying Colors
There is a reason no one makes a webpage with neon green or bright red colors. It is simply hard to look at and strains the user’s eyes. Please use moderate colors like nice greens, whites, and sometimes black and with white text which is called dark mode.
For instance, here is a nice, easy to read webpage.
(Credit: Charlie Kim’s Portfolio by @iamcharliekim)
Notice how there is no neon greens, bright red buttons, etc.
Then their is this monstrosity:
(Credit: Don’t Use Obnoxious Colors by Michael Nicol)
I am not saying you can’t use any colors besides white and gray, but any bright colors will push users away from your page. Have contrast like black and white, not purple on purple. If no one has used your color theme or style before it is most likely because it doesn’t look good. Companies have paid millions, all in search of the best UI and I can’t name one that is made with neon colors with no contrast.
Layer Your Page
If you have a small amount of content, use layers. Simple calculators or your tribute page does not have enough content to fill up an entire website. If you tried, it would look overcomplicated and would have an annoying UI. To fill up that space and add structure, try having layers.
(Source: Standard Deviation Calculator by Michael Nicol)
Despite that the red is nice and easy to look at, I still have a white main in the center to add structure and therefore contrast. Notice how the light red and white compliment each other. I suggest always using a white main the center as it is the only color that blends well with black text.
The black text would be hard to read on the red so I used a white title with a black text shadow to make it pop. Also, notice the white main is in the center rather than 100% of the width. Check out my Flexbox template for an example on how to layer a page.
White Space
Don’t make your users read across the page. Keep your content central so the user does not need to strain their eyes by scanning the entire page rather than just a small part. By keeping the content central, less content is missed by the user. For text, the users are less likely to lose their place while reading if they have to do less scanning.
What is easier to read?
This?
Or this?
(Credit: Started my Career As a Full stack Developer by @alify)
Make your page responsive
One of the biggest mistakes that people make is that they hardcode widths in pixels so the webpage is not responsive. It’s a complicated subject, but remember to make your page so it can collapse easily and still be usable.
I suggest thinking of HTML like boxes and using flexbox, check out CSS Tricks’s Guide to Flexbox.
The reason I like Flexbox is that it is very simple and intuitive to use for a project. With just a couple lines of code, you can create a flexible page that can put items into rows and columns.
I made a Flexbox template to show you the basics and how it can be used on a webpage.
Also, use Media Query’s to change margins and widths on smaller screens. This is especially key when layering as mentioned above.
Helpful Tools
Here are some helpful resources you can use to better your coding experience.
Font Awesome: Thousands of high-quality icons for HTML
Canva: Free online graphic deisgn
CSS3 Transitions: Use CSS transition for uncomplicated simple animations
freeCodeCamp: 1000+ challenges to learn Front End
FCC Forums: Great community for help with coding needs
Media Query: Responsive Web Design
Flex Box: Very simple and powerful; combine with Media Query
ScreenFly - Test reponsiveness
Coolors: Generate a random color scheme
Inspiration: Hundreds of Codepens’ for ideas
Write on Web: drawing on screen
Ruler Measurement: find the size of an element
WhatFont: Extract fonts from your favorite web pages
ColorZilla: Extract colors from webpages
(Source: Check out these sites! by Michael Nicol)
Are You Happy With The Result?
Before posting, are you happy with your HTML? If not, look up example webpage templates that you like and study the styling techniques they used and apply it to your page. Check out Cardoza Edu’s collection ‘TP’ which contains hundreds of nice webpages for inspiration.
Break down features of webpages that you like into boxes because that is all it is. It is also the use of modern colors and fonts like Raleway.
Conclusion
Start small when just starting out. Do not overthink it and do not give up. Just remember that if someone hasn’t done it before, it is most likely because it is a bad idea. People have spent hours designing UI’s and have scrapped 100’s of ideas to arrive at what you see today on Google and Facebook. All of their pages follow simple rules in order to give their page structure.
You can check me out on:
- Codepen
- freeCodeCamp
- Github (Not that active)
Thank you for your time!