Anthology of Interest I

Sunday 29 September 2013 Tagged with: design, typography, and color

During the design of the site, I wanted to focus two main things: typography and color.

Content

Being a sucker for mobile first development, it made sense that content should be the starting point of the re-design. I had the good fortune of having three to four posts and the homepage content left over from the previous site so I had real content to design around, with the exception of this page to cover any missed options.

I tried something new when designing this site by paying close attention to how the content was going to be viewed. Trent Walton’s post on fluid type helped me greatly as the basis for my grids, the sidebar should be just shy of the 75 character mark, and the text is sized across various screens appropriately to meet this line length mark. This way of thinking flowed through in development, as it forced me to think in terms of em’s rather than px. I capped my content sections at 36em, that way even if a grid spanned say 60% of the screen, the text inside would still be nice a readable length.

While this is common knowledge for designers, it was interesting learning the reasons for design decisions and core user experience concepts.

Keeping with the concepts from my early designs of the site, I used serif fronts for headings to contrast against the clean, sans-serif copy and a dash of cursive / hand-written for navigation.

Color

Ms Laura Kalbag was a massive influence1 for using color in design. In a similar way that she used color across the areas of the site, I wanted color2 to break up parts of the page. My palette consisted of the yellows from the giraffe into the red headers, complimented with the blue on the home page.

My starting point was the blues of the color strips and blog headings that made up the home page, using the cool tool color code. A complimentary red was needed for the mast head of the page and with that I had my pallet. Its always daunting for me staring at a blank white canvas when designing as there are infinite options. Playing around with this color-by-math theory3 helped point me in the right direction with the analogous purples and blues of the posts lists and contrasting header.

The next step would be to make sure these colors are accessible as I only did a basic black and white contrast comparison. Baby steps…

Next time on Anthology of Interest

Style tiles and designing in browser, yesh!

  1. Imitation is a form of flattery right?

  2. Color/colour, ugh

  3. tutsplus cleary do a better job than I could

Estes artigos são recentes

  1. Aug 25 2017
    Entrega de Certificado de Dispensa de Incorporação no Gama
    Como todos sabem, no Brasil a apresentação de jovens ao serviço militar é obrigatório. Nesta sexta-feira (25) houve uma solenidade na praça cívica do Gama para dispensa dos jovens e entrega do CDI (Certificado de Dispensa de Incorporação). Foram dispensados apróximadamente 300 jovens.
  2. Jan 15 2017
    Bandido bom é bandido morto
    ![bandido jpg](/content/images/bandido bom é bandido morto.jpg)
  3. Nov 08 2016
    Roubo de Água dos rios da Amazônia!
    ![navio rouba água](/content/images/navioRouboAmazonas.jpg)