Shaping the Page

Countdown to Launch: Share the Shelf

2012-01-08T18:44:57+00:00

For the last few months we’ve been working hard with Ryan Battles on the design and development of a new service called Share the Shelf. The service provides an easy and elegant way for book lovers to trade their used books with one another. If you’re interested in taking Share the Shelf for a test drive don’t hesitate to sign up on our landing page. We’ll be sending out beta invites soon!

Why Do We Assume that Simple Is Good?

2012-01-08T18:36:20+00:00

Why do we assume that simple is good? Because with physical products, we have to feel we can dominate them. As you bring order to complexity, you find a way to make the product defer to you.Jonathan Ive

Do We Really Need a New Web Design App?

2011-12-30T16:04:48+00:00

I’ve been thinking a lot about the web design community’s longing for a new web design application. In this new era of responsive design, multiple view ports, web fonts, CSS animations, etc., traditional applications like Photoshop just aren’t cutting it. The static nature of our current tools doesn’t cater to the fluid and flexible designs we’re trying to build. We all know this. We joke and complain about it on Twitter. We write blog posts about it. A fine team of designers and developers have even started Project Meteor as a way of bringing added awareness to the problem. And although I applaud a campaign like Project Meteor and agree with every item on their wish list, I don’t think a new, ultimate web design app is what we need.

One App to Rule Them All

As others, I’ve tried to imagine what this app might look like and how it might behave. The feature wish list at Project Meteor is a great summation of what many of us have desired: fluid layouts, grids, browser rendering of web fonts, CSS effects, object states, etc. Plus we want the ability to render stunning bitmap and vector effects and filters similar to what Photoshop currently gives us in that category. How would a single application graciously handle all of these capabilities? And maybe a better question, do we really want a single application to even try to pull this off?

Earlier this year I moved from Photoshop to Fireworks hoping to gain some kind of an advantage in my design workflow. At first I was very excited about some of the layout tools included in Fireworks that were missing from Photoshop. But in the end, each project in Fireworks was still a static, pretty picture, just as it was in Photoshop. I was left with little actually usable for the live site. I feel that whatever this new web design app offers won’t be much different in this regard. The reason being, most of us agree we wouldn’t want this new app to generate our HTML. So whatever deliverables this app is able to provide still leaves us needing to “rebuild” the entire project in code as we interpret the design intentions the app presents, or at best copy snippets of CSS into our text editors.

A Different Approach

I decided that maybe it’s not a new tool I need. Maybe it’s a new design strategy, a new workflow, a new way of approaching a site build that would free me from my dependency on applications like Photoshop when it comes to responsive, structural, and typographic strategies. Most of the features on our wish list are features already handled by CSS and the browser. So why do we want an application that emulates what CSS and our browsers already do for us? For me the answer has always been because designing directly in the browser is a pain in the ass. Plus it stifles my creative flow.

But earlier this year I started to experiment with some of the new front-end frameworks that have been popping up lately. Twitter’s Bootstrap is a good one; so is Skeleton from Dave Gamache; and Zurb’s Foundation is one of my favorites. There are many more. I was pleasantly surprised at how easily these frameworks allowed me to design and build the typographic and structural layout of a site or screen, including with some frameworks the flexible and responsive nature of the layout. In fact, after spending some time getting to know a framework, it actually became quicker to mark up a wireframe in the browser than it was to mock up a wireframe in a dedicated wireframing app. In other words, I’m becoming as comfortable building my layouts with code as I was drawing my layouts in a WYSIWYG app. And these frameworks aren’t just for wireframing and prototyping. As I narrow down the right typographic and structural layout solutions for the site, I can continue to mature the design via any and all CSS tools I have at my disposal. In a nutshell, these frameworks make implementing and experimenting with your ideas a joy. So my problem with designing directly in the browser being a “pain in the ass” has pretty much been wiped away.

But what about the creative flow? I’ve always been reluctant to give up that blank canvas in Photoshop or Fireworks where there are few restrictions or rules in the way of my imagination. No code to distract me, just a rough wireframe to interpret into endless possibilities. I soon found out my creative flow wouldn’t be sacrificed, perhaps just rerouted a bit. Instead of Photoshop being on the front side of the design process, it has been shuffled to the last step in the design process. In its place is a wonderful new focus on type choice, typographic hierarchy, and layout strategy, including the layout’s responsive behavior. These of course were things I always tried my best to focus on within Photoshop, but working with a front-end framework directly in the browser has removed all distraction from that focus.

The App That Is First Shall Be Last

So Photoshop now becomes the last step in the process. By the time I’m ready to work in Photoshop (or Fireworks) my site is already living HTML and CSS. The typography is already fully planned out, implemented, and being rendered in the browser. And the site is completely responsive, with every screen size and layout adaptation accounted for. I can now focus on any necessary visual aesthetics that haven’t already been handled with CSS. I decide where the layout might need background textures, illustrations, embellishments, etc., and use my design application to produce those. And the good news is, since I’m not relying on my design application to assist me with page layout, I’m free to use any application I want. For example, I’ve always been reluctant to use apps like Acorn and Sketch, because I never felt comfortable building an entire page design in those apps. That’s no longer an issue since I’m only using my design application to produce “pieces” of art, not entire page designs. I also eliminate the step of needing to “recreate” Photoshop effects using CSS, because any effects that can be made with CSS have already been implemented before I even get to Photoshop.

