31Three - Notebook

Welcome to Sleekbitz

Jesse — 2013-01-18T15:26:55+00:00

Convert static designs into clickable, interactive prototypes for web and mobile apps.

I haven’t tried this out as of yet, but it sure looks interesting.

Authentic Jobs 2013 Promotion

Jesse — 2013-01-02T17:27:43+00:00

Hiring in the new year? Use the promo code “THREE2013” at Authentic Jobs to get 50% off! Expires midnight Jan 11.

iPhone contract for a 13 year old

Jesse — 2012-12-31T14:11:49+00:00

I’m taking some personal notes from this mom’s contract with her 13 year old.

14. Leave your phone home sometimes and feel safe and secure in that decision. It is not alive or an extension of you. Learn to live without it. Be bigger and more powerful than FOMO – fear of missing out.
15. Download music that is new or classic or different than the millions of your peers that listen to the same exact stuff. Your generation has access to music like never before in history. Take advantage of that gift. Expand your horizons.
16. Play a game with words or puzzles or brain teasers every now and then.
17. Keep your eyes up. See the world happening around you. Stare out a window. Listen to the birds. Take a walk. Talk to a stranger. Wonder without googling.

Banishing Your Inner Critic

Jesse — 2012-12-29T16:41:58+00:00

If “I woulda/shoulda/coulda” is a predominant part of your inner dialogue, then you have an active inner critic working tirelessly to make you drink the “not good enough” kool-aid.
Equally insidious and damaging (also frequently involving “shoulds”) is the tendency to compare oneself to others.

Great article from @denisejacobs on A List Apart.

Symbolset - SS Pika

Jesse — 2012-10-29T16:17:45+00:00

Pika is a friendly new symbol font with precise pixel-fitting and a warm, organic finish.

ARS Maquette WEB

Jesse — 2012-10-26T14:41:58+00:00

All 10 weights and styles have been hand-hinted and optimized for Cleartype and Grayscale rendering to look as good as we could manage on your Mac and Windows computer screens. While ARS Maquette Web Pro is still in production, we believe this standard set with its Extended Latin language support, will be more than sufficient for your website projects.

A nice alternative to Proxima Nova from ARS Type.

Viewing documents at 100% in InDesign CS6

Jesse — 2012-10-26T13:26:05+00:00

When InDesign CS6 came out earlier this year, I was excited to try out all of the new features aimed at resizing and reflowing documents. My excitement was quickly tempered by the way that the InDesign team chose to disconnect screen pixels from document pixels. At first I couldn’t figure out what was going on, but when I drew out a 20px square box, took a screenshot, and imported it into Photoshop to measure it. It came out as 31px.

Apparently this is a feature (not a bug) that works well in the print world (making stuff on screen a more realistic size) but fails miserably when working on screen.

Luckily there is a fix that is fairly straight forward.

Download Pixel Perfect Script
In InDesign, open up the scripts panel ( Window / Utilities / Scripts )
Right click on folder labeled “User” in the scripts panel and select “Reveal in Finder”
Place the “Pixel Perfect” script in this folder
Return to InDesign and you should see the script show up in the scripts panel. Double click it and you should be done.

Hope this helps! (Via Peter Spier on the InDesign Forums)

A Movie Theater’s Walls, Broken Into Thousands Of Pulsating Pixels

Jesse — 2012-09-11T15:00:50+00:00

Created for the Hyundai Motor Group Exhibition Pavilion at the 2012 Yeosu EXPO in Korea, the Hyper-Matrix is comprised of a steel scaffolding and thousands of lightweight, 300mm x 300mm cubes, each attached to its own stepper motor. A choreographed routine makes the pixels pump in and out, creating rippling arrows and pulsating grids. It looks a little like being trapped inside some sort of monochromatic Tetris nightmare.

Amazing.

The Magic of Water

Jesse — 2012-09-04T16:15:20+00:00

So far AuthenticJobs and it’s community have raised nearly $50,000 for clean water. That’s ridiculous. Crazy ridiculous. Congrats to Cameron and the design community for what they’ve accomplished so far.

Let’s not sit back though… this year Cameron is pushing it a bit further.

Our goal this year is to raise enough funds to bring clean drinking water to an entire community and neighboring school. $30,000 will fully fund tap stands for up to 800 people, with water delievered to those taps through a series of electric pumps and pipes, and good old-fashioned gravity. No more trekking hours every day just to find water.

It’s amazing to think that we as a design community can join forces to bring an entire community clean water. Let’s do this.

