Month: August 2019

Fundamental Design Tips For A Front-End Developer

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

fundamental design tips a front-end developer can use

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.

All Things Open 2019 Raleigh

Exciting Times and People To See

I posted a blog last year of my experience at the All Things Open event in Raleigh NC and it was amazing. You can read about that here (shameless blog post plug). Last year I was one of the first people in the door and to no shame to make sure I grabbed all the tech merch I could and STICKERS! It seems that this year is going to be even more amazing too.

Plan for 2019 All Things Open

So this year I have a goal which is to come with a plan. Last year was more of a fanboy moment where I just wanted to hop around to hear some very talented people speak. Well, honestly this year will maybe be the same in a good way.

  • Database Learning
  • Front-End Engineering
  • Gamifying
  • 101 / Introductory

You can find the schedule here

All Things Open Schedule 2019

The list above is not set in stone for me but last year I literally learned so much and really felt the sense of community in tech for the Raleigh NC area. Last year the Vue.js talk from Jen Looper, David Neal on Node and other awesomeness, and watching the Start-Up Pitch that Triggermesh did was beyond worth the entire conference. I am looking for some gems like this again and know they will be there.

As a front-end developer, I am looking especially forward to Chris Coyier from CodePen.io along with so many other talented people that will be there this year. I did realize that it is not about coming out of the three days with a new way of doing something but instead insight on how to complete certain things easier or explore new areas of tech that have been on my todo list.

On that note, if someone reads this and is wondering if they should attend the answer is YES! and if you see a dude name Timm it’s going to be me don’t be shy and say hello.

A Front-End Developers Birthday

Today marked about 6 years in front-end development and somewhere in the mid 30’s as a human that walks the earth. The real reason for this post is not some reason to give myself a shout out and dive into a giant cupcake while I rage to my favorite song. Instead, it is for a reflection that I had as I woke up today. As a developer, this “Impostor Syndrome” which I first read about from David Walsh who is also a really cool human I like to keep up with, really is a thing and something I relate too.

The Journey

This is not a life story just what I accomplished this year and feel pretty awesome about it. No, I did not create an app, get a new job, or even have that much to show off. I DID though learn a lot on my own time and in a fun way about JavaScript with especially just feeling more confident in the code I write. It all started with an online learning course I snagged from Udemy that was led by Angela Yu , and if you are new to development this is normal but then you move on to your own projects. I deployed some sweet action through GitHub, became kinda superhero-like on the command line, and helped a lot of my friends with just doing stuff on the internet.

Learning Is Not Always The Same

I found that as I came into this year that instead of focusing on a specific item to learn just enhancing me a person has allowed me to 10X my brainpower. What I mean is that I have wanted to learn guitar, draw better digitally and on paper, read more books, and those items that so many people would normally put off I put in focus. The result is I was using all different parts of my mental capacity kinda like a workout.

The Result

I put a little effort into each item every day and really just a little. By my birthday this year, I can say that I have a nice drawing journal, can navigate and use both Photoshop and Illustrator much better, have a pretty big comic selection, and can play some jazzy tunes. The caveat is I also have exploded in my front-end development skills. The little effort I also put into (deploying a signup form using the MailChimp API with Heroku, found the beauty of EJS for templating, Node.js, and polished up my overall JS skills, and became a master of the command line). Where I am going with this is if I just tried to focus on learning a new framework and that was it yes a project would have been done but that is where it would stop. Instead, I have leveled up all my skills in my personal life and ready to rock this next year the same.