Of course, this approach makes the assumption that the designer can code. And even if the designer can code, it’s also assumed they’re on a team or in an environment that allows them to contribute to the front-end development of the project. That might not always be available, although I think most teams would jump for joy at receiving responsive HTML/CSS to build upon vs. a mockup they need to interpret. It also assumes your clients will be able to adapt to this new approach. I haven’t had a problem. In fact I feel my designs are stronger because this approach forces me and the client to put more focus on the “bones” of the project (typography, layout, etc.), allowing us to hash out the visual aesthetics later in the process.

For me, a combination of my text editor, a tool like CSSEdit, a front-end framework, and a revised workflow have become the new “web design application” I’ve been longing for. And judging by some of the tweets and blog posts I’ve been reading this year, I’m far from the first to become a fan of this approach to site design. I imagine there will still be projects where an “uncoded” mockup is all that’s needed, and that’s great. If someone does eventually launch a new web design app, I’ll be as excited as everyone else to give it a try!

Have your own thoughts about this? Hit me up on Twitter and let me know what you think.

Your Time Is Limited

2011-10-05T12:43:46+00:00

Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma—which is living with the results of other people’s thinking. Don’t let the noise of other’s opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.Steve Jobs, 1955–2011

Moving from Photoshop to Fireworks (Part 1)

2011-08-11T03:21:45+00:00

(The following is Part 1 of 3 in a series of articles.)

Raise your hand if you’re a long time Photoshop user, have always been curious about Fireworks, but have never had the time to give it a fair try. That was me until earlier this year. Over the last ten years my design projects have moved from mainly print-focused to almost 100% interactive in nature. And despite my love for Photoshop as a photo-manipulating, special effects powerhouse, it’s apparent that Photoshop was never intended to be the interactive layout and design tool that so many of us force it to be. At best the web tools included in Photoshop are handy patches that have allowed me to scrape by for years, giving me just enough to get the job done.

But earlier this year my workflow involving Photoshop started to wear on me. I began to casually look elsewhere, wondering why in 2011 there wasn’t a “Photoshop for interactive design” out there somewhere. I was familiar with Fireworks, but never made time in my schedule to actually use it in a true production environment. And rather than continue to wait for that non-existent “next generation” web design app we all dream about, I decided to download the Fireworks CS5 trial. I made a commitment to use it in place of Photoshop for 30 days, no matter how difficult it might be. And after 30 days I was hooked. Where had this application been all my life? And why had it taken me so long to give it a serious look? Now after months of use I feel it’s time to document some of my experiences and observations in making the switch from Photoshop to Fireworks. Some of this will sound like a software review. That’s OK, it kind of is. But mostly I want to give long-time Photoshop users a taste of what’s in store, the good and the bad (it’s not all good), should you decide to make the jump.

Multiple Pages

Multiple pages is one of the most freeing features of Fireworks. I no longer have folders and folders of PSD files to keep track of for a single project. I can now manage an entire site or application design within a single document. Or I can choose to use one Fireworks document for each screen of the design, but include every version of that screen within the same Fireworks document. So no more “project-home-5a-revised-updated-2.psd” files to keep track of.

Each of the pages (or “screens” as they could be called) in Fireworks can also have their own custom sizes. So it’s easy to accommodate utility pages, popups, login screens, etc., each with their own dimensions in the same document. I’ve also found it handy to include a “slicing” page in the document whose only purpose is to isolate graphics that otherwise might be too difficult to slice in their native context.

Master Pages

Something I couldn’t live without in the print world, Fireworks makes available to me in the interactive world. Imagine dedicating a page in your project to the common elements of your layout. For example, the header, logo, body background, perhaps the main navigation, are all typically the same across each screen of your project. Throw those items onto a master page and updating them there updates them everywhere. Isn’t this how we work when it comes to development, with template includes and embeds? It’s nice to have that same power in my design application.

Styles

Yes, I know Photoshop has a “Styles” palette. And it works just fine for saving your favorite builds of buttons and such. But the styles in Fireworks are more like your traditional style sheets, and as a result much more powerful.

For example, let’s say your project uses three different types of buttons, depending on how they’re used in the context of your layouts. Each of these button types has their own unique attributes (color, stroke, border radius, etc.). Now imagine these buttons are used in hundreds of places across the many screens of your project, and you suddenly realize one of the button types needs an attribute change. If that button is attached to a style, you simply edit the style and the button updates itself across every screen of your project. Styles can also define text attributes which really comes in handy. We certainly depend on this power when it comes to CSS; we depend on it in the print world; and after using this feature in Fireworks you’ll grow to depend on it in your interactive design application too.

Libraries

Libraries behave in a similar way to styles, but instead of being limited to the attributes of a single object, an item in the Library can be a group of multiple objects. For example, if you have a complex graphic that’s composed of several objects, and it’s used in multiple places throughout your project, you might want to put that graphic into the Library. If that graphic needs to be updated you only need to update it once and it updates itself across every screen of your project. I’ve even gone to the extreme of putting an entire site footer in the Library just so it’s easier to manage from screen to screen. My rule of thumb is put it on a Master page if the item never moves in the layout; put it in the Library if the item might move from place to place in the layout. The Library can also be used for simple things like symbols or custom shapes. You can also decide whether or not you want an item in the Library to be available to all of your Fireworks documents, or only the current document. Is your imagination running wild? It should be.

Stability

Coming from Photoshop, things could only get better in this category. I know people have mixed experiences regarding the stability of Photoshop, but it’s no secret that a good portion of users are always prepared for the worse. For me Photoshop would crash at least once a day on average, and it didn’t matter what version I was running or what model of Mac I was on.

After switching to Fireworks I got through my first day without a crash. The second day, no crashes. I started to get nervous, convinced that a major crash must be right around the corner. It was at least a month of daily use before I experienced my first crash. But guess what? Waiting for me on my desktop was a copy of the most recent state of my file before the crash! Slick. That recovery feature doesn’t seem to work every time, but I’ve now been using Fireworks daily for months and it’s crashed maybe 5 or 6 times. Compared to what I was used to I’ll take it.

