5 Things about creating a predictable and harmonious spacing system

Predictable and Harmonious spacing is useful because it not only makes everything look better, but it also is used to deliberately for improved readability and consistency in product.

2 practical steps to create a predictable and harmonious spacing system.

  1. Baseline grid – Determine line-height of your body text and know your baseline grid number.
  2. Geometric progression – Pick a limited number of values from the geometric progression of your baseline grid number’s factors and multiples.

Rule of 3Cs

  1. Rule for containers – Apply uniform inset spacing inside all containers in your UI.
  2. Rule for content – Content is stacked vertically. Tackle the header stack first, by trying to get to a margin value that works consistently across all headers.  Solve the leaf -node stack next, by addressing spacing needs for paragraphs, lists, form, tables.
  3. Rule for components – Apply uniform inline spacing for all adjacent components in your UI. Make exception with smaller spacing only for components that are associated together.

When positioning elements vertically, the designer has to make decisions that never should be left to chance or be random. Too often, designers rely on vertical increments made possible in Photoshop by holding shift and arrows keys: “I use 5 or 10px, it depends.” This approach is acceptable horizontally, as columns are multiples of 10, but it doesn’t conform to any typographic reality.

— Robert Bringhurst (Author of “The Elements of Typographic Style”)

 

All of the information I gathered here, has come from Priyanka Godbole and prototypr.io

Click here for the article!

Meaningful CSS: Style Like You Mean It (Discussion 10/02 – 10/04)

Meaningful CSS

Jeffrey Zeldman said “In a site afflicted by classitis, every blessed tag breaks out in its own swollen, blotchy class. Classitis is the measles of markup, obscuring meaning as it adds needless weight to every page.”

Semantic Coding

Semantic Coding is defined as “a specific type of encoding in which the meaning of something (a word, phrase, picture, event, whatever) is encoded as opposed to the sound or vision of it. Research suggests that we have better memory for things we associate meaning to and store using semantic encoding.

ARIA

ARIA is a technical specification published by the World Wide Web Consortium (W3C) that specifies how to increase the accessibility of web pages, in particular, dynamic content and user interface components developed with Ajax, HTML, JavaScript and related technologies. On 20 March 2014 WAI-ARIA 1.0 became a completed W3C Recommendation. The Author mentions it because it, along with other additional platforms, are included in the new age of coding.

Microformats

Microformats are HTML for marking up people, organizations, events,locations, blog posts, products, reviews, resumes, recipes etc. Sites use microformats to publish a standard API that is consumed and used by search engines, browsers, and other web sites. See what-are-microformats for more.

While looking around on the site this article was originally published, I found a good article about Graphic Design. If you are like me, then you are talented in some fields of web design, but you struggle in the graphic designing department. This article helps you understand what to do and how you can make it easier on you and a designer to work together.

Just remember, if you are bogged down with too much stress, take a break, relax, and keep an open mind.

Never Heard of It (Discussion 9/11 – 9/13)

Lyza Danger Gardner, the Author, points out that it is alright to admit you don’t know something, to seek help if you need it, and even though it may take some time, you can do what you want with enough practice/learning.

My viewpoints on this

I believe that I need to admit not knowing certain things. Many times I have been in situations where people expect me to know something, so I accidently lie about it. I am also a strong supporter of getting help. If you don’t no something, ask around. If need be, use Google or another Search Engine, and find out what you are looking for. Plus if you don’t practice or learn from your mistakes, what good are you doing yourself?

While surfing the web, I found a website that is specifically made to help make websites. This website is very useful, because it has courses on how to build a website, plus many videos about things like games from a coders perspective. I feel that if a person is having difficulties and cannot find help from a person, this a good website to use as a backup.