Still in Beta | Version: 0.3

Back

Relearning the Principles of Design

I’ve realized that I need to reinforce my fundamental knowledge and understanding of the design principles that power Web Design.

Some of My Background

As a full stack developer of about 5 years now, I am starting to grow very confident in my skills of writing elegant code in a variety of languages and frameworks to build highly functional websites. Currently working at my amazing agency, King & Partners, I have amazing designers that create beautiful designs for our array of fashion and hospitality clients. There is a great trust between the designers and myself that allow them to design with the confidence that I can build what they can imagine.

However, I personally have a yearning to be more involved earlier in the design process. Early in my career, as a freelancer, I started building websites with WordPress and using premium themes as a starting point. These themes were great as I could use much of the templates and examples provided and adjust them to fit the needs for my clients. I got really good at finding themes with the best designed templates and switching out the images and text for the needs of the project. I would leverage my growing web dev skills to make small tweaks in the theme’s codebase , but mostly, they helped me more easily navigate through the WordPress CMS and the theme’s page builder plugins so that I could work efficiently.

Throughout these early years, I relied heavily on my fundamental knowledge and understanding of the principles of design. In my senior year of high school, I took a Media Arts class. Here, we learned a wide variety of skills such as photography, Photoshop, Illustrator, and even creating a blog using Wordpress. Honestly, this was supposed to be just a class to get an “easy A, but it was the start of my interest in digital design that led me to become a web developer.

So here I am, after 3 years of being spoiled by the wonderful designers of K&P, I need to put my designer hat back on. I need to brush up on the ideas of using lines, white space, typography, color, and shape.

I have so many ideas that I want to code on my spare time, and I think I know why I have been procrastinating; I NEED TO DESIGN THEM FIRST.

Done are the times of me trying to build one of my ideas thinking that I can design as I go. I am laughing at my own naivety. So here are my notes as I go through the basics of design… Again.

These notes are my very rough thoughts so please excuse the mess

Key Concepts of Visual Design

Line

  • The basis of every letter in every font.
  • Borders and divisions.
  • Create order and structure

Shapes

  • Three basic shapes

    • Squares/Rectangles — Blocks of content; emote strength
    • Circles — Buttons and show harmony and comfort
    • Triangles — Icons that usually gesture importance

Texture

  • Texture is how something feels.
  • Just seeing a texture relates to sensations of touch connected to our physical worlds.
  • Texture are inherently interesting and give designs personality.
  • Smooth vs Rough.
  • I’m really into the idea of how textures can be used to give life to a design.

Color

I mean c’mon now. Color is so important but often under thought of in lazy designs.

  • First and foremost, designs should not be an eye strain.
  • Colors are used for emphasis, contrast, and emotion.
  • I need to do more research on Color Theory alone

Grids

  • Super important for layout.
  • It brings order and hierarchy when used well.
  • Also it is extremely connected to how front end developers write code to handle the infinite responsiveness of the web and its devices.

Core Design Concepts used in Web Design

  • Space
  • Hierarchy
  • Contrast
  • Scale/Proportion

“While visual design is an art form, it’s also governed by the laws of mathematics.” John Moore Williams in “4 visual design principles for web designers”

This quote really hits home for me; I first started to understand the world of art and especially design when I looked at the mathematics behind it — musical scales, 12 column layout grids, balance & symmetry.

The Principle of Emergence

The Principle of Emergence, in design, is the idea that the human mind tries to interpret a full image before identifying each of its individual parts.

“If you see a fuzzy silhouette of a person walking far away at night, your brain knows right away it’s a person from the shape of the body and the individual limbs. You don’t need to see the hands or the eyes or the feet to know it’s a person, but these visual details help you determine who the person is.” ~ John Moore Williams in “4 visual design principles for web designers”

I find myself preaching that one shouldn’t just break the rules if they don’t understand what they are. Jazz is always the comparison here because it was known for breaking all the conventional rules of music theory at the time. Even the most innovative artists at the time were trained and took those understandings of keys and scales to create the solos of jazz that we know and love.

"In Jazz, improvisation isn't a matter of just making any ol' thing up. Jazz, like any language, has its own grammar and vocabulary. There's no right or wrong, just some choices that are better than others." ~ Wynton Marsalis

The ever changing devices and mediums in which we consume digital content will demand continuous growth in digital design.

Also, I believe it is necessary to slowly challenge the forms of recognizable design elements by focusing on innovating on each of the small parts. Like words, the definitions and uses of traditional elements will evolve over time.

Looks like this will be a multiple part series I do for myself; these are some of the topics, I look to explore in the future

  • UX vs UI
  • Principle of reification
  • Principle of multistability
  • Invariance principle
  • Creating layouts
  • Z-pattern vs F-pattern
  • Gestalt principles of design
  • TYPOGRAPHY — that’s gotta be its own article as well.