I did not take as many notes of Eric Meyer’s presentation at AEA/Boston as he mentioned that he would be posting them as a zip file, however here are a few tidbits that I jotted down.
First, Eric is a very funny guy. He has lightness to his step and always seems to be smiling. When he says that CSS3 is much more powerful, yet also more capable of blowing up in our faces, he makes it seem fun and worthwhile to experiment! His energy is about TRY IT, PLAY, FOOL AROUND, DO IT BACKWARDS, SIDEWAYS, UPSIDE DOWN and see what happens.
As a new student of all things web, he inspires me to want to learn every facet of CSS3 inside and out! Eric discovers things about CSS no one else ever thought about, even the people creating it. It was great to see him in action, pushing CSS3 to its limits: Hmmm, what will happen if I use my search element as a repeating background?  What will happen when I change the opacity of the hover command? Let us play around with the first child and see how it works.  Hey, look what happens when we rotate the type!  Gosh, I can do so much with transform.  Now we will make a 36 second animation, with a two second delay, all with CSS!
I am excited about exploring all these techniques myself… Eric said that transform is going to be a “rich vein” for design over the next few years and I’d like to know more about how to use it.  I am particularly interested in video so I will be playing around with video [auto play] and trying to figure that out as well.
Eric talked about something that browsers are doing now: ignoring tons of visited styling for privacy reasons. If you are having problems styling visited links, there is a reason.
I have one of Eric Meyer’s books, “Smashing CSS.”  I do not think I would have figured out fluid layouts without this book. I have a long way to go, but maestros like Eric Meyer provide the nuts-and-bolts information, not to mention a few fun techniques for torturing your friends, as he noted in his lecture. So, guard your computer at work.  If you leave your desk and come back to find that everything you hover disappears… well, you have an Eric fan in your midst!

What a super nice guy Aarron Walter is and I’m grateful for the inspiring talk he gave at AEA. He started off by noting that all of us have someone who is “in charge of us” whether it be the boss or the client. If you get too focused on the execution of this work, then your creative thinking fades into nothing (if you don’t use it, you lose it). You need to think creatively about your execution and the main way to do this is TO GET YOURSELF EXCITED.  The main way to get excited is to START AN INDEPENDENT PROJECT which is satisfying to yourself.  Your never know where your project could lead you… it could just make you feel warm and fuzzy, it could turn into a collaboration, or it could turn into a business.  Aarron recommends checking out Dribbble (yes, that’s three b’s), “Our Cheerleader on the Web” – a great site to see what other creatives are doing.

ALWAYS ASK WHAT WOULD HAPPEN IF?  Most of the time we say that and we let it die on the vine.  Aarron says the hardest thing is to get started.  Get it on paper.  Then show it to someone.  Code a bit.  Make a prototype.  Either work on it for awhile or put it on the shelf (try to put 1000 things on that shelf!).  Don’t get into excuses for why you can’t do it because INSPIRATION IS INSIDE OF YOU.  The 1000 things on a shelf is your FACTORY FOR INSPIRATION.  And you know what, failure is just fine.

Give yourself permission to do something BIG.  Aarron talked about a friend of his who is a successful filmmaker in LA, a guy who never went to film school. He wanted to make some videos and set out to do it.  He told himself, “I’m not the best, but I’m as good as the next guy.”  Remember that your idea has as much value as the next person.

Here is the Creative Process:  We ideate.  We incubate.  We evaluate (the judge).  Be careful because the judge will kill the creative process.  We all know this.  The trick is go with your gut.  To protect your work.  Don’t show it to anyone else at this stage or casually mention it yet.  You’ll eventually be asking, “What am I solving?”, but don’t ask this too soon.

Think about Design in terms of Who is my audience?  What is my content?  Move into Wireframe Interaction Design by creating a Sketchboard.  This is a giant piece of butcher paper put on a wall.  An open field where you’re able to think of the whole landscape of the project.  You can put up post-it’s, illustrations, navigation ideas, fonts, colors, labels, notes.  You can then make this portable to bring to a client.

