Visual Grammar

Visual grammar are all the parts that make up a website, eg buttons, typography, illustrations, windows, etc… and just because a UI is not complex, it does not mean it is not beautiful of functional, there is beauty in simplicity.

Perfection is achieved not when there is nothing more to add but when there is nothing else to take away

A great example of this is seen in “If the moon was only 1px

Now not only is the type simplistically gorgeous, it really draws you in and the way how you scroll to go and search the rest of the website is very intuitive and engaging.

Once you start scrolling towards mercury he gives little pointers of text along the way to make sure you keep scrolling and also to alert you that this is just the illustration of the space in a funny and simple way.


  • Simplify as much as possible – focus on the essentials
  • What can you do with constraints – think of how Instagram only allows the 1 size of images for posts and how they have stuck to it. It has been highly effective.
  • Focus on re-using elements and minimizing visual complexity. Think of how you can re-use the design of the main navigation and the footer. Think of adding a home button to cater to all audiences and convention

Language and typography

How did you write the content for your website? Is it in the 1st person? How did you speak? Is your language super friendly? Energetic? Calm? Basically, what is your tone of voice and your tone.

Ask yourself

  • Who are you? (As an individual or a business)
  • What are your values?
  • What’s your mission or purpose?
  • What do you hope to achieve? — In my case maybe add that you are looking for a year-long placement
  • How will we know if you are successful?

Think of Dropbox and how when a download is going to take a long time, they jokingly say “Grab a snickers” this is great design, it humanizes it and makes it easier to understand and maybe even alleviates a stressful situation.

“Typography is the craft of endowing human language with a durable visual form”. – Robert Bringhurst

I learned early on that I tend to find something I like – like a typeface – and stick to it instead of branching further out and continue to investigate the other options.

something I want to strive to achieve with the typeface I choose for my website is that it:

  • Optimize legibility, through the appropriate choices of typefaces
  • Improve accessibility by considering contrast between the foreground and background colours
  • Improve usability through a considered typographic hierarchy. – Think of how you structure the typography as this will guide the user on how to read the content and in what order.

Considering the visual grammar for my website

I started considering the visual grammar of the content of my portfolio site. I need to consider visual aesthetic, colour, typography, layout, …

I need to make the content work for me. Be expressive, to not be limited by my skills. Be as imaginative as I can.

While in class we were given a task that was great for getting my ideas flowing – Crazy 8s:  8 ideas in 8 minutes. Here is how I got on:


Leave a Reply

Your email address will not be published.