Vector Tools

If Photoshop is a bitmap app that just happens to have vector tools, then Fireworks is a vector app that just happens to have bitmap tools. Get used to doing almost everything with vector tools if you make the switch to Fireworks. The things I previously made in Illustrator and pasted into Photoshop I now just make directly in Fireworks. Complex shapes, paths, lines, arrows, and illustrations are all handled with ease. Strokes can be aligned to the outside, center, or inside of a shape’s outer boundary, just like in Illustrator. Heck, you can even make dashed and dotted lines! (A dotted line seems like a silly thing to get excited about, but Photoshop users will understand what the fuss is about.) Fireworks also has it’s own pathfinder palette to help combine, intersect, and manipulate shapes and paths.

It’s not quite as powerful as Illustrator’s, but it gets the job done most of the time. In fact, except for very complex illustrations or projects that need to go to press, I’ve actually grown to prefer doing my vector work in Fireworks instead of Illustrator. But I should point out that although you’re using true vector tools, Fireworks still makes the assumption you’re designing for the screen, and therefore pixelates anything that’s viewed closer than 100%. This is how Photoshop also handles its vectors, as opposed to Illustrator where you can zoom in on an object and it remains razor sharp on your screen.

Layers

My layers used to be so organized in Photoshop (most of the time). In Fireworks they’re a mess. I still can’t wrap my head around the Layers palette in Fireworks. What it calls a “layer” is actually a “folder” containing multiple “objects.” So when you choose “Duplicate Layer” in the Layers palette, instead of duplicating the object that’s selected it duplicates the entire folder of objects.

It took me a while to figure out that copy/paste was Firework’s equivalent of Photoshop’s “Duplicate Layer.” And you know how in Photoshop you can select multiple objects in the Layers palette and choose “New Group from Layers” which puts all of the objects in the same folder in the Layers palette? That’s super handy. Well you can’t really do that in Fireworks. Instead you can select multiple objects and “Group” them, but that combines the objects to a single item in the Layers palette which can’t be expanded like a folder can. But thankfully Fireworks makes it so easy to select and interact with objects directly on the page that you can all but ignore the Layers palette for most things if you want to. Still don’t like the mess though.

Color Palette

Some really weird things going on here. You see, Fireworks actually has a decent (but not great) Color palette. It has your typical color models to play with, and also some unique features like a color mixer and a color blender interface. But here’s the problem. Let’s say you have an object selected on the page and you want to change its fill color. As expected you’d click the “Fill Color” icon. But instead of getting the Color palette you get this cheesy, 1998 web safe swatch palette. Why? I have no idea.

As a result the decent Color palette remains buried in the interface untouched for the most part. You can at least add colors to the cheesy swatch palette, but still. The only saving grace is when changing the color of an object you automatically activate the Eyedropper tool. So after you establish your project’s color palette you can basically ignore the cheesy swatch palette if you want and just sample colors from your existing objects.

So obviously layers and colors aren’t my two favorite things about Fireworks, but hopefully you’re starting to get a small taste of what to expect when making the move from Photoshop. I think that’s a healthy start for Part 1 of this series. Stay tuned for Part 2 where I’ll discuss among other things layer styles, text rendering, and compatibility issues. Until then, happy designing!

Swiss Theme for NetNewsWire

2011-06-07T23:09:17+00:00

I enjoy using a variety of RSS readers on the Mac, but the power user in me keeps coming back to NetNewsWire. It’s recent acquisition seems to promise a bright future for the app on both the Mac and iOS platforms. If you’re a fellow NNW user you might enjoy this Swiss-inspired theme we whipped up for the app.

Type

It almost goes without saying that we used Helvetica for this theme (Helvetica Neue to be exact). For the body text we experimented with different combinations of font size and line height (using CSS, not print terminology here), trying to find the sweet spot for an app whose main purpose is reading. We ended up settling on a 14px/24px size to height relationship, which is normally a bit loose in other contexts, but seemed to be a comfortable fit here.

Colors

Being a Swiss theme we wanted to stick with red, grays, and white. Too much red would make it hard to read for any extended period of time so we limited red to links only. We used gray for the body of the page, and wrapped the main content in white. We discovered too many graphics within various blog articles that were sliced with a white background in mind, so we felt a white background behind the main content was necessary to cover up any awkward image slicing.

Layout

A good typesetter will define the ideal fixed width of a text column based on the size and line height of the text within. Since NNW allows the user to resize the width of the reading pane, we couldn’t see how a fixed width would work well. So the width of the text column in this theme is flexible, leaving it up to the user to adjust it to their liking. You don’t see rounded corners much in Swiss design, so we made sure they were absent from the theme. Even the midpoints within the author description are square.

Download

If you’ve never installed a third party theme for NetNewsWire before it’s very easy. Simply download the theme using the link below. After unzipping double-click the theme file and NetNewsWire installs it automatically. Easy!

Download the Swiss theme for NetNewsWire here [61 KB].

Download NetNewsWire here.

While we’re at it, if you enjoy using this theme you might also like the Swiss theme we designed for the Kiwi Twitter client. Check it out!

ExpressionEngine Jobs at Director-ee

2011-04-01T15:03:57+00:00

We’ve been working hard together with Ryan Battles to launch a new Job Board over at Director-ee. Our goal is to give Director-ee members (and outside companies) an easier way to make their needs known to the rest of the Director-ee community right on the site. Check it out!

The Zoomable Map

