A few weeks back I announced the 2011 Future of Web Design Conference being held in NYC and today I attended Day 1 of the event.

Below is a summary of the talks I attended. As a disclaimer, these notes were quickly jotted down & summarised and may not be understood out of context but I’ve done what I could from my notes. Below are the 6 summarised keynotes which you can click to jump to.

• The Secrets to Instagram’s Success – Kevin Systrom
• How To (and not) Get Hired – Andrea Graham
• The Myths of Mobile Context – Josh Clark
  
• Web Design is a Cloud, Not a Clock – Sarah B. Nelson
• Type On Screen: Choosing & Using It Well – Daniel Rhatigan
• The Power of Side Projects and Eccentric Aunts – Tina Roth Eisenberg

Videos of the talks will be available soon.

The Secrets to Instagram‘s Success – Kevin Systrom

When designing for the web VS desktop you should take into account:

1. Device Context – new contexts (sizes, resolutions, etc.) & new devices
2. Place Context – people are on the move, not behind a desk. This changes way people interact with products.
3. Needs context – time, speed & capabilities of devices.

Users are no longer in the web browser – what can you do with that? There are also many features of mobile devices, that are not on the desktop. What can you do with them?

Users want to navigate single needs at a time. For example, Facebook Messenger is a breakaway from the core Facebook platform.

Instagram Stats

• 12.6 million users in a year.
• 1.5 users per second.
• 250 million photos.
• “Costs 2 really nice cars” a month in hosting.

How to make it in the mobile app market

1. Have a vision – Something may be a feature, but it could be turned into a single context that ‘saves the world’. Don’t work on things that don’t add value or work with the vision. Don’t announce features before you start working on them.
2. Turn features into products – Silly features should be considered as “What can this become?” What can be next?” This limits & expands what you’re going to work on.
3. Always be an editor – This allows you to decide what you should and should not work on. Trim down the app and features to the most important parts. As an example, Instagram does not allow high resolution photos as this slows down upload speeds. Even though people ask for it, it goes against the vision of the company. Ask “What should not belong?” Unused or unpopular features should also be cut. eg. the Instagram ‘Gotham’ filter was not used much, so it was cut.
4. Make it fast & simple – People are usually in a rush and need things done quickly. As an example, did you know Google pre-loads your Gmail inbox? Instagram also starts pre loading images to the web after they take the shot. They’ve taken perceived latency and moved it elsewhere which makes speed seem instant. You should consider the relationship between flexibility and simplicity. More flexibility means more complexity. A blend between simple and flexible is the key.
5. Make it Magical – How much time does the user spend and how much payoff do they get? With a little effort you get a lot of pay off. Eg. 15 seconds gets a photo filtered & uploaded.
6. Make Your Product Grow – How will people hear about your product? How do you take 1 user and turn into more?  Make people be able to share at all times. The content is an ad for the product in itself. Eg. Each photo has a ‘Download Instagram’ link. Think about the flow of the product. Eg. Foursquare photos with a check-in is much more successful due to the thumbnail as eople want to click on the thumbnail.
7. Make It Addictive – Make people come back and use it again, by making it magical. Make people think ‘How did you do that’? What makes it unique? How often & what should be the payoff? A variable ratio should generate the highest rate of activity. Eg. The Pokie machine = random excitement. Ask yourself how do you create a “social slot machine”? Likes & comments are the rewards, just like wins on the slot machine. More likes = jackpot.

Mobile Success Recap:

• Have a vision – shows you boundaries of playing field.
• Turn features into products.
• Be an editor – trim to the most important.
• Make it fast & simple – hide latency.
• Make it magical – make products that are exciting.
• Make it grow – make the flow turn 1 to 1000.
• Make it addictive – make it bring joy.

Treehouse Launch

Treehouse (formally Think Vitamin membership) was launched at the event. It’s a place to learn web design, web development and iOS Development.

How To (and not) Get Hired – Andrea Graham

Marketing For Web Designers

The slides are available here.

How Not To Get Hired

• Having comprimising photos online. Untag compromising photos. A simple Google / Facebook search can find many.
• Misspellings and bad grammar.
• Venting on social networks.

How To Get Hired

• Ensure your portfolio & website is up to date.
• Determine your work and for whom you want to work
• Get ownership of products or create your own.

