Read the previous talk in this series, Designing the Details: Web-App UI Design Beyond the Basics by Jason Fried, or view An Event Apart’s Table of Contents

Underpants Over My Trousers

Andy Clarke

• A design related talk
• Comic book analysis- the transcripts of the comic from the writer
• “Final panel on this page, and it extends across the entire bottom tier of the page” – this is clearly a direction from the writer to the designer. This doesn’t happen anymore on the web.
• Don’t buy a CSS book, go buy “Understanding Comics”, to greatly influence web design.
• Eliminate the borders, and your eye extends beyond the normal bounds. In doing so, the reader will allow more time to read that block, as the amount of time to read a section of text (particularly with comics, the entire slideshow is comic screenshots) is bound to the size of the block that it is in, or without borders, it then extends to the boundary of your comic book or screen.
• How many divs for this?
• None. It’s a UL of news items. Code, replete with markup
• We can do lots of things inspired from comics to help people find their content. 
• Sort of break away from the grid approach, although the grid is still there, but just much more subtle. Looks less griddy.
• How do we draw the eye? Comics use speech bubbles. Web can use images. 
• We don’t build up suspense and drama for the web.
• Watchmen : pages 4 and 5 of slide PDF. 
• Kinda like splashpages. Forget what we used to think about them, they used to be front covers. No, instead make them front covers with content, explanatory and introductory.
• How much of your design process do you reveal to the client?
• Hardly at all. People don’t care about how, they just want to see the end result. That’s more a conversation you have with your peers more than you delve into with your client.
• Andy Clarke shows clients fewer Photoshop markups, he shows a working prototype.
• He deals with being a 1(to 2 to 3)-man shop by setting expectations properly in the beginning, so they don’t think you’re a 20 person company, and also have a good workflow and collaboration with the others in your setup.

View the next talk in this series: Special Adobe Session: Web Workflow with the Adobe Creative Suite by Adam Pratt, or skip to An Event Apart’s Table of Contents

Read the previous talk in this series, Storytelling by Design by Jason Santa Maria, or view An Event Apart’s Table of Contents

Design Criteria: Actionable Ideas

Sarah Nelson

• Design Criteria are: a set of 5-7 short, memorable strategic directives your team can use to focus design activities. And… design criteria emphasize specific rules your team will follow when tackling the problem at hand.
• Working within constraints: contraints are freedom.
• Constraints help us to:
• generate ideas
• evaluate ideas
• make decisions
• move forward
• Sarah Nelson hates the phrase “Think outside the box.” She prefers “Innovation”. 
• The box helps innovation. The box is a constraint, and it engenders innovation.
• In her dream world, she would work alone, create the box, and no one would have to know the box except herself. 
• Unfortunately, not one person has the box. Everyone has a small piece of this box.
• To make the implicit constraints explicit… Design Criteria!
• The Creative Process
• Every creative process goes through the same arc: divergence to convergence
• Say, planning a trip… Divergence: Pull out the list, where can I go on vacation? I can go to 27 places, but let me narrow it down through this following convergence stage. Brainstorming = divergent. Narrow = convergent.
• Examples of Design Criteria:
• Diabetes study
• Google calendar
• set out a vision statement  before even starting (vision statement, design criteria, same-same)
• design criteria item: “Drop dead simple to get information into the calendar”. It’s constraining, but it’s not super-duper constraining, like “Must add an item within 3 clicks.” That’s just silly. Get the point, and leave it at that: “Drop dead simple”.
• Having that written gives you justification for making a specific type of design decision. Goes back to Zeldman’s previous talk, of creating a paper trail so you have a foundation to go back to with the client.
• Flickr
• http://www.flickr.com/about/
• Very simple goal, and keep in union with that
• PayCycle 
• “We need to increase conversion rates” – this is not actionable! Need to have something actionable!        
• photo of all the papers around the office – those were all the steps in the set up process. People were failing to follow through because it was such a monster.
• Is primarily a wizard, you go and go and go.
• Their criteria that was bad:
1. Be Human
2. Work the way your customers do
3. Set expectations
4. Show progress
• (These things aren’t really that actionable)
• The design criteria Sarah wrote:
1. Come from anywhere
2. Start from the start
3. One brain, many brains, one brain
4. Art, not science
5. Support with evidence
6. Criteria everywhere
• Art, not science
• Don’t make things too open-ended but not too concrete.
• Support with evidence
• Show progress. “Everything is like, next, next, next. It never says ‘You’re almost finished’”. Let them know where they stand.