Write simple code to get your idea across or use Fireworks to create a prototype or use a wireframe toolkit such as Mockingbird or Balsamic.

Study Design Patterns.  You can do this at the Yahoo Pattern Library, which includes code as well, for example, how to create breadcrumbs.

There are many tools on the web i.e. for social coding Github and for prototyping. Also check out MailChimp where Aarron continues to design cool user experiences.

Give yourself permission to work on your own stuff, even if it means staying up until 2:00 o’clock in the morning.

Aarron has a new book coming out, “Designing for Emotion.” If it’s packed with as much useful and inspiring information as his speech, I’m sure it will be a worthwhile book to add to my collection.

For me it isn’t so much giving myself permission to start a project, it’s GETTING IT DONE, finishing it, such as the HSP website, which I really should launch today and stop putting it off.

Whitney Hess gave an entertaining and informative talk on User Experience. This is a topic I’ve studied in the Human Computer Interaction course at Marlboro College, a foundation for the Open Source Web Development Certificate I’m pursuing.

Some of my favorite notes from her talk:

User Experience is the establishment of how to treat people. Visual Design is the establishment of how to impact people. 

Good Design doesn’t always equal Good Experience.

It’s important to give the most crucial elements prominence and create a hierarchy to match needs.

Design is a conversation, not a monologue.  User’s want to know where they are and where they came from.  Check out the Neiman Marcus site (rings). They do it right.  It’s clear where you are (signposts).  Make sure the design is self-contained (you don’t’ need to go to any other page).

I listened more than I took notes (and enjoyed Whitney’s photography), but if you visit Whitney’s site you’ll find links and lots of information regarding the philosophy of User Experience.  She has a great blog and is active on Twitter.  Her website has some great tapes too, such as “Evangelizing Yourself: You can’t change the world if no one knows your name.”  Lots of good content in this tape about social networking, gaining confidence, finding your own strengths and accepting your weaknesses.  She ends with “Be reliable.  Be grateful.”  I’m feeling the gratitude right about now.

So many great speakers at the AEA conference, “Design, Code and Content,” organized by Jeffrey Zeldman and Eric Meyer. The topics were, for this web newbie, the major draw, but I would attend again as much for the content, as for the approachability of all the speakers. So nice to be able to chat, ask questions, and share a meal with such knowledgeable and friendly folk.

Jeffrey Zelman was the first speaker on Monday. He started out with a tough crowd as this Boston group in not hugely interactive. At breakfast with Jeffrey he mentioned that he is used to this in Boston and knows not to take it personally. With the exception of sporting events, New Englanders are rather reserved.

Jeffrey spoke about using Tweetbot and recommends that iphone/ipod users download it. He said that as interface designers we need to see what other people are doing. He talked about how we need content in order to be able to design effectively, otherwise it’s just decoration – so don’t use lorem ipsum.

“Pave the cowpaths.” This is in reference to a grassy area of Boston where people jaywalked repeatedly, so they finally paved it over. Find out what people do and make sure it works.

Make sure people know what they are supposed to do on your site. Jeffrey says that you “can’t solve the problem alone” and recommends using Silverback 2.0 to be able to test with users, and entirely worth the price of $69.95.

My favorite quote of Jeffrey’s, which I hope to heed, “Often good designs happen when you think you’ve done everything you can and don’t have anymore time.”

Mobile notes: Where it’s at: mobile gestures. Mobile isn’t really just small screen design. Mobile Strategy considers your location.

Book he recommends Adaptive Web Design by Aaron Gustafson for progressive enhancement. I checked out this website and see that you can download chapter one for free, which explains that, “Progressive enhancement is a philosophy aimed at crafting experiences that serve your users by giving them access to content without technological restrictions.” Another book to add to my list…

On Being Resourceful

Posted: March 18, 2011 in Web Development