2011-01-18T13:46:24+00:00

Compact, clever, and convenient, the Zoomable Map provides the benefits of a digital zoom in a traditional analog package. Giving a bird’s eye view of the city when first opened, the map can be opened further to zoom in on individual quadrants. Brilliant.

Thoughtboxes

2011-01-12T02:50:10+00:00

The world has its fair share of task management and to-do apps, but Thoughtboxes stands out as a winner. The UI is clean and quick, and its “box” metaphor puts a fresh spin on organizing your thoughts, lists, and tasks. Lots of polish and attention to details throughout the app give evidence to the care and thoughtfulness behind it. I just wish the About Us page provided more information about the human behind the app. Give Thoughtboxes a spin.

What Typefaces Represent the Past Decade?

2011-01-03T02:41:37+00:00

Like certain songs can drum up memories of a bygone era, seeing a typeface in use can be a reminder of the fashion, design trends, and even social climate of those years the type was in heavy use. And since we’re wrapping up another decade of design (please withhold any arguments of whether or not 2010 is the “true” end of the decade), I began to wonder: What typefaces will end up reminding me of this first decade of the century?

But first let’s back up and take a trip down memory lane and look at a few of the decades leading up to where we are now. Mind you these are the typefaces that remind ME of each respective decade. You just may (and probably should) have your own unique selection that triggers memories for you. After all, just because shoegaze music represents the ’90s to ME certainly doesn’t mean those songs will do the same for everyone. But I think the typefaces I’ve picked below are of a broad enough influence that most will be able to relate, and I’ll try to limit the picks to just three a decade. Since I was born in the early ’70s we’ll start there:

The ’70s

My experience of the ’70s was as a child. I remember learning to read, being taught how to open my chocolate milk carton in kindergarten, and of course watching Star Wars. When I see the following typefaces in use, I’m brought right back to those early years of my life:

Bookman

It seems many of the children’s books I read during this decade were set in either Bookman or Century Schoolbook. Seeing either reminds me of the ’70s, but I think Bookman was more distinctive, especially with the use of those alternate swash characters in advertising and everywhere else. There’s been a Bookman resurgence as of late since ITC rereleased it a few years ago in OpenType, swashes and all. And each time I see it I can smell the halls of my elementary school.

Avant Garde

I once worked for a company who hadn’t updated its visual identity since the ’70s. Everything from their logo to their brochures and business cards were all set in Avant Garde. It seemed to be the sans serif of choice for many during that time. Avant Garde had some really unique alternate characters and ligatures which made it easy to make an instant logo. I wonder how many companies designed and launched their new Avant Garde “instant logos” only to discover every other company launching the same thing?

Souvenir

Perhaps Souvenir was given as a free gift to every design and advertising firm in the ’70s because it was everywhere, and used for everything. Even before I knew what a typeface was I’d sort of recognize Souvenir when I saw it in a book or in an ad. It’s popularity definitely spilled into the ’80s.

The ’80s

The ’80s for me was all about The Dukes of Hazard, BMX flatland, and high school. It was also the decade I became semi-serious about design, often sketching out custom alphabets on my Trapper Keepers, as well as designing and publishing my own underground quarterly zine. It’d be easy to say that any ITC typeface represents the ’80s, but I’ll go ahead and pick just 3:

Garamond Condensed

Certainly made popular when Apple adopted their own version of this typeface (Apple Garamond) for use in their visual identity, and flipping through old ’80s magazines shows how popular it was for others as well to use ITC’s version in ads and for headlines. Seeing Garamond Condensed reminds me of rainbow-colored apples and square mice.

Mistral

Mistral reminds me of the ’80s because it seems so many script typefaces in the ’80s sort of looked like Mistral, even if they weren’t. Remember the logotype for the movie Dirty Dancing? It wasn’t Mistral, but it had a similar feel and that’s what I’m talking about. Plus one of the places I worked at had a large set of PMT clipart books from the ’80s, and Mistral must’ve been the only script in the clipart company’s arsenal.

Americana

OK, so Americana isn’t an ITC face, and even though it was designed in an earlier decade it still screams the ’80s to me. I still see it in the wild every now and then, especially in animated GIFs within the chain emails my relatives send me. Usually next to the image of an eagle or something similar.

The ’90s

This decade included my college years, as well as my first positions as a “real” designer working in the “real” world. This was definitely a transitional time in the world of type. You had people like David Carson and the explosion of grunge design shaking things up. I was also a big fan of Carlos Segura and would drool over each T26 catalog that would come in the mail. This decade was a challenge for me to pin down specific typefaces because it seems the trends were more defined in how the faces were used, instead of what faces were used. Which is why my first pick isn’t a typeface at all:

Ray Gun Magazine

So much of design and layout from the ’90s can be summed up in Ray Gun Magazine. All traditional typographic rules and etiquette were removed and replaced with an air of experimentation, as if a new language was being invented on the fly. Impractical and just plain ugly to some, I look back and see this era of design as a sort of purifying, setting up the ’00s as a decade to reestablish the design traditions that truly make sense.

Mrs. Eaves

When Emigre released Mrs. Eaves in 1996, it was like watching a princess walk into a punk rock bar. All the grunge and distressed type of the day was so loud, and Mrs. Eaves made you take note with just a whisper. Mrs. Eaves is one of those typefaces you make up a project just as an excuse to use it.

Officina Sans

For the longest time Officina Sans was the only sans serif I had that looked “modern” to me. My collection of Gill Sans, Eras, Eurostile, etc. was looking long in the tooth, so I used Officina like crazy. To this day that typeface reminds me of freelancing on my Power Mac 7100.

The ’00s