View the next talk in this series: On-the-Spot Usability Reviews by Robert Hoekman, Jr., or skip to An Event Apart’s Table of Contents

Read the previous talk in this series, "Debug/Reboot" by Eric Meyer, or view An Event Apart’s Table of Contents

Storytelling by Design

Jason Santa Maria

• How does a design tell a story?
• Graphic resonance: from a young age, we look for meaning from images.
• The atari game "Haunted House" – cheesy atari game, and the creepy image for the cover art. The cover art sets the mood, and it fills in the gaps where the graphics cannot achieve in its 8-bit glory.
• The designer is the narrator – helping fill in the gaps with imagery.
• Compare: the text version of the Spam King article to the print. The print you get a feeling… the text, there's no feeling. It has been distilled to content, and it has lost a lot of its meaning behind it.
• "Design can't not communicate" – David Carson, Helvetica
• Our logos look the same – all the talk logos. Our designs look the same – no one complains about them.
• "It is a plague [of sameness]." – Jason Santa Maria
• How can we create awesome design when we're limited to 5 typefaces? We're capable of telling a story, type is one way of doing this, but how can we present this to the web?
• In old time, they were limited to maybe 5 types and only a few sizes, yet beautiful design was made. Are we just not designing hard enough?
• Base a design off of ratios (like the golden ratio: 1.618:1). You create a visual language, a visual cohesion. Whether they can tell or not that you're using a ratio, it is a natural, cohesive, subconscious thing.
• Utilize rule of thirds? Creates tension, interest, but applicable?
• Utilize them, but they don't apply in the same way. Rule of thirds relies on dimesion – can't predict it or count on it, cannot count on width. Cannot really work – they may not see the whole width of the page, they could only see a portion.
• "No One Belongs Here More Than You" – breaks all the rules, but still sucks you in. Tells such a great story. It's the story that makes this site reign.
• http://www.fray.com – no real consistent design through the site, but each story has its own feeling.
• Shows lots more examples:
• abriefmessage.com
• principlesofbeautifulwebdesign.com
• ESPN e-ticket (find through google search)
• Each article has unique mood, unique design
• wetellstories.co.uk
• jasonsantamaria.com
• Designed with the ability to throw stuff in to change up the design. Simple CSS values – not difficult to do technically, but just a matter of well-planning the front end
• Trying to disprove the theory that it takes forever to make swappable design.
• Jason's article on "Shake it like a metaphorical".. polaroid.
• Can't make a completely new site each time, it's not a completely new page liek the ESPN stuff, but the primary content has freshness. Let the design come out.
• Photography
• "Written with light"
• People weren't getting what was happening or what the good of photography was. But they get the easy message "written with light". They don't care about the technical aspect of why it is made.
• Jason's CMS: Expression Engine
• Getting the content online is not enough. There needs to be greater consideration to what we put online – more thought in uniting the content with the design.

View the next talk in this series: Design Criteria: Actionable Ideas by Sarah Nelson, or skip to An Event Apart’s Table of Contents

I dabbled with it here and there, the hot wastes of time that it is. With the advent of Beacon and its intrusive nature, I seriously began to consider deactivating my account. I did not take action until reading The Anonymity Experiment – one week experiment with the notions of conspiracy theorists and their guidebook to keeping under the radar.

In Facebook’s “My Account” page, you can choose to deactivate your account. Click first screenshot here to view the form (along with my diatribe to Facebook), but note two features of this form. First, every option to deactivate your account pops up a corresponding sales pitch. Wow. Does their revenue really depend on the number of active accounts? Are you trying to guilt me into keeping my account?

Second, and even more important, I must delineate two sub-gripes regarding the fine print of the “Opt Out” checkbox.

1. Sub-gripe a: Why am I checking a box to opt out of maintaining communication with an organization with whom I have deactivated my account? Opt In is the appropriate default: check to Opt In to maintain communication. The very nature of deactivation is a separation of person and application.
2. Sub-gripe b: Facebook is deleting nothing! They are muting my account, not deactivating it. Click thumbnail here for full sized deactivation message. If at any time you say, “hey, you know what, I really screwed up Facebook. I think I’d like to have my account after all. But woe! I have deleted it! All those friends I shall have to re-friend!” You know what I say to that? TOUGH COOKIES! You deactivate your account, you don’t deserve to keep all those friends. Yeah, maybe next time you’ll be more careful when you click that “permanently deactivate my account”.

   Is this what is happening, though? No. Instead, I mute my account, and I just have to log in like normal to access all of my old information.

