You’ve probably heard of the principle of designs but have you heard of the front end design principles?
When it come to web design it, there are important key principles even front end developers should know how to implement into their code.
As a developer we should know how design plays a role in our web designs and how they can aid in the user interaction.
What are Front End Design Principles?
*This post may contain affiliate links, which means I’ll receive a commission if you purchase through my link, at no extra cost to you.
It was 9 in the morning and I was excited!
This wasn’t a normal day especially since I dread the fact of waking up early for anything and I had to be in class soooo early?
Despite the fact that it was the only time I could take this class it was required for graduation as an art major.
Regardless of how I normally felt I was excited today because I had just finished our midterm project and I was proud.
I spent many hours drawing and refining the best I could to present my ideas through the piece.
If you don’t know how an art class may go whenever we finish a project as students we would put our work on the wall and the teacher, as well as the class, would critique your artwork.
Not my most favorite part of the class since I’m not fond of critiquing other works half the time, but again I thought nothing could knock me off my high horse…
Or so I thought.
It was my turn to hear everyone’s critique and the room was silent…
I couldn’t figure if everyone didn’t want to say anything or was it just that bad.
Let’s just say the work didn’t convey its original meaning and I received a low grade.
I later asked my professor why and what could I do to improve?
What happened to the idea of creativity and freedom right?
She told me I haven’t been listening and I didn’t apply the principles of design she was teaching, she said there were hints but they weren’t executed properly.
The what of what?
“Exactly” she said.
Which leads me to today’s post.
Designing and creating a website may not be drawing but there are principles of design that we can follow in order to create effective websites.
artistically is not always free form, but it has purpose and it can create direction.
Which is what web development entails…
Creating purpose and directing a viewer or visitor to your intended goal right?
As a Front End Web Developer I believe it is not only imperative that you know how to code in order to design the look and feel of a website, but how to effectively design for todays viewers.
What this means is that a developer should at least know the basics of good web design principles.
Now as a web developer and having a background in design, I can fairly say I have the basic concept of what good design should look like, despite my early attempts smh.
So before we begin, I have one question for you…
When you experience something good do you have to convince someone that it is good?
For example…
if you were to ask someone
“How was the food?”
If it was good, or rather exceptionally phenomenal, I doubt you will find any delay in their response.
So why isn’t it the same with good design…
I believe it just makes sense.
But, what do you look for in good design so that you can develop it effectively?
Well let’s explore these principles.
These principles I present are essential to convey proper web development of any site, whether you’re creating a portfolio, an e-commerce site for a business, or even your blog.
Let’s get started then shall we with what I like to call…
The 7 Front End Design Principles
1. Balance
Balance can be defined as “a state of equalized tension or equilibrium” or “an even distribution of weight”.
Have you ever heard of the term “visually balanced”?
Your eye can detect if something is off just by looking at it.
Have you ever noticed an object or a painting and something just seems not quite right as if it’s not centered properly or one side looks heavier than the other?
For example, can you spot what’s wrong in this sentence?
Did you see it?
There is an extra space between the words SPOT and WHAT’S.
This is your perception of visual balance at work.
This is how symmetry comes into play in your designs.
How will you decide to format your pages or elements on a page to give the visitor a more calming experience.
As opposed to something that is positioned unintentionally and distracts from the overall intent or goal of the site.
Remember balance does not always have to be symmetrical to create this aspect.
The goal of creating a sense of balance is creating “an even distribution of weight” through the presented web elements.
So how does something heavy on one side or on top become properly laid out to give that sense of balance?
Did you know a sense of balance can even cause a sense of peace –- which can refer to the statement…
“I just need some balance in my life”
This creates a state of being calm and functional.
So good balance is good design
2. Contrast
I like to think of this design principle as dark to light.
However, do not think this only refers to the colors black and white.
Contrast can range from one extreme to the other.
The thing that makes the object stand out apart from each other.
Ironically even though the can be opposites they work together giving a sense of complimentary.
Think ying and yang, funny enough its black and white lol.
Even though color theory can help to create contrast but don’t limit yourself to colors for this category.
Things such as font weights and how you present images can also play a role here.
If you know how colors relate to each other and how the contrast of a color can pop from the background of another, you will be able to draw the viewers attention and navigate where you want them to look on the page.
Studying the 3 types of contrast can give you more ideas into creating this into your designs.
3. Patterns
This principle can also be known as repetition.
When writing css for your html document there is a background attribute of the background property that states no-repeat.
This is not that lol.
For certain designs of a web page its best to create recognizable patterns.
So what does this mean.
Humans are susceptible to patterns.
Patterns are powerful!
According to psychology today, when people discover patterns they can set up expectations, build connections, and inspire thought provoking questions.
Learn to use patterns that help guide people in what your trying to convey.
For example, I’ve noticed a pattern layout for how a webpage background imagery is presented.
Most sites that I have explored usually create a pattern with image in one section then following a light or white background and continues on throughout the page as you scroll down.
This pattern was made known through one page parallax sites and it provided contrast to help give readers a break on their eyes so they are no just flooded with imagery the whole time.
unless that is what you’re going for, remember creativity has purpose.
A cool design to check out is: BoyCoy
This design can actually implement 3 principles we have already discussed.
The back and forth imagery gives a sense of balance, the colored, or dark images, create the idea of contrast all through a simple recognizable pattern.
4. Scalability
This front end principle is important in many areas than just design.
A business is always looking into how they can scale their business to reach more customers, especially if they’re successful.
As a developer you should always be looking into how to write good code and ultimately programming for responsiveness.
With the growth of mobile devices it certainly necessary for anyone who has a site online to create a responsive website.
You can read the post I wrote on “How Important Responsive Design Is” here.
If your site can not be stretched or reduced to smaller screen sizes your losing in this game.
Scalability in design can also lead to the size of an element on a page in relation to another, if you’re picking up the pattern, hint hint, you will notice how these front end principles work in relation to each other.
Scaling will also help in the area of creating balance on a page.
5. Flow
Bruce Lee once said…
“Be like water my friends, formless and shapeless”
With that being said how does your website, or webpage, flow.
Does it even have a flow to it?
UI/UX designers specialize in this area.
At least I think so lol.
This is where creating flow charts and wireframes can come into play.
From the header to the footer, where and how do you want to direct the viewer.
Questions to ask yourself when thinking of flow should be things like:
- What exactly are you trying to convey when a visitor comes to your site?
- Do you have the right font to speak to the overall theme?
- Do the images line up?
All this is important with your web flow.
One word I believe you should think about when it comes to flow is…
CONSISTENCY
This leads me to my next principle or what I consider to be my favorite, as I am learning to properly implement it is…
6. Storytelling
It is said that 65% of conversations/communication is storytelling.
If more than half of our conversations as humans is telling good stories, I think it might be good to know how to tell good, or rather great stories.
Most importantly how can one develop and create a story through information and imagery?
I see a website as the movie preview to your business or a good book to your life.
If you understand the basic setup of a story and even the different archetypes of creating captivating stories, we can begin to convert these into our designs and connect with our visitors more.
I know as a developer myself this is one area I am trying to develop and study in order to convey properly to reach specific target audiences.
So learn to be a good story teller!
It’s not just for authors and screenwriters who produce movies.
7. Unity
We made to the last principle.
As I write this last principle the thought that comes to mind, as it might yours too, is what’s the difference between unity and flow?
With flow it dictates more of how a page is laid out and unity is the idea of how all the elements relate to each other.
In other words do they unite to create one cohesive website to make sense or is it a bunch or random images and information that make up the site.
Think back on the idea of consistency.
As I said before, all the principles relate in order to have a sense of unity to help one another in the design of a great web page.
In business there are different elements or components to help market your brand.
From your business cards, to brochures, to logo design, and even your website.
As any business owner knows you want your brand to be consistent through all the different elements a potential customer comes in contact with.
So is the message the same, are the colors the same, is the design of the logo the same, and does the philosophy of the company speak throughout it all?
Do they all tie together or “unite” to tell your brand story.
If not, you have some revamping to do.
The same goes for web development and design.
All the elements on the page need to tie in together in some form and fashion and be easily understood.
Why Should You Know These Front End Design Principles
The more important question is why is this important?
Well, if you haven’t read my article on marketing for developers I think you should check it out.
The reason why these front end design principles are important is I believe you must not only think of yourself as just a developer, but as a marketer.
Marketing is the sole idea of selling your services or yourself.
I heard it once defined as the…
Art of changing ones belief with the intent of a purchase or sale
Steve J Larson
I love this line because marketing is the art of leading someone to your desired goal in other words…
your call to action.
I know when you think of marketing and selling it can be deterring and also deceiving but don’t let bad marketers ruin it for everyone.
If you’re like me then you’re probably more comfortable staying behind a computer and not talking to a lot of people.
The life of an introvert am I right?
But I want to help change your perspective a little about marketing.
A New Way Of Marketing
What if I told you marketing can be fun.
To illustrate let me tell you about the time I went to the Dwarf House.
Again to preface the story I am not an outgoing person.
I was in painting class and the class is set up in open shared cubicles and everyone is assigned a cubicle partner.
I was talking to my cubicle buddy about lunch and I was telling her about Chick-Fil-A.
Now for the record if you don’t know what restaurant this is you have missed out on life and one of the most delicious chickens you will ever taste, but I get it some states don’t have it.
But around this time I simply fell in love with their chicken and couldn’t stop talking about it.
I guess I was like a Chick-Fil-angelist.
We got into a discussion and then I told her about this place I just found out.
called the Dwarf House.
The Dwarf House was the very first Chick-Fil-A that is open 24-6, since they close on Sundays.
Others in the class overheard our conversation and couldn’t believe their ears and they wanted to go just like me.
Then the thought came to me…
We should do a late night road trip.
As an introverted person who doesn’t like groups this wasn’t my thing, but this was different.
I just wanted to go to this place called the Dwarf House and there were others like me who wanted to come along.
So I threw out a time and a location we should meet and it was on.
We met late in the night, like 1 in the morning, and it was on…
The dwarf house road trip.
It was fun and I wouldn’t trade that experience for nothing.
But if you think about it, I was doing something I didn’t even realize.
Marketing
I was marketing because I was telling others about my experience about Chick-Fil-A when in reality all I was doing was telling them my story.
And that is what I want to highlight.
Remember the 6th principle storytelling.
How To Learn Marketing As A Front End Developer
If you want to get really good at marketing, then learning how to tell stories is the key.
I learned this concept in a book called Dotcom Secrets.
With a title like that your first thought is probably about websites right?
Actually it’s about marketing.
The author Russell Brunson changed my perspective on what marketing is and if anyone wants to effectively market its through something called sales funnels and telling stories.
Have you noticed it?
When you first read this post I told you a story about my first encounter with the principles of design and then I introduced the principles, and again with my first encounter with marketing.
So if you want to know why these principles are important it really boils down to how you present, or market, your website.
And the best way to execute this is by the stories you tell.
All these principles can be applied to marketing.
If you think you’re not good at telling stories than Russell has another book called Expert Secrets and within it he breaks down how to create great stories with a concept called the epiphany bridge script.
It is a template on how to structure stories to help you drive your point across with the viewer realizing it themselves.
It’s not only good for marketing but great to practice when creating content for blog posts.
I use it almost daily now when I am writing a post.
If you want to learn how to tell better stories to market yourself, or your services, then I definitely recommend you check out these 2 books which you can get for free just pay shipping and handling.
Check out it out below, oh and if you really want to see how great marketing works take a look at his website for these books and see if you can spot the stories.
>> DotCom Secrets for free here
>> Expert Secrets for free here
Also if you want to know which one you should get first if you do get them then I suggest you get Expert Secrets first and then Dotcom Secrets.
These are 2 of my favorite books and I keep them by me whenever I need to refer to them or want to use a cool technique.
Conclusion
So there you have it the 7 front end design principles for web development:
- Balance
- Contrast
- Patterns
- Scalability
- Flow
- Storytelling
- Unity
Have you seen these principles represented in the sites you visit?
Can you recognize them?
Most importantly are they designed well enough to tell great stories or are they just randomly put together?
I believe a good and effective website has the principles laid out effectively for anyone to navigate through, even if it’s your 80 year old grandma who is not tech savy.
Remember good design doesn’t need to be explained, it just is.
PERIOD.
Another good book to look into this that I am also reading is “100 things every designer should know about humans“.
It gives insight on how design plays a role in the psychology of a person.
I think it is a great read to develop yourself not only as a designer, but a front end web developer.
You can also find this as well other great books on my resource page
So how will you use these front end principles in your next design to market and tell great stories?
Or do you you think another principle is valuable in web development.
If so let ya boy know?