One of the things we are told at Marlboro College Graduate School is that we need to learn how to teach ourselves how to be web developers. We need this skill because of the rapid pace with which technology changes and it isn’t possible to go back to school every year. If we are able to learn resourcefulness, we can keep up-to-date and aspire to be cutting-edge.

Part of our process is that we are given tasks that we often muddle through, sometimes the blind leading the blind. The teachers are there to answer any questions, but we have to know enough to ask the right question. We also have to make sure we’ve done all the homework. The program is designed so that you really have to study all the content in order to complete the assignments. You also have to find good sites on the internet and share them with classmates so everyone gets in the habit of surfing the web for answers.

Often fellow students are instrumental in helping you complete an assignment. You struggle until you post your confusion and then one of your classmates, who either googles the solution, finds it in course literature, or having spent hours with the same problem is able to post a fix. Teachers, of course, post feedback as well, but sometimes there is a particular learning curve that two students share together and they are able to help each other out.

Now I feel a certain confidence from the whole process. I know I have many places I can go to get help or, if I am diligent enough, I can find the answer myself. Either way, it’s good to be on this path, with these fellow travelers, to know that we can keep learning and teaching each other.

Wireframes

Posted: March 13, 2011 in Wireframes

My last post was about following directions – and I have a lot to learn. One of the instructions for our wireframe assignment was to set it up in grayscale, to avoid being distracted by colors (and the time it takes to choose them). This was written in CAPITAL LETTERS but somehow it didn’t sink into my mind. I was trying to envision my finished website, all the glorious colors, and what the final product would look like. I was surfing page after page on the web trying to find ideas to work on my site and felt compelled to build my wireframe as the final site would look, colors and all. So that’s what I did.

In that process I wasn’t focused on typography and layout. I wasn’t focused on value (the lights and darks of the colors I would be using). I was focused on “pretty” and I didn’t get too far. In fact, I got to “ugly” and that’s about it.

Part 2: I decided to do the site in grayscale as directed. This was very worthwhile. I focused on how the type looked. I remembered the whole concept of value and started to think about only using two or three colors, in various shades of lights and darks. I was able to layout my whole sight so much easier and more efficiently and was much happier with the result.

I think I may be figuring this out…. and although I still have too many tabs open, too many tasks going on at once, too many thoughts jumbling around my brain… I’m actually getting things done.
And I’ve stopped obsessively using “to do” lists – at least those long, unrealistic “to do” lists I used to create on spreadsheets.

Now I know I have to finish my wireframe for my final project TODAY. I can keep a few items, such as towels tumbling in the dryer, or what time to pick up kids, or the super important letter from a new catalog our products might go in, or all the other stuff to do out in the office, but the main focus today is to get the wireframe done. I’ll keep that in the forefront of my brain all day long until it’s finished. And, for the most part, I’ll work on it in the way that it is suggested, which isn’t easy for me to do. I tend to like to make up my own way to do things, however, in web development, at least in the beginning here, that strategy won’t serve me well.

To illustrate: We are supposed to draw nine tiny little boxes on one page of wireframe ideas for our site. I found this fairly easy to do all week long since I just looked at sites I liked and already have accumulated 7 of these. But as I thought about my own wireframe assignment, I got anxiety. I had to be able to picture the amazing rendition of the finished website in my mind and since I didn’t have it, I felt a loss as to where to begin. I thought, well I could re-do those scribbly drawings I’ve been working on all week and get them onto one page, as directed. So I’ll work on that.

Then, come to realize in the middle of that process, that all the information I need is there. All the sites I’ve drawn this week have included elements that interest me or that I feel are needed for my project site. This exercise is helping me with the larger picture of what I need to create, gosh, so why didn’t I trust that in the beginning! Why do I think I need to have every image in mind at this juncture? Just do the wireframe, one step at a time! Suddenly my anxiety is lifted. Follow directions and make like easier… that’s all I need to do… errhhh, and get back to work…