New site, new work!

So happy to launch this new site! I’m looking for new product design work (UX/UI/front-end), so give me a shout if you like what you see!

I needed a centralized place to store my work, thoughts, and inspirations. I wanted to start documenting more of what I learned, and give back to the web community from which I’ve Googled so much. Design-wise, I aimed for clean and easy to maintain, but not too stark or bland. I wanted to let the typefaces carry most of the personality, with some color to assist, and to play with borders and outlines a bit.

Under the hood:

  • Siteleaf as the CMS
  • H&FJ Cloud.typography for the webfonts (Vitesse, Forza and Gotham Narrow) EDIT: Typekit for the webfonts (Chaparral and Proxima Nova); I decided to drop Hoefler
  • Sass for the CSS preprocessing
  • Bourbon for the basic mixins (so I don’t have to maintain them)
  • Bourbon Neat for the grid (so grid classes could be included semantically in the CSS, and also mixed into media queries)
  • Fluid Carousel by Brad Frost for the responsive content slider
  • Custom CSS3 icons (so I could have single-pixel line weights at any size)

This is my first site on Siteleaf, and it will not be the last. I’m really happy with how clear and smart the system is. Portfolios and blogs obviously need to be really simple and enjoyable to maintain, otherwise they’ll be avoided.

Edit post   New site  Siteleaf and Cloud Typography

Killer features of Siteleaf:

  • Working locally is easy, it just requires a couple lines in Terminal
  • Content that you enter in Siteleaf is synced to your local environment, so you’re not constantly reinstalling plugins locally or downloading your database like with Wordpress
  • Custom fields are really easy, so if you want to create a special section for a post/page, you don’t have to dump it into the main content editor or hack through the templates; you just click “new meta field”
  • Tags are part of taxonomies, so you can have different groups of tags and not one big messy cloud
  • The admin is super simple and minimal; easy to navigate and explain to others
  • The Oak team open sourced all of their Siteleaf themes, so you get example templates from super-expert developers

The most intimidating part was working in Liquid, aka doing actual programming. It’s the language for Shopify templates too, so I’m sure it’s a valuable skill, but I kind of forget how to program in between each project. Luckily those sample themes existed, for formatting reference.

The process:

  1. design mockups in Illustrator
  2. enter content in Siteleaf and set up local development
  3. build a static site in Hammer and get the responsive styling working
  4. convert the templates to Liquid and get the dynamic stuff working

I also tried out H&FJ’s Cloud.typography, which was great. I used Vitesse and Forza for their technical-yet-human feeling, and added in Gotham Narrow for more legible, familiar body text. It’s amazing to see elegant typefaces holding up on a ratty 72dpi grid.

Wonderful wonderfulness of Cloud.typography:

  • Super elegant typefaces, properly hinted for the screen
  • Special ScreenSmart versions that are clear even at tiny sizes.
  • Like Typekit, it only takes a snippet of JavaScript in the header to set things up
  • The admin panel lets you load only specific fonts (like regular or italic), or even just certain characters, to reduce page weight
  • No flash of unstyled text or lagging so far!

I’m building a few more things to launch later, but it’s great to have a new homey home.

Any feedback or questions about things, ask away! Or, if you need help doing something similar, get in touch.

comments powered by Disqus