I am not a designer nor is this post supposed to turn you into one. I recently have been getting more interested in how I can design better sites as I develop them. Recently I have been speaking about JavaScript and SEO, but more times than most I have to design little elements while building. Many times when you are the sole front-end developer on a project there are times when a designer is not involved, so its all up to you. I think just like anything the fundamentals are key to understanding and being better at said task.
Post Highlights:
Color Theory:
Color theory, in short, is the psychology behind how colors work to the human mind and overall psych. Knowing how to use these can assist in getting certain objectives across. An example of this is if you are contacted to design a site that is for a finance company then there are certain colors that you would want to pick to use based on trust, success, money, etc.
Colors can envoke certain feelings!
- (Red) love, energy, intensity
- Ads will use this to push these emotions (cars, lingerie, etc)
- (Yellow) joy, intellect, or attention
- (green) safety, growth, freshness
- Foods, money,
- (Blue) stability, trust, serenity
- Finance, law, insurance, doctors
- (Purple) royalty, wealth, feminity
- Payday loans, women based ads
How to Combine Colors
Analogous Colors: pick a color on the wheel and then pick the next color
Complementary colors: pick a color then go directly across the wheel (logos)
Split colors: when you take a color and turn it into a three-color palette like a Y
Triadic colors: literally pick a color and then draw a triangle (the ’90s overdid this)
Monochromatic Color: Take a color and then add white or black to contrast the color creating many other colors in the same tone
Tools For Colors:
Its always good to have some fun tools of the trade and these can give you want you are looking for.
- Colorhunt.com
- Flatuicolors.com (good for IOS platforms)
- MaterialPalette.com (Android-style pallet)
- Colorzilla (color dropper for your browser)
Typography Becuase Yea
Typography is the visual part of how words look or are perceived by someone. A great breakdown of this can be found here. Essentially the typography you use can determine if someone can read your content easily or how they perceive your page. Just like with color theory above you can envoke emotions in a way with the typography that you use.
Fonts do matter and can convey your message in different ways
Two families
Serif and San Serif
Serif – The Feet! of the letters differ it. Came from stone engravings (I think this is right?)
-Serious style like lawyers, office, etc
-Old Style
-Transitional
-Modern
-Slab
San Serif – No Feet!
-Grotesque
– Neo-grotesque
-Humanist
-Geometric
Both Serif and Sans-Serif work well together
So you can have a Serif header you can have a Sans serif as the body or vs, but do not attempt to mix two of the same kind.
2 fonts can look good 3 is a bit much and 4 fonts are straight crazy!’
Typefaces hold moods so if you mix moods in terms of the typeface then it will look odd.
Try to stick to the theme you are using to keep the flow.
A great tool is WhatFont it is a browser tool that allows you to highlight the font on a site and you can get all the info needed to use it.
Free for commercial fonts? FontSquirrle
UI Design
- Every app design is that of a journey
- Be the tour guide
- Check out, Jermey Thomas 🙂 Web Design In 4 Minutes
Alignment is KEY!
- Minimize the alignment lines
- Center align edge alignment, etc.
- The fewer alignments the cleaner it looks
Interaction Design
- How a person interacts with elements is how they should interact with them in real life
- Drop shadows on buttons, a shine on an element to make it look real
- Make a person want to interact by making items inviting (icons, drop shadows, represent the real world)
- Sub-conscious ques to interaction
Text Overlays
- Common for header images on a site
- Use a block with a high opacity background to help it stand out
- If the background is not changing then you can adjust the color of the image until the text is more readable
- Add a colored overlay for the image to help the text stand out just a bit
- A fading overlay for the text so you do not disturb the image
Attention Architect
- Think about how you can make items stand out (colors, bold, or other items)
- Keep the footer clean
If there is a key point to make that stand out more than the others “I am big time”
Conclusion
I really made this to help me remember some major points of design as I am by far not a designer. I did this same type of a post for Node.js and have referenced it many times as well. It is fun though to geek out on concepts that are outside of making a picture or website even “pretty” as some may say. To demystify something is something that I love to do. When you sit down and see fundamentals of anything from drawing, language, Brazilian Jiu-Jitsu or even design things can be much more clear when attempting to understand it.