On Finding Agencies

• Send out your links, attend events, find internships, network and make friends.

On Finding Clients

• Join up & network to find clients. Read local publications, make friends and do pro-bono work. Make 1 on 1 relationships. Your friends work for businesses, create relationships with their bosses.

Use your resources

• Agency recruiters look on social networks. Job boards, social networks. Are you there?
• Start a blog.  Do roundups. Establish yourself as credible.
• Do tutorials.
• Attend events and meet ups.

How to get hired again

• Make it easy for people to refer you. Meet deadlines.
• Ensure people know you are available for work. ‘Hire Me’ is better CTA than Contact Me.
• Try out incentive based marketing.
• Be your own biggest fan. Toot your own horn.
• Embrace your weaknesses. Know when to say no. Recommend others who you know are experts.
• Become an expert an something. Keep learning by doing tutorials. Follow through on projects.
• Bill hourly and honestly. Have more accurate timing.
• Do good work.
• Don’t burn bridges.
• Deliver cupcakes / rewards after a project has been completed. Say Thank you.

The Myths of Mobile Context – Josh Clark

This was my favourite talk of the day, extremely interesting & informational. Good news for you too, as you can download Josh Clark’s slides here in PDF form, with accompanying notes.

To understand mobile context, you must understand users needs. Think of platforms as cultures.

Myth 1: Mobile users are rushed and distracted

• Mobile isn’t just on the go, it’s on the couch, its waiting, its on the bus, its on toilet. “40% of users use on the toilet. 60% lie.”
• Mobile versions don’t have to do less or ‘be lite’.
• Don’t remove content or freatures, just because it is mobile.
• Mobile users use because they are “multi-tasking, they are local, or bored”. They are ready to spend attention to the phone.
• 25% of US adults are mobile. 8%  use mobile exclusively.

Myth 2: Mobile = Less

• Mobile is not lite, or less.
• Don’t confuse content with intent. Just because paperbacks books should be lighter, it doesn’t mean you need to remove chapters.
• Mobile apps should have full content & core content.

Myth 3: Complexity is a dirty word

• People don’t want dumbed-down apps, they want less complicated app. Make complexity, uncomplicated.
• People don’t care how it happens, just help them get it there. eg. The umbrella iPhone app simply answers “Will I need an umbrella today?” Simple but fulfills certain user needs.
• Give users the minimum to reach their goal. Understand who you are designing for, as this changes everything.
• You can create sub apps within the app or outside of the app.
• Managing complexity isn’t about putting all the information on the page. You need to manage tasks and screens. Clarity trumps density.

Myth 4: Extra taps and clicks are evil

• Have content that is cached and ready.
• Worry about tap quality, not quantity. Every tap should give delight and be worth it. Explore information, ask and receive.
• Teach users about hidden content. Show once until they learn the functionality.
• Mobile should mean more. Give your app super powers based on the features of mobile devices. Stop thinking about mobile, but think about mobile content. What you can do with the device, as apose to a desktop. Progressive enhancement.

Myth 5: You must have a mobile website

• There is no mobile web, don’t think in terms of mobile websites but in terms of mobile devices. How can the device enhance the experience. Use media queries. This approach is not dogmatic so use good judgment.
• Ethan Marcotte – Responsive Web Design book is great approach.
• Mobile First – Start with mobile first as it can define what is really useful for the website as it makes you make the hard decisions. What is the most important?
• Think about the content and API as the show.

Myth 6: Mobile is about apps

• An app is not a strategy, its just an app or a container.
• Your product is not a product at all. If you pull back, you need to accept that your content is going to be displayed in many forms.
• Content is like water. Build content out, don’t put it in a container. Start thinking about flexible content that can be displayed on any device. You should be able to get content any time, any where. NFL ad is a great example as this.
• We’re all cloud developers. Be www.futurefriend.ly – Design for the future. We can not control the form or context that content can be displayed. You need API’s that can be used across any device. Content should be open so users can use the information. Eg. The Guardian, NY Times, NPR.

7. Content & API are for database nerds

• Metadeta is the new art direction. Structure your content well and you will get a foothold for design across all the devices.
• Apply rules for the robots to follow. Repurpose content, not design. Don’t design pixels, design content.

