August 6, 2009 - Comments Off on Liveblogging DelveUI: Interaction Design in the Designer’s Hands
All Posts in
August 6, 2009 - Comments Off on Liveblogging DelveUI: Jason Santa Maria
Liveblogging DelveUI: Jason Santa Maria
Jason Santa Maria - @jasonsantamaria - One-to-Many Interview conducted by @bobulate
- Starts designs in the sketchbook - Pretty Sketchy Flickr group
- Be persistent in finding a better way to do things
- Know your interactions, functionality, and technology before designing
- Get client involved in many stages of the design process (depending on the client, of course)
- When presenting to clients, focus on problems, not solutions
- Specialization will become more prominent, with less jack-of-all-trades designers/developers
- Change your scenery to give you a different angle on your creativity
Published by: christygurga in The Design Mechanism, The Programming Mechanism
Tags: jason santa maria
August 6, 2009 - Comments Off on Liveblogging DelveUI: Designing Interaction using Flash
Liveblogging DelveUI: Designing Interaction using Flash
Jamie Kosoy - @jkosoy -Designing Interaction using Flash
Programming Philosophy
- Everyone gets a say.
- Strategist, Producer, Designer, Developer.
- Understand each other, speak the same language.
- Never say it's too hard.
- Build fast.
- Build ugly.
- Prototyping and designing at the same time.
- Trust each other.
- Producer acts as intermediary between Client and Team members.
- Drink lots of whiskey.
- Mise en place.--Everything in place.
- Have documents organized and ready to go.
- Always start from scratch.
- Helps you get better and faster.
- Strive for excellence, not perfection.
- Think simple.
Published by: christygurga in The Programming Mechanism
August 6, 2009 - Comments Off on Liveblogging DelveUI: Polishing Interfaces
Liveblogging DelveUI: Polishing Interfaces
Andrew Maier - @andrewmaier - Polishing Interfaces: Visual Design
- Application interfaces often have no overarching design
- Application interfaces leave a lasting impression
- Polished interfaces make good use of motifs
- Polished interfaces follow conventions
- Establish a theme/style
- Wireframe your elements
- Begin adding layer styles
- 1-pixel highlights
- Gradient overlay
- Inner shadows
Published by: christygurga in The Programming Mechanism
August 6, 2009 - Comments Off on Liveblogging DelveUI: Rich UI Design
Liveblogging DelveUI: Rich UI Design
Scott Jehl - @scottjehl - Rich UI Design: An Access-Oriented Approach
Download the Presentation from the Filament Group website
- Should test pages on screen readers
- All or nothing is a bad approach to accessibility
- Consider Universal Access in all stage of development
- Instead of asking for browser, run tests to determine browser's capabilities. Available at filimentgroup
- If browser fails tests, serve "basic" version with "Safe CSS"
- No floats
- No dark text on light backgrounds
- No background images
- No positioning
- If browser passes test:
- Add class "enhanced" to html element
- Dynamically load CSS and JavaScript
- Cookie the results
- Provide link to low-bandwidth version (which will change cookie and remove enhanced class)
- If building widgets not included in jqueryui themeroller:
- Replicate behavior before you extend
- Proxy back to native control
- Follow conventions and user expectations
- Consider the mouse optional
- Use WAI-ARIA
Published by: christygurga in The Programming Mechanism
August 5, 2009 - Comments Off on Liveblogging DelveUI: Beautiful Layouts Through Beautiful Type
Liveblogging DelveUI: Beautiful Layouts Through Beautiful Type
Jeff Croft - @jcroft - Beautiful Layouts Through Beautiful Type
This presentation was eerily similar to my Typography for the Web presentation, so here are notes on the other things that I found interesting during the talk.
- Absolute vs. Relative font-positioning: because page-zoom is now in most modern browsers, we can choose which one we want to use per situation. There's always a balance between accessibility, ease of use, etc.
- Be careful of contrast! Pure black on pure white is usually too high contrast
- Tufte's idea is that we should use the smallest effective differences for hierarchy. We don't have to make huge differences in type to indicate hierarchy.
- Links need to stand out, but shouldn't distract the reader.
- WP-Typography is a WordPress plugin that does hyphenation, gets rid of orphans, replaces with smart quotes and dashes, and wraps initial quotes for individual styling.
Published by: christygurga in The Programming Mechanism
August 5, 2009 - Comments Off on Liveblogging DelveUI: Mastering CSS Layouts
Liveblogging DelveUI: Mastering CSS Layouts
Jina Bolton - @jina - Mastering CSS Layouts
- Mastering CSS is really about mastering your workflow. Have a system for starting each project.
- Idea: Keep content images and layout images in separate folders
- Comment your CSS!
- Reference colors at the beginning
- Use CSS Flags to organize sections
- Make a "table of contents" so other team members know where to find things
- Balance readability and optimization
- Avoid using floats so that you don't have to define widths for your elements; let elements use normal flow
- On outermost containers, set line-height: 0--then assign actual line-heights to your individual elements. This helps avoid gap-issues
- Sometimes using a "safe hack" is better than creating another stylesheet for something.
Published by: christygurga in The Programming Mechanism
August 5, 2009 - Comments Off on Liveblogging DelveUI: Marrying Web Analytics and User Experience
Liveblogging DelveUI: Marrying Web Analytics and User Experience
Lou Rosenfeld - @louisrosenfeld - Marrying Web Analytics and User Experience
- WA and UX people should not work in silos. They need to be managed and integrated together.
- UX is about the WHY: user motivations. WA is about the WHAT: user actions.
- It's not useful to know what is happening if you don't know why. Conversely, it's not useful to know why users act if you don't know what it is that they're doing.
- What are the most common search terms on your site? Why are people searching for these items?
- Use these search queries (what) to drive your task analysis (why)
- WA use a top-down approach with data: defining metrics and analyzing them. UX use a bottom-up approach: looking at data to find patterns and conclusions. Both of these approaches are necessary! Top-down makes sure you're achieving you goals, bottom-up catches outliers.
- Stay away from them middle data--look at the short head instead of the long tail.
- Canned reports such as Google Analytics are only a starting point. Use this data as an opportunity to do top-down and bottom-up.
- UX need to get comfortable with measuring the unmeasurable.
- Measure your site content's quality. Although this is subjective, use parameters and systems (currency, authority, popularity, feasibility) to objectify them a bit.
- WA need to get comfortable with stories: intuition and mistakes.
Published by: christygurga in The Programming Mechanism
April 16, 2009 - Comments Off on Typography for the Web—NY Web Standards Meetup
Typography for the Web—NY Web Standards Meetup
This month, I presented "Typography for the Web" at the NY Web Standards Meetup. Right now, typography on the web has been receiving lots of attention from both designers and developers alike—designers wanting to know what their constraints are and developers wanting to know the best practices for implementing advanced typography. I covered a wide range of topics so that people can continue to research and learn about this rapidly-changing field.
Slides, photos, video and audio from "Typography for the Web"
Listen to the event: [audio:nywebstandardsTypographyForTheWeb-20.mp3]
Watch "Typography for the Web" on Ustream.tv and view photos from it on Flickr!
Here is a list of resources that follow along with the topics covered in the presentation:
Building a foundation
- Eight definitive font stacks
- PX to EM
- How to size text using ems
- The typographic scale
- Setting type on the web to a baseline grid
- Compose to a vertical rhythm
Formatting headings
- Nine techniques for CSS image replacement
- Facelift
- Install FLIR
- FLIR Security Check
- sIFR3 Documentation
- This is how you get sIFR to work
- sIFR3 hard drop shadows
- Cufon - fonts for the people
- Cufon on github
- Cufon font embedding
- Web fonts with @font-face
- Combining Cufon and @font-face
Noticing the details
And more!
- Better pull quotes with jQuery
- Typography blogs for your inspiration
- Fuck the foundries
- exljbris Font Foundry
What are some of your favorite typography resources? How do you feel about one type of replacement technique over another? Please continue the conversation in the comments below
Join the New York Web Standards Meetup at Meetup.com, follow us on Twitter and join our LinkedIn group!
Published by: christygurga in The Programming Mechanism
Tags: cufon, sIFR
Whew! It's been quite a time at South By Southwest Interactive--lots of panels, parties, and good eating! Since there are a multitude of people who have taken amazing notes during the panels and core conversations, I'll spare you those details, but just as important as what's said during the panels is what you can take away from it! Here is a list of the "take-aways:" the twitter usernames, the Web sites and the books. Here are some ideas and resources you can use right away!
Overarching Themes:
- Collaboration within companies, collaboration between client & web team, collaboration between web teams
- Openness with coworkers and with clients
- Don't do work for the sake of doing work; create deliverables that have applicable value
- Some clients (and even workers) respond better to many lo-fidelity steps (sketching, collage, mood boards) to buy into the design process before seeing a polished design
- Agile development! Working in quick phases to roll out a product. Everyone's talking about it, but it may not be good for every team or every client
Web Typography: Quit Bitchin' and Get Your Glyph On
See the slides at SXSW Typography
- Richard Rutter - Clearleft Ltd - @clagnut
- Ian Coyle - iancoyle.com - @superheroeshq
- Samantha Warren - Viget Labs - @samanthatoy
- Jonathan Tan - OmniTI Inc - @jontangerine
- Elliot Jay Stocks - @elliotjaystocks
Links:
Being a UX Team of One
- Leah Buley - Adaptive Path - @ugleah
Highlights:
- Ditch the concept of the "singular genius designer." The designer is the person who takes everyone's ideas and creates a cohesive solution to the problem
- Always sketch out at least six layout ideas!
- Get as many people (developers, clients, shareholders) involved as early as possible
Links:
- Concept Share, a web-based collaboration tool.
Books:
- I talked with Leah, and she recommended Information Architecture for the World Wide Web, better known as The Polar Bear Book.
How to Create a Great Company Culture
- Sam Decker - BazaarVoice - @samdecker
- Jason Black - Boundless Network - @jasonablack
Highlights:
- A good fit is achieved by every team member having the same core values
- Always remain passionate about what you're doing. Even if you find yourself in a situation you don't like, find a small thing to focus on and remain passionate
Books:
How MacGyver Would Do Design Research
- M Jackson Wilkinson - Viget Labs - @whafro
Highlights:
- Do as much dual-work as possible (creating wireframes in CSS/HTML, reusing documentation, etc)
- Know what not to research; pay attention to what's already been done
- Do user testing with fewer people, have them each do more tasks
Links:
Wireframes for the Wicked
- Nick Finck - Blue Flavor - @nickf
- Donna Spencer - Maadmob - @maadonna
- Michael Angeles - Traction Software - @jibbajabba
Highlights:
- Choose your wireframe type based on the audience; you may do different wireframes for the client vs the developer
- Feel free to mix hi- and lo-fidelity methods to achieve the appropriate type of wireframe
- Sketching-style wireframes may make clients feel more comfortable with sharing ideas and adding input
- Michael Angeles has the coolest notebooks! Sketching the User Experience
Links:
Designers and Developers: Why Can't We All Just Get Along?
- Chris Lea - Media Temple/Virb - @chrislea
- Liz Danzico - The School of Visual Arts - @bobulate
- Ryan Sims - Virb - @simmy
- Joe Stump - Digg - @joestump
- Daniel Burka - Digg/Pownce - @dburka
- Andy Beaumont - Flutter + Wow - @drcongo
- Rob Corradi - NeonState - @ribrob
Highlights:
- Speak in terms of problem/solution instead of specific features--the developer may have a better way to solve the problem
- Include a developer in early meetings to avoid promises of unrealistic features and to help brainstorming
- Designers should make the effort to learn as much as they can
Links:
Collaboration or Collision: Achieving Design Studio Bliss
- Jennifer Bove - Kicker Studio - @kickerstudio
- Tom Maiorana - Kicker Studio - @tmaiorana
Highlights:
- Bring your clients into the brainstorming session
- Show your clients a variety of mood board concepts; This is the stage for back-and-forth conversations and for feedback. Take this knowledge and deliver one cohesive design mock-up. Delivering several designs diminishes your expertise in finding the right solution.
- Educate your clients on the value of your product; don't work to meet unreasonable deadlines
- Don't let a single designer get too involved in the "ownership" of his/her design. Take it away and let someone else work on it.
- Don't design behind closed doors, open up the conversation!
Books:
Published by: christygurga in The Programming Mechanism
Tags: books, collaboration, resources, sxsw, sxswi, wickedwire, wireframes