The ’00s? Is that what we call this past decade? These are the years that the internet really took a life of its own. And although I made a few websites in the ’90s, it wasn’t until this past decade that the average person would understand me when I told them I do web design and development. Twenty years from now here are the typefaces I think will most remind me of this first decade of the century:

Myriad

I had stacks and stacks of Adobe user manuals all over my office. This was when you had to buy their software on CD and DVD, no downloads. Those manuals just seemed to collect as I never threw away the old ones when upgrading to the newer versions of their software. Myriad (along with Minion) was the main typeface used in all those manuals, and Adobe still uses it in most of their marketing materials. But I think Apple gets credit for making Myriad a celebrity when it switched to Myriad after using Apple Garamond for so many years. Myriad will always remind me of Apple’s rise to success at the beginning of the century, and it will remind me of troubleshooting Creative Suite issues using stacks of Adobe user manuals.

Gotham

If Myriad was the star of the first half of the decade, Gotham surpassed its popularity in the second half. Its use in Barack Obama’s presidential campaign just sped up the inevitable and made Gotham a household typeface almost overnight. And once Hoefler & Frere-Jones license it for use as a web font we’re sure to see a Gotham explosion all over again.

Georgia

Of course I had to get a web font on the list. There are other browser-safe fonts just as popular, but to me Georgia is just about perfect (my only request would be a semi-bold weight and a subset of lining numerals). With services like Typekit and Fontdeck growing in popularity the future might see less and less of Georgia in use. But that won’t make it any less of a typeface, and to me Georgia will always be the poster child of design on the web for the ’00s.

Those are my picks for the typefaces that represent the past decade to me. It’ll be interesting to see where the next 10 years of type and design take us, and which typefaces rise up to carry the torch as representatives of the decade to come. I’m looking at you, Proxima Nova.

Swatch - A Color Picker for the Mac

2010-12-19T03:14:50+00:00

Swatch by Fuel Collective is a global color picker for Mac OS X. Available from any application, Swatch lives in the menu bar and mimics many of the features you’ll find in the native OS color picker. But besides the obvious advantage of being globally available, Swatch adds the ability to group and save individual “collections” of color swatches. This is a feature I’ve often longed for over the years, and Swatch delivers.

New Twitter Theme for Kiwi Inspired by Swiss Design

2010-11-28T21:17:56+00:00

Kiwi is a desktop Twitter client for the Mac, and I’ve been using it since version 2.0 was recently released. One of the unique “features” of Kiwi is the ability to customize the interface with themes. The Theme API is quite flexible, and uses standard HTML and CSS to control the look of your Twitter timelines. We couldn’t resist designing our own theme, and our first one is called Swiss.

The themes that ship with Kiwi are really nice, but for the most part are very flashy. Our goal with the Swiss theme was to pay homage to the clean and minimalist Swiss style of design. Which meant we put some design restrictions on ourselves: no bevels, no glossy objects, no drop shadows, no gradients, and no rounded corners. Not that a design can’t be “Swiss” if it has any of those things, but those are the boundaries we decided to stay within. For colors we stuck with white, red, and shades of gray. And of course a strict use of Helvetica Neue for the type. Here’s a screen shot:

The only place we broke out of our design restrictions was with the theme’s icon. A flat, 2D icon just seemed too out of place in the context of the other theme icons. So we decided it was the one place we could add a bit of texture and depth to the theme.

If your eyes are looking for a break from the pizazz and flash of other Twitter clients or Kiwi themes, then give Swiss a try. Here’s how:

Download Kiwi here.

Download Swiss here [279 KB].

After downloading Swiss simply double-click the Swiss theme file and Kiwi takes care of the rest. In Kiwi’s preferences, select the Swiss theme from the Themes tab, and you’re ready to go. You can also find other 3rd party themes at the Kiwi Themes site. Enjoy!

U&lc Magazine Back Issues Go Digital

2010-11-21T00:08:46+00:00

U&lc Magazine was published for 26 years, ending in 1999. It was one of my all-time favorite print publications, and its demise signified the end of an era. Allan Haley calls U&lc “the most important typographic publication of its time.” But the good news is Monotype is releasing back issues of U&lc as PDFs, starting with a set of issues from the early 1970s. Load these PDFs onto your iPad, set aside a quiet evening of reading, and be inspired by the genius of yesteryear that is U&lc.

How to Build a Simple Tumblr Blog with ExpressionEngine

2010-11-20T22:39:48+00:00

This is a short tutorial explaining how to use ExpressionEngine to build a simple Tumblr blog, similar to the Journal we use on Shaping the Page. If you have even a foundational knowledge of ExpressionEngine, and know the difference between a channel, a template, and a field group, you should be able to follow along just fine.

Channels

Part of the appeal of a Tumblr-style blog are the variety of dedicated post types for entries, making it quick and easy to post a snippet of information or a link, vs. committing to a full blog post. For our Journal we decided we’d be using five different post types: a full entry, a link, a photo, a quote, and a video post type. Like with most things in ExpressionEngine, there are multiple ways to accomplish this. We considered using a single EE channel for the Journal, and then using categories, or even a custom field to target the different post types. But in the end we instead felt more comfortable using a dedicated channel for each post type. This gave us an easy way to use a custom field group for each post type. Here’s how we named our channels:

Field Groups

Since each channel is used for a different post type, we set up separate field groups for each of the channels. This allowed our Publish pages to have a unique set of custom fields depending on the post type. Here are the five field groups we made, along with the unique custom fields within each group:

Templates

For our Journal we made a new Template Group called “journal.” This is the name that shows up in our URL for all journal-related links on our site. So if you’re instead calling your Tumblr blog a “Notebook” for example, then you should name your Template Group accordingly. Within our Template Group we used 3 templates to render our Journal, named as follows:

In order to simplify our site’s URL structure, we’re using the “index” template to serve the appropriate “journal-main” template or “journal-article” template. We do this by using conditional embeds in the “index” template like so:

{if segment_2 == ""}
{embed="journal/journal-main"}
{if:else}
{embed="journal/journal-article"}
{/if} 

The “journal-main” template is used to render the main page of the Journal where all of the article summaries are listed. Using a single Channel Entries Tag and a set of conditionals we’re able to stream a chronological list of every post type. For each post type we’ve set up a unique HTML structure, and the conditionals tell ExpressionEngine what HTML to use for each post type. It looks like this:

{exp:channel:entries channel="journal-entry|journal-link|journal-photo|journal-quote|journal-video" limit="20" orderby="date"}
  {if channel_short_name == 'journal-link'}
  <div class="link">
      <h2><a href="{journal-link-URL}">{title}</a></h2>
      {journal-link-description}
      <span class="date">Posted on <strong>{entry_date format="%F %j, %Y"}</strong>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{title_permalink="journal"}">Permalink</a></span>
  </div>
  {if:elseif channel_short_name == 'journal-quote'}
  <div class="quote">
      <h2><a href="{journal-quote-URL}">{title}</a></h2>
      <blockquote>{journal-quote}</blockquote>
      <span class="source"><a href="{journal-quote-URL}">{journal-quote-source}</a></span>
      {journal-quote-description}
      <span class="date">Posted on <strong>{entry_date format="%F %j, %Y"}</strong>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{title_permalink="journal"}">Permalink</a></span>
  </div>
  {if:elseif channel_short_name == 'journal-entry'}
  <div class="entry">
      <h2><a href="{title_permalink="journal"}">{title}</a></h2>
      <span class="author">Written by <strong>{author}</strong></span>
      <p>{journal-entry-summary} <span><a href="{title_permalink="journal"}">Read&nbsp;More&hellip;</a></span></p>
      <span class="date">Posted on <strong>{entry_date format="%F %j, %Y"}</strong>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{title_permalink="journal"}">Permalink</a></span>
  </div>
  {if:elseif channel_short_name == 'journal-photo'}
  <div class="photo">
      <h2><a href="{title_permalink="journal"}">{title}</a></h2>
      <img src="{journal-photo-upload}" alt="" />
      {journal-photo-description}
      <span class="date">Posted on <strong>{entry_date format="%F %j, %Y"}</strong>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{title_permalink="journal"}">Permalink</a></span>
  </div>
  {if:elseif channel_short_name == 'journal-video'}
  <div class="video">
      <h2><a href="{journal-video-URL}">{title}</a></h2>
      <div class="video-container">
          <!-- start of embed code -->
          {journal-video-embed}
          <!-- end of embed code -->
      </div>
      {journal-video-description}
      <span class="date">Posted on <strong>{entry_date format="%F %j, %Y"}</strong>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{title_permalink="journal"}">Permalink</a></span>
  </div>
  {/if}
{/exp:channel:entries} 

The “journal-article” template is used to render the full version of a single article. It’s similar to the “journal-main” template, except it’s limited to display a single post, and instead of a summary it displays the full entry for any “Journal-Entry” post types. Again conditionals are used to target the correct HTML to use for each post type. It looks like this:

{exp:channel:entries channel="journal-entry|journal-link|journal-photo|journal-quote|journal-video" limit="1"}
  {if channel_short_name == 'journal-link'}
  <div class="link">
      <h2><a href="{journal-link-URL}">{title}</a></h2>
      {journal-link-description}
      <span class="date">Posted on <strong>{entry_date format="%F %j, %Y"}</strong>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{title_permalink="journal"}">Permalink</a></span>
      <a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>
  </div>
  {if:elseif channel_short_name == 'journal-quote'}
  <div class="quote">
      <h2><a href="{journal-quote-URL}">{title}</a></h2>
      <blockquote>{journal-quote}</blockquote>
      <span class="source"><a href="{journal-quote-URL}">{journal-quote-source}</a></span>
      {journal-quote-description}
      <span class="date">Posted on <strong>{entry_date format="%F %j, %Y"}</strong>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{title_permalink="journal"}">Permalink</a></span>
      <a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>
  </div>
  {if:elseif channel_short_name == 'journal-entry'}
  <div class="entry full">
      <h2><a href="{title_permalink="journal"}">{title}</a></h2>
      <span class="author">Written by <strong>{author}</strong>&nbsp;&nbsp;|&nbsp;&nbsp;<strong>{entry_date format="%F %j, %Y"}</strong>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{title_permalink="journal"}"><strong>Permalink</strong></a></span>
      {journal-entry-body}
      <span class="entry-tweet"><a href="http://twitter.com/share" class="twitter-share-button">Tweet</a></span>
  </div>
  {if:elseif channel_short_name == 'journal-photo'}
  <div class="photo">
      <h2><a href="{title_permalink="journal"}">{title}</a></h2>
      <img src="{journal-photo-upload}" alt="" />
      {journal-photo-description}
      <span class="date">Posted on <strong>{entry_date format="%F %j, %Y"}</strong>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{title_permalink="journal"}">Permalink</a></span>
      <a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>
  </div>
  {if:elseif channel_short_name == 'journal-video'}
  <div class="video">
      <h2><a href="{journal-video-URL}">{title}</a></h2>
      <div class="video-container">
          <!-- start of embed code -->
          {journal-video-embed}
          <!-- end of embed code -->
      </div>
      {journal-video-description}
      <span class="date">Posted on <strong>{entry_date format="%F %j, %Y"}</strong>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{title_permalink="journal"}">Permalink</a></span>
      <a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>
  </div>
  {/if}
{/exp:channel:entries} 