So deleting isn’t really deleting, so what is deleting? Well, the help section has a handy option, “How do I delete my account?”, which directs us to fill out the contact us form and request an account deletion.

I have filled out such an email, pasted below (along with my diatribe). I will keep you posted on the Facebook account deletion progress. I anticipate no issues, due to previous outcry on the web resulting from the woe of account deletion – I gather Facebook has more or less streamlined the process.

:days pass:

I received a message from Facebook informing me that my profile and account details have been deleted. Moral of the story: deleting your Facebook account is not a big deal anymore. Just use the contact form and they take care of the rest.

Update April 4, 2008 I just discovered that Facebook did not delete my account, rather, they disabled it. Just for fun, I decided to try logging in to see what happens. Much to my chagrin, it was not deleted, but disabled.

See more at the upcoming blog post.

Jeremy Keith is speaking at Chicago’s event. Jeremy Keith rocks – I have learned more about JavaScript and AJAX from Jeremy Keith’s books than I have in all my time coding sites.

Dan Cederholm is also speaking, as well as the event’s co-founders Eric Meyer and Jeffrey Zeldman.

This is a must-see event for fans of A List Apart. Buy your seat soon, early registrants receive a $100 discount!

detergent 2.0
Originally uploaded by neatlysliced.

I saw this and thought, how wild that web 2.0 design trends are bleeding into mainstream marketing.

The answer, although not utilizing ideal semantic design in the XHTML tree, resides in a nested div in the main content column.

View it in action!
I always name my sidebar div id "secondary-content" and my main content div id "primary-content". To create this effect, I created an id "primary-content-inner" inside #primary-content.

The thick border and margin-left styles are applied to #primary-content. However, the margin-left negative margin must increase by the width of the additional thin border (the black border in my example). In like manner, the width of #primary-content-inner must be reduced by the width of the additional border. #primary-content-inner carries the style for the additional thin border (as border-left here).
You also must apply the thin additional border to #secondary-content - a border-right in my example. You must add it here in case the sidebar is longer than #primary-content.
The only catch I could discern is that you must set your p tags to margin-bottom:0;. If anything inside #primary-content-inner has a margin-bottom, the thin border will not extend to the bottom of #primary-content, as the margins are outside of the borders. In effect, you will be making #primary-content larger than #primary-content-inner by the height of the margin-bottom of the last element, and thus your borders will not align.

The CSS:

The HTML:

PLAIN TEXT
HTML:




<div id="container">


   <div id="primary-content">


      <div id="primary-content-inner">


         Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


      </div><!-- /primary-content-inner -->


   </div><!-- /primary-content -->


   <div id="secondary-content">


      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


   </div><!-- /secondary-content -->


</div><!-- /container --> 

View it in action!

The HTML:

PLAIN TEXT
HTML:




<div class="image-unit">


   <a class="image" href="#">


      <img width="125" height="127" alt="Yum!" src="http://blog.neatlysliced.com/orangeslice.jpg" />


   </a>


   <a class="num-links" href="#">9 Links</a>


</div> 

The CSS:

(I'll comment explanations on pertinent lines)

.image-unit is your block that contains both the image and the caption.

The .image class is applied to the link that wraps around the image.

a.num-links refers to the link that contains the caption overlay. The link should match whatever link the image has, so that the whole block functions as one linking entity.

A cool-looking effect that it not very difficult to pull off. I often wish that more designers knew the capabilities of CSS so that they could incorporate these cool, simple effects in their designs.

View it in action.

If you notice any errors, amendments, or improvements, please leave a comment for the betterment of web development.

I also started using FeedBurner for my RSS feed. I was confused regarding FeedBurner before. I had thought that it was automagically creating its own feed. In reality, FeedBurner takes the feed that your blog already generates and processes it all fancylike. For example, with FeedBurner I have added the feature to "Email This", "Save to del.icio.us", or "Digg This" right in the RSS feed itself. Additionally, I can derive other statistics regarding the feed. As the user, you receive no significant additional benefit other than the "Email This" and bookmarking links.

One day I will change .htaccess so that the old feed automatically rewrites to the FeedBurner feed, per the instructions in this "Using FeedBurner" WP post. In the meantime, update the feed at your discretion - it makes little difference to me.

I want to redo my site, but I need a designer to make the look and feel of my site. Then I can code it.

Don't get me wrong, I love my watermelon layout. I just want something that I made from scratch and not something I pulled from the WordPress theme machine and had to go in and fix to make the CSS valid.

So, all you designers-but-not-coders out there, if you're looking for a bit of pro bono or portfolio building work, I need your help! Let's work together and make something beautiful.