Mobile Context Recap:

• Mobile is not rushed or less.
• Complex is not complicated.
• Tap quality not tap quantity.
• Focus for all platforms.
• No such thing as mobile web.
• Don’t think app: think service.
• Metadata is the new art direction.

Web Design is a Cloud, Not a Clock – Sarah B. Nelson

Clock problems can be measured and analysed, rebuilt and can find problems. They’re tangible.

Clouds are dynamic systems, they can be analsyed in some parts but can not be predicted or remodeled or picked apart. The problem is that we take cloud problems and treat them like clock problems.

The design process is an emergent system. Once you see the parts you can work on them. Working agreements are the heart of collaborative work and the strength of those relationships. This directly impacts the quality of the designs. They are not necessarily formal. Below is a list of points for great working agreements.

• Have a clear sense of purpose. Know why and how they are doing it so they can make decisions and know how success will be measured.
• Trust. Even if you don’t use same tools, etc. you can still make a promise and deliver on it. Having a history helps as you work better together, based on consistant actions. Failure is an opportunity for growth, not blame.
• Clear roles and responsibilities. On the particular project what are the team really accountable for? Sometimes these need to be rotated. How do you know they know what they are doing? They can articulate with their mouths what they are doing.
• Agreed upon approach. Set realistic expectations and deadlines.
• Deadlines make us more creative. Structure makes us find creative ways to deliver the product in a different way.
• User Involvement – Regular involvement is crucial. Personas based on feedback and what you know. The team should have an understanding of who your users are.  They should have references / touch stones that everyone can agree on. Design with users, not at or for them.
• Stakeholder Engagement. Talk with people who have no idea with what your doing and know how to engage. Not a list of changes type of engagement but workshops and hands on involvement designed to get information and to let them know they are heard and that you are listening. Revaluate how it is working.

Pre-project kick offs are a great way to start a project. When starting a project, every member of the team should have a conversation about how you are working together. Make your working agreements. Put everyones name up there. Have goals for each project… why is each member there? What are the fears? Expectations? eg. List Names, Titles, Goals, Fears, Expecations.

Type On Screen: Choosing & Using It Well – Daniel Rhatigan

Thanks to Jason E. Beaird for the Type on Screen notes below.

Screen typography has come a long way, but it’s still evolving. There are font licensing issues, device support issues, font rendering inconsistencies and fonts that don’t work well on screen. Rasterizing software and screen hardware also take different approaches, such as E Ink.

Choosing a typeface:

• Vertical Proportions – Most web safe fonts have similar proportions between upper and lowercase text. A taller x-height can make the text feel more dense at the same size.
• Shapes – Straight lines and clear forms work better than subtle angles or curves. At small sizes, good hinting can help keep these details from causing trouble.
• Open Spaces – Generous spacing within and around letters (within apertures and around forms) will increase legibility at small sizes.
• Family Selection – Makes sure that italic and bold styles look as good as the regular.
• Opentype Features – Support is beginning to increase. Ligatures, alternate number forms, swashes or contextual alternatives and real small caps.

Using it well:

• Compensate for inconsistency – Adjust the size and line-height as needed to get contrasting fonts to work together.
• Be generous – If in doubt, slightly larger text size & extra line spacing will be easier to read.
• Choose color carefully – Contrast between text and background not only makes text more readable, but it also makes fonts easier to rasterize. More steps between the colors.

There are ‘E’ Versions of popular print faces such as Bembo and Helvetia Neue which have adjustments to the weight, proportion and spacing. There are also new faces being created specifically for screen like Malabar.

The Power of Side Projects and Eccentric Aunts – Tina Roth Eisenberg

Things Tina will teach her kids:

1. Love what you do & be flexible because the goal you set may not be what you had in mind when you set the goal.
2. Make something you love. Trust your intuition, don’t always go off numbers.
3. If an opportunity scares you, you need to take it.
4. Don’t be a complainer, make things better or let them go. Best way to complain is to make things.
5. Make time for side products. If you’re a designer, you have all the skills to create a product. Side products lead him to the next job.
6. Surround your self with like minded people. Human connections.
7. Ignore haters. Give haters none of your time. Zero.

Stay tuned for Day 2 of the Future of Web Design Conference 2011.