Category Archives: Wireframe

About the Book – Designing Interfaces

Designing Interfaces: Patterns for Effective Interaction Design is an intermediate-level book about interface and interaction design, structured as a pattern language. It features real-live examples from desktop applications, web sites, web applications, mobile devices, and everything in between. This site contains excerpts from some of the book’s patterns. The book has more, of course — more introductory material, more patterns, and more examples. Naturally, I’d like you to buy it! But this material has been on the Web for a while, and I’d like to keep it here.

via About the Book – Designing Interfaces.

Grid System Generator

Grid System Generator.

tadpole adaptive

Working on a new site:

aaearhart

Look and feel for tadpole adaptive

The logo was fun to design :)

aaearhart

tadpole adaptive logo

aawerks

Trying to find the best design for a&awerks websight. Started out with something a little high production and implemented it in the “Coming Soon” page here

Coming Soon

Coming Soon


The serif fonts and the gears are something I’m looking to maintain. To me, a serif font is industrious, professional and consistent. The gears and cogs are a further representation of “industrious” and more towards hard-working and technically inclined.

Built up the “steel version” under the high production look of the Coming Soon page. The layout is a good one, but we don’t feel it’s right for our purposes. I could tweak it some more, but … the layout just isn’t right for the project.

Steel Version

Steel Version

Changed the logo to just the cog and started working with a simpler, more white-spacey layout but it’s too open. I abandoned it.

The simpler cog

The simpler cog

But this is the best. The colors just happened and I got the chance to make another robot. The layout is open but not empty. One page website. Exercises all the programming I can swing and it’s neat.

Bobot and a & a werks

Bobot and a & a werks


Turns out CS3 implemented all this fun spry stuff via javascript and jquery. It’s getting me learning jQuery like I want and … well, looks great.

tangerine

nice and simply clean layout

nice and simply clean layout

Layout 05

Web 2.0 layout from nettuts I think. I lost the link, but here’s the original and my markup. Use the link at right to view demo.

Web 2.0 original

Web 2.0 original


and mine
My HTML/CSS markup template

My HTML/CSS markup template

Layout 04

Based on the “Elegant website layout” on monstertuts.com, I drafted up a front page css template. See links at right for demo.

Original from monstertuts.com

Original from monstertuts.com


My css/html template

My css/html template

Wireframes

Finally some progress. chicagoHouse and sandStone are both framed out. Solved my :hover issue. Turns out it was a conflict between the ul padding and the li padding. Reconciled it and am very happy with the results. Kicked them both out in template form.

chicagoHouse
sandstone

Next Up: One Site, One Page and something new