Currently

Jesse — 2012-08-28T21:27:43+00:00

Currently is a simple extension that replaces your “New Tab” screen with a new one that shows you the current time ~~and the weather.~~

Beautiful extension. Hopefully they can sort out the current weather issues.

Young Oceans

Jesse — 2012-07-19T14:15:15+00:00

Eames poster art print Mid Century Modern by WeaversofSouthsea

Jesse — 2012-06-27T16:04:35+00:00

Some current postings at Authentic Jobs

Jesse — 2012-06-27T15:34:41+00:00

Just a few jobs that caught my eye this week…

Free Font - Bariol

Jesse — 2012-05-31T22:08:42+00:00

My Responsive Design Process (So Far)

Jesse — 2012-05-03T02:19:39+00:00

In response to this recent Twitter conversation… here’s a quick overview of the design process I’ve been using for a responsive design project I’ve been working on.

I quickly settled on using InDesign for the following reasons…

Multiple Pages
No explanation needed. Having more than one page is a good thing. I’m looking at you Photoshop.

Multiple page spreads with variable page sizes
This is a killer feature for responsive stuff in CS5+. It allows to you create side by side pages, each with a unique width and document grid. In CS6, there will be something similar which they’re calling “Alternate Layout“

“Photoshop Includes”
Using InDesign doesn’t mean that I need to stop using Photoshop completely. Right now I have separate Photoshop documents for the site’s header and footer, which allows me to make quick updates in a global header.psd file, and have the changes update across every InDesign page. InDesign also has the ability to selectively hide or show layers in an imported psd, which is helpful for showing drop down menus, hover states, etc.

Character & Paragraph Styles
These come pretty close to mimicking CSS styles, and allow me to quickly make global changes to my type styles.

Tables
I hate making tables in Photoshop. And yes… I know hate is a strong word. Making tables in InDesign however is a pretty simple process. But just like the original coders out there quickly learned, tables aren’t just useful for tabular data. I’m using them in a bunch of areas in my design where I need the content to easily expand or contract when I change it’s width.

Anchored Objects
This is a feature that allows you to paste a graphic or a text frame inline with your flow of text. This is great for keeping any little icons or article images flowing correctly even when adjusting page widths.

Upcoming InDesign Features

There’s a few new features that are coming out in CS6 that should make designing responsive sites a little more bearable.

Liquid Layout
Adobe describes this as: “Liquid page rules to automatically adapt content when you create an alternate layout with a different size or orientation in InDesign.” Sounds good to me. Can’t wait to see how if holds up with more complex pages.

Linked Content
The InDesign feature page describes this as “Link content within or across InDesign documents so that changes (including interactivity) made to the parent text or object are applied to all linked children objects.” I envision this functioning similar to a text-based php include. Make a text change in one of your layouts, and have it update across the rest of them.

“Love to have” Features

Snap to Pixel Grid
Right now I’ve set my document grid to 1px increments which helps, but it would be great to have an option to force everything to align to the grid.

Symbol Library
InDesign has a “library” feature where you can store and reuse commonly used design snippets, but it doesn’t have the ability to update those snippets globally. You can however, embed InDesign documents inside of InDesign documents… which gets you most of the way there.

Custom Page Titles or Page Folders
Managing a ton of pages can be tough, and only having the page numbers to go by doesn’t make it any easier.

Putting it all together.

One thing that I hate more than creating tables in Photoshop is writing. So instead of describing how I set my files up, and how all these things work together, I figured it would be easier to just create an InDesign document that uses Bootstrap’s grid dimensions, and let you download it for yourself.

Download InDesign 5.5 File
Download InDesign IDML File

I’ll do my best to update this post as I refine my procedure. No promises.

Some current postings at Authentic Jobs

Jesse — 2012-03-23T19:44:45+00:00

Just a few jobs that caught my eye this week…

Frontage

Jesse — 2012-03-16T18:02:32+00:00

Etude featured in the music section of “The New iPad”

Jesse — 2012-03-07T21:47:34+00:00

Etude promoted in an Apple ad.

Jesse — 2012-02-01T15:10:55+00:00

I gotta admit… it feels pretty gratifying to have an app I designed featured in an Apple advertisement. ~~Even if it is just an html email.~~ Just noticed it’s on their store homepage too!

Some current postings at Authentic Jobs

Jesse — 2012-01-25T03:17:48+00:00

Just a few jobs that caught my eye this week…