Making Quicker Interface Decisions With Design Patterns
A Brief Explanation of Design Patterns:
As web design matures and evolves, the collection of web design best practices grows with it. There are best practices for readability, markup, accessibility, usability, on and on and on. As designers, we look to keep our design approaches creative and fresh while at the same time knowing when not to screw with these established practices. These "practices," especially in the realm of user interface design, are often referred to as "design patterns."
A couple of the many definitions for a design pattern:
- A generally repeatable solution to a commonly occurring problem.
- An optimal solution to a common problem within a specific context.
Common user interface questions for which design patterns are well established:
- When I want to filter content on a page, what are the most usable approaches I can take?
- If I want to rotate through features, images, or news articles on a page, what are some proven solutions?
- What are the most effective ways to include error messaging in my web forms?
- What are the most common approaches to designing rating systems?
You get the idea. These, and hundreds of questions like them, have been hammered out, time-tested, and answered by many designers, developers, and ultimately, web users. They may get tweaked, and they will improve and evolve, but the most solid current solutions are well documented and readily (and visually) available for your perusing.
Solid Design Pattern Resources:
Fix It Fast: Rapid IE6 CSS Debugging
IE6: We all hate it, and we all have to work with it (well, most of us). The most frustrating phase of buildout is often the final struggle with this Browser From Hell, but maybe (just maybe) we're struggling too much. When I help friends with IE6 bugs, I'm sometimes surprised at how long they've been stuck on a single problem, or how they've painted themselves into a corner with hacks and fixes. Then I remember that I used to be like that, grinding away for hours at simple float issues, or pulling my hair out over list spacing.
Why do we have so much trouble learning to debug for IE6?
We don't know! There are a lot of bugs out there, and it takes a while before you can intuitively spot them. If we can't identify a behavior, it's easy to throw up our hands and say "Augh, it's just BROKEN!"
We don't want help! Many a designer has spent hours on a problem simply because they didn't ask for help or Google it. With a language as straightforward as CSS, you can eventually solve most problems just by blindly changing stuff (over and over), but changing stuff doesn't mean you're learning.
We're not sure how to start! Debugging is a weird process: At any point, you could come across THE SOLUTION, which would be GREAT, and it always seems like it's JUST AROUND THE CORNER. This constant bait-and-switch means that we don't settle into a solid process for debugging, which, in the end, means debugging can take much longer than it should.
So, is there a way to shortcut through some of the hair-pulling and learn good debugging right from the start? MAYBE. The following is my cycle of preventing, catching, and fixing bugs in IE6. If I could, I would email it to myself in 2004, but until I figure out how to do that, posting it here will have to do:
Design Share 2: More With Less
Delivering on our promise to make the Design Share into a series we recently wrapped up the second event. We stuck with our original format… mostly. Each presenter was still tasked with a 5 minute limit on their presentations with just under 10 minutes slated for question and answer. In short, we rotated speakers every 15 minutes. Based on feedback from the previous event we reduced the number of presenters from 6 to 4 resulting in an hour worth of presentations. At the end of the hour we added a 20 minute, panel-style Q&A. All in all, making for a nice sampling of work in a single evening.
Displaying Your FeedStitch JSON Feed Using jQuery
In this post I'm going to show you how to display your FeedStitch feed on your site using a few simple lines of jQuery. FeedStitch is a site we made to allow users to aggregate feeds quickly and easily, and then offer various output options for the feeds users create. When FeedStitich first launched Mark Cornick wrote about parsing FeedStitch’s JSON feed with plain old JavaScript. As he pointed out, his example was just one way to do it and is less bulky than including the entire jQuery library, but it is a little more complex for people not accustomed to writing straight JavaScript. The designers here at Viget use the jQuery framework for most of our JavaScript needs so we usually have the library loading into most of our sites anyway. One of the great features in jQuery is that it can easily parse JSON feeds using the $.getJSON() function. This is something I have touched on before in my previous post about pulling your Flickr feed.
For this example, I made a FeedStitch feed with all the Viget blogs aggregated into single feed. If you go to a FeedStitch feed, you can grab the JSON feed at the very bottom of the page (next to the RSS feed icon). When looking at the raw JSON feed you'll probably see a mess of all kinds of variables and text, but here is what the beginning of the FeedStitch JSON feed looks like if we format it nicely:
Continue reading "Displaying Your FeedStitch JSON Feed Using jQuery"
Cufón Font Replacement - The Good and The Bad
As soon as designers got ahold of the web as a design medium (probably about 15 years ago), they were thinking about fonts, right? (It was at least in the top five on the "first things to think about" list). So, in an age where tens of thousands of fonts have been invented, why are we mostly still using the same six?
Techniques like image replacement and sIFR have done us well. They remain the strongholds until something better comes along -- which may have just happened: namely, I'm talking about Cufón by Simo Kinnunen.
Cufón (I'm pronouncing it "koo-fon") is a font-replacement technique that uses javascript and vector graphics to write fonts from a font file (TTF, OTF or PFB) to your browser. It's easier/safer to use than sIFR and lighter on size than image replacement, but has the same copyright issues as both.
Continue reading "Cufón Font Replacement - The Good and The Bad"
Portfolio Reviewin’, Thoughts and Ideas for Design Students
Deep in the heart of Georgetown lies the Center for Digital Imaging Arts (CDIA) an extension of Boston University's applied arts school. I was recently asked to participate in a portfolio review of some of the school's upcoming web design graduates along with representatives from a few other fine agencies in the DC area. Among other options the school offers a Graphic and Web Design Certificate to help get future designers a leg up in pursuing their passions. I've been really impressed with the school's outreach into the local community. They seem to 'get it' and the students are smart to have connected with the school to jump start their careers.
CDIA Student Portfolios:
- Erin Feliciano: http://erinfeliciano.com
- Pol Klein: http://polklein.com
- Laura Heffelfinger: http://ldhcreative.com
- Corey Clark: http://cclark1.cdiaweb.com
- Daniel Dominguez: http://www.coldfrontdesigns.com
- Jill Cockerham: http://www.jillcockerham.com
- Ronit Rosenthal: http://ronitrosenthal.com
- Theresa Stephens: http://tstephensmedia.com
- Charlotte Vazquez: http://spellsoup.com
- Amanda Kirby: http://amandakirbydesign.com/html/index.html
Continue reading "Portfolio Reviewin’, Thoughts and Ideas for Design Students"
jQuery + Type + You.
Once a month, two designers at Viget put together a presentation for the rest of the design team. Sometimes it's on finding inspiration, sometimes it's on new ideas or initiatives, and sometimes it's just a fun little knowledge-sharing presentation.
The following is one of the latter: A simple presentation I put together with some jQuery plugins to demonstrate the various ways jQuery can interact with type on the web.
You can view it here (click the headers to advance slides).
Topics Covered
- Keeping a vertical rhythm
- Removing "widows"
- Ampersands, ligatures & special characters
- Typographic animations
- Font detection
Recent Comments
Hi Doug!
I just want to print this article :) But the print version is yet to be fully polished. I hope you guys spend sometime :) Viget inspire is a really nice resource for me....
- Lance on 'What To Expect When You're Expecting CSS/HTML Handoff'.
- Erik Wallace on 'What To Expect When You're Expecting CSS/HTML Handoff'.
- Jonathan on 'Switching Mindsets: From WordPress to ExpressionEngine'.
Subscribe to Comments RSS