We could take these templates even further and break up individual components into EE Snippets or Global Variables to have avoided needing to manually duplicate chunks of code between the “journal-main” and “journal-article” templates. But they’re easy enough as-is for us to manage, and we don’t plan on needing to make many edits to these templates in the future.

Now add your own CSS and you’re ready to start publishing your content! This setup has worked really well for us, and we hope it can be at least a helpful starting point for others who are interested in doing the same thing with ExpressionEngine.

Director-ee Gets Some Love

2010-10-28T05:04:19+00:00

Since Director-ee was launched earlier this year, Ryan Battles and I have been keeping a list of features and improvements we’ve been wanting to add to the site. But client work has kept us too busy to give Director-ee the attention it deserves. So we finally decided to pull an all-nighter, locking ourselves in the office, turning off email, chat, etc., and focusing uninterrupted on Director-ee. As a result we were able to knock out a few of the items on our list, and I’m excited to tell you about some of those updates here.

Skills Listing

On each member’s public profile page we now display a list of the member’s top five skills they specialize in. This listing is in the profile sidebar. We realize that everyone on Director-ee does more than just EE development, and flaunting your areas of expertise can be helpful when trying to pair up with another developer or potential client. So be sure to add your skills within your Profile Form.

The Skills Matrix

Besides listing members’ skills on the public profile pages, we wanted to make it easier to globally search for other members based on a desired skill set. So we’ve added The Skills Matrix to help do just that. The matrix lists all of the individual skills represented on Director-ee. Choose the combination of skills you’re looking for and see who fits the bill!

Availability

Sticking with the theme of helping members find the right person to partner up with, we’ve added an availability status for each member. Your status will appear as an icon on your white mini-profile badge, and as a line-item on your public profile page. Hopefully this will help filter out those who are available to help with tight deadlines, vs. those members who would be a good fit for a project that’s further down the road. Again, your availability can be set within your Profile Form.

Company Name & URL

Our main focus with Director-ee has always been the individual people that make up the EE community, as opposed to promoting the companies we all work for. That being said, we did feel there was a missing element on the public profile pages for people who would like to at least mention their companies. We’ve noticed that some members have even put in their company names in place of their personal names, which is fine. But we thought giving people a dedicated field to mention their company, along with a link, might be appreciated. So within your Profile Form you’ll find some new fields for your company information. After filling out these fields, your company name and link will be displayed on your public profile.

Search

We’ve reworked our global search to use Solspace’s Super Search. The awesome flexibility of this module will hopefully return higher quality search results. For example, when searching for someone’s name, the results will first list those who have first names that match, followed by matching last names, followed by location matches, etc. The URLs of search results are also much friendlier, for those of you that like to hold onto search results. We’ve also taken advantage of Super Search in the skills matrix, by giving results of the highest relevance the highest priority in the results list. For example, those members with two of the desired skills will appear higher in the results list than those with only one of the desired skills. And those who have matching skills listed higher in their personal skills list on their profile page will be listed higher in the results than those who have matching skills listed lower in their personal skills list. We’re still working on incorporating availability into the criteria for skill-based search rankings, and we have some other visual elements we’ll be adding to the results page to make it a bit more user-friendly.

What’s Next?

We’re excited with what we were able to accomplish, but actually we barely made a dent in our list. Besides some site optimization and cleaning up of code, next on the agenda are some features that will make it easier for members, or even potential clients, to post information about projects they need help with. This will allow those interested in the community to come to them, rather than the person in need searching the community. We’ve also been asked about advertising from a few vendors. We’re considering it. If you’re interested in advertising on Director-ee give us a shout. If there’s enough additional interest we might make it a priority. There are plenty of other items on the list, but we’ll save those for another time. I think most of all we’re interested in hearing from the community what features they might like to see within Director-ee. So if you have ideas let us know!

Maki App

2010-10-22T19:28:42+00:00

Maki is a neat web app by Bearded Studio that allows you to overlay your static design comp as a transparency on top of your live web page. This helps in making those fine CSS adjustments, so your design comp and live page can be a match made in heaven.

Lettering Dot JS

2010-10-20T12:26:06+00:00

While marking up the splendid Lost World’s Fairs for a recent IE9 demo, Dave Rupert and Trent Walton developed a handy little jQuery plugin called Lettering Dot JS. If you’ve visited the Lost World’s Fairs you’ll notice the purposefully intense use of web type throughout the designs. Within a given element, Dave and Trent’s plugin essentially auto-wraps each letter with a custom span and class, making it easy to target each letter for individual styling. Besides easy maintenance and keeping your working markup clean, there are some other benefits of the script worth checking out on Dave’s site.

Dust-Me CSS Tool

2010-10-03T21:18:32+00:00

This Firefox add-on has saved us so much time. It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. Would love to see this feature built into Coda, Espresso, etc.

Typeface Memory Game

2010-10-03T00:28:14+00:00

Saw this one on the BIS Publishers site. It’s a memory card game with the goal of recognizing and matching typefaces. This would be perfect for our kids, especially since I already quiz them on what typefaces are used in their children’s books. I think they might grow up hating type because of me.

Thinking with Type

2010-10-01T16:19:26+00:00

Author Ellen Lupton has released her already classic book Thinking with Type as a website. And it’s not simply a catalog of PDF files. The book has been completely repurposed for the web, with a user-friendly navigation system and layout. And of course the typesetting is beautifully done, using Fedra Serif as the live web type throughout. Check it out.

Linotype: The Film

2010-09-21T15:21:08+00:00

Type geeks rejoice! Linotype: The Film is a documentary about Ottmar Mergenthaler’s amazing Linotype typesetting machine and the people who own and love these machines today. Can’t wait until this one is released.

CSS3 Machine

2010-09-19T13:12:49+00:00

It seems like a long time since tools like CSSEdit, or even Coda’s native CSS editor, have received any major feature updates. But CSS3 Machine is like a CSS editor from the future. Still trying to wrap my head around the iPad/desktop workflow, but the simplicity of the UI for generating CSS3 effects looks exciting. Building some of these features into CSSEdit or Coda could be a dream come true.

Dipping Our Toes Into HTML5 and CSS3

2010-09-16T01:09:03+00:00

The redesign of Shaping the Page is the first full site we’ve marked up using HTML5. The new site actually started as XHTML because we didn’t think we’d have the time to really get our heads into learning something new, and couldn’t afford to have HTML5 slow us down. But after reading Jeremy Keith’s tiny book HTML5 for Web Designers, we had a new boost of confidence. And what better place to practice than on our own site?

We found HTML5 to require a bit more planning due to the additional semantic layers involved. What group of information on the page warrants its own section? When should we mark something as an aside? How many footers are actually on the page? Questions like this didn’t come up in the land of XHTML. But we found the additional semantic layers actually forced us to think about our page structures a little deeper than before, and that’s a good thing. We also feel like the proper use of certain elements are still up for debate. We can foresee the lengthy comment threads, where web developers go back and forth on whether or not a particular grouping of content should or shouldn’t be a footer. On our site we used our best common sense to make those kind of decisions, and perhaps we’ll adjust things as we learn more.

Some other resources that came in handy were HTML5 Reset and HTML5 Boilerplate. Both of these sites offer default HTML and CSS templates as a starting point for building your HTML5 sites. Very helpful.

We also took our first stab at CSS3 animations. Ours are very simple, and you’ll only see them if you’re using a webkit-based browser like Safari. Each one of our origami animals on the site perform a unique behavior when hovered over. The elephant raises his head. The butterfly spins. And the bird and kangaroo both jump up. The animations were easy to implement, although we’re trying to solve what looks like a screen flicker when the page is scrolled and the animals are hovered over. We’ve seen the same problem on other sites, and if we find a fix we’ll post it here.

We like HTML5, and didn’t come across any major snags building our site. We still need to make some tweaks for visitors using Internet Explorer, but that’s always the case. Will we use HTML5 for our client work? I think it will depend on the client, who the audience is for the site, etc. But from now on we definitely won’t shy away from it, and we’ll start looking for excuses to use it!

Low Reorder for ExpressionEngine

2010-09-15T16:42:04+00:00

Here’s a quick plug for an ExpressionEngine add-on that’s really come in handy. We were looking for a way to manage our Shaping the Page portfolio entries for quick and easy reordering. The traditional way is to edit the individual entry dates, or edit a custom field, for each entry. That works, but is time-consuming. Low Reorder provides a drag and drop UI to reorder the display of your channel entries. It’s quick and slick, and works perfectly.

Shaping the Page Gets a Redesign!

2010-09-15T16:41:37+00:00

After weeks of sneaking in moments late at night and in between client projects, we’ve finally launched our new site design! We’re quite excited about the results. We’ll have a full journal post soon explaining some of the details of the new design. But for now you might be interested to know that this is our first site marked up in HTML5, and it’s our first site built on the newly released ExpressionEngine 2. Lots more to share coming soon, so enjoy browsing around as we clean up some of the remaining rough edges.

Thank a Teacher

2010-09-15T16:40:12+00:00

Sonja Jacob from The Cultivated Word writes and produces some incredibly inspiring animated videos, including the well-circulated Entrepreneurs Can Change the World. This is her latest called Thank a Teacher produced for Mudpies and Butterflies. Well done indeed.

The Kick Awesome Show Is, Well, Kick Awesome

2010-09-08T19:58:11+00:00

I listen to a lot of podcasts, but rarely do I have time to sit down and watch one. But lately I’ve gone out of my way to catch the The Kick Awesome Show. Jonathan Longnecker and Nate Croft over at FortySeven Media produce the show, and do a dang good job. Some nice tech tidbits, ExpressionEngine conversation, and music picks make the show worthwhile. But their personality and humor are what keep me coming back for more. Keep up the good work guys.

Sketch 1.0 Rolls Out

2010-09-07T19:39:54+00:00

I’m always keeping an eye on Bohemian Coding and their design software. Being the little guy they aren’t afraid to experiment with new approaches to UI for desktop design apps. Sketch, a new vector drawing tool, has been released, and delivers some nice surprises, including one of the slickest grid settings I’ve seen in a design app.

Birks on the Beach

2010-09-06T20:00:35+00:00

On a recent trip to Maine I snapped this photo of my faithful 16 year old Birkenstocks resting on the beach. It was completely spontaneous. I looked up, there they were, pulled out the iPhone, and took the shot. The photo is untouched, and the highlights are a bit blown, but I love the feel of this scene. If you’ve ever been to a beach in Maine then feel free to insert the appropriate sounds and smells.

Spreadable Is in Beta!

2010-09-06T19:49:53+00:00

We’ve been working hard with the team at Grasshopper Group Labs on their newest product, Spreadable. It’s an online tool designed to generate buzz about your brand and increase word of mouth referrals. Spreadable is now in beta, and they’re collecting beta signups at this very moment. A big congratulations to Grasshopper Group. Now go get in on the action and give Spreadable a test drive!