@monicams

One-minute meditations with commentaries and background music: JAM – Resource Centre http://t.co/EPsyjK5E

Follow me on Twitter!

Sometimes is not as easy as it seems…

Also thinking a lot about this:

My first conference in Ireland… great venue! and I was lucky enough to get hotel in a 3 minutes walking distance. The first day of the conference was reserved for workshops, and it was, in fact, far from the main venue but transport was allocated and everything was well organised.

Convention Centre Dublin, at night

Wednesday – Workshop

The workshop that I attended was

“What You Missed When You Skipped Design School”

with Dave Malouf (@daveixd) & Matt Nish-Lapidus (@emenel)

Both ‘lecturers’ have background and experience in Interaction Design.
For starter a discussion about ‘What is design?’ and I was of the opinion that design is functionality and beauty coming together.

The 5 E’s of design: Experience > Externalise > Envision > Evaluate > Execute

Iams furniture design, his major contribution: wood bending. His tip: understanding and exploring your material to create things that maybe never existed before.

The concept of flow

More innovation coming from cities with more pedestrians, due to collision.
Inspiration – architecture, nature, other designers, music.
Social – interaction that inspire and conversations that have no intention can give birth to amazing ideas.
Studio – is private and social. The buzz, the flow and the interruption of flow, and the way to understand each moment. Studio space should allow collaboration, allow inhibited access “dude, you should move that to 3px left!”. Studio space should be playful (add dart guns, lounge space, etc. IDEO shopping cart movie was mentioned as example of product innovation process – more info on the project from 1999!)

Criticism

Criticism is part of a design process, sometimes the answer is ‘just because’ (just because I felt like the colour blue should be used, etc…) however finding better words for your argument, trying to go deeper on the reasons why a designer chose a particular colour, shape or function makes the analysis of the work more interesting.

In design school there are a few rules of crit:

• ASK, do not tell
• LISTEN, do not defend

So, asking the designer why he chose a particular style, colour, function. Try to get as much information as possible instead of pushing your own opinions. In the same way, the designer should listen to the criticism and analyse if the comment makes sense, instead of defend your creation.

Art and design

Discussion about what is art and what is design. One opinion was that “design have a purpose and art don’t” however, religious art have a purpose, political art also have, and they try to evoke a change of mind, have a ‘beautify’ purpose and can also solve problems.

Examples of Renaissance, Bauhaus & art deco, a Wassily chair designed for a painter. Kitchen Aid mixer that lasted about 100yrs and became icon of the company (included on refrigerators, observe the logo and other elements on their website…).

Design Principles
… maybe even a manifesto …

• Ability to compare and evaluate
• Expose vs construct (“It was inside the marble and I freed it” – Michelangelo)
• Construct to Reconstruct
• Tinkering (exploring materials and possibilities, ex: primary goal of Edgar Degas was painting, did a sculpture of ballerina for exploration
• Refinement (analytical self-evaluation)
• Composition (grid 2/3 filled 1/3 empty)
• Balance – brings moments of relaxation
• Contrasts (in colours, scale) – to clear focus and create attention
• Negative Space (allows to do more with less)
• Scale (to symbolise victory, attention, contrast, etc.)
• Materiality (know the material you work with)

Example of Michelangelo: living and digging in the marble, understanding before mastering, time spent with material.

In UX design “there is no material”, we work with meta-materials: future and people. And the above principles are not the same for interaction design. Plus, the designer’s intention is not always its outcome.

True Grit – apparently you stick with it until you cannot any more > push it > then go back from epiphany.

90% what you do is perspiration, not inspiration – Thomas Edison

One of the first exercises was to use the materials they provided to indicate the idea of ‘time passing’. It was really interesting to have mixed backgrounds on the group because you could see different styles, concepts, inspirations, etc. I drew stages of a tree growing up, almost on comics ‘style’ of frames. Other people had different perceptions: seeing a schedule on paper, a sticky figure presenting or talking about time, hourglass, cave paintings (indicating the evolution), post-it animations, bubbles, tetris or blocks, candle burning (also in frames), tree dying, family tree (generations), farm growth.

Creative Thinking – Feynmann – gave us good tips about creativity

Tips:

• work on the paper (external brain – ‘distributed cognition’)
• try “sketching in 3D space (models)”
• break down problems into smaller pieces, then solve problem and combine them back again

Visual language

• Alphabets using symbols – early criptography
• Sketches from Christopher Alexander (patterns, pattern language), he was sketching with flow through paths, great for physical interactions.
• Event binding
• Multiple interactions
• Comic book: to define the environment, not the object only.
• “Video Sketch”

A sketch is supposed to be disposable, more a question of the designer makes, it is rough, communicate intention.
A prototype will be more a step into completion.

A sketch can also have different levels of zoom, maybe is not the entire object, maybe just a joint, a foot of a chair. Arduino boards – a sketch in electronics!

Another exercise was done, the idea is to model to explore aspects of your time telling. I used glue, coloured paper and use the same idea of the growing of a tree. Some other ideas: water flow (intervention affecting the flow (of time)); circle with animals and numbers, scroll with a story, slide of numbers (always obscuring something but giving the idea of passing the time).

"Angry origamy" by Wil Lau, named by Ambroise in creative session about "your relationship with time"

Some names:  Howard Miller – colours, futuristic look and Bauhaus – future (forefront of industrial design)

Shared language

• Foundations: line, plane, volume, value, texture, colour
• Time (rate, duration, frequency)
• Abstraction (distance between user/reality)
• Metaphor (analogy)
• Movement (hard-motion, soft-motion)

Critique has some factors

Intent – what the person is trying to do with the design

Product – what the solution is

Tips/rules of critique:

• focus on the work, not the person
• explain why
• constructive, not instructive (bad example: make it blue! good example: why do you made it green?)
• understand the context
• early and often
• safe environment (open, designer lead)
• ongoing and integrated (on studio)

Work that comes to the studio is in fact done by all. Some own parts of it, more for accountability purposes. Critique needed on a level that design stops or designer needs input (not in a top-down level “let’s do a crit”).

Give reasons why you put things into places, check the colours, etc. Always try to have two reasons for it.

Go back to your designs and look with ‘fresh eyes’, make the implicit explicit (ask why you did this or that).

Emotionally detach yourself from your work to listen the critique.

One article was suggested: “What I got out of design school” by David Armano

Another exercise took place and we develop our ideas even further and would be an opportunity to try the critique techniques explained. A few other ideas appeared: a ‘time-task slider’ where if the task is complete the post-it would be filled with a particular colour, a ‘sketch timer’ where you set up a timer and when the time is up the ink stops to flow (questions on the crit session: ink or lead? how to cut the ink? app/web controller? remote? in industrial design, would be mold injection considered? which material? what are the costs? scalability? size matters (tell us about the scale of the sketch timer…).

Remember to let designers explain their portfolio, is the best way to understand choices and learn more about them.

Books: Elements of Design, Designing for Interactions, Designing for Devices, Design of everyday things

Thursday to Saturday – Conference

CCD - colours and reflections

Key talk: Mayor of Dublin – How cities work, how people interact.

He mentioned the bike scheme that was implemented in Dublin as well as in Paris, but the latter implemented first and had a design flaw: as soon as you pay for your bike the bike bay flashes so you can get your bike, but not only you see it, everyone sees it and more than 1000 bikes were stolen on the first year of implementation. Dublin however, learned with their mistake and in 2 years of operation only 2 bikes were stolen – and recovered!!!

Other design problem: in Melbourne the use of helmet is mandatory and the bike scheme has a ‘spontaneous’ nature… this cause the number of journeys to be reduced since people had to carry helmets just in case they wanted to use the bikes at some point during the day. A few stats: Melbourne bike scheme registers between 100 and 200 journeys a day while in Dublin is in between 5000 and 6000 journeys a day.

Disrupt – by Luke Williams

disruptive-thinking.com

@LukeGWilliams

williams.luke@gmail.com

Book: Disrupt

Disrupt to transform the business and find unexpected solutions. Some disruptive companies: Apple (iPhone) was taken aback on mobile development by Google (Android).

Disrupt > Ignore > Spot and React

How to be the disruptive change? Get a predictable routine, same routes, same routine and do something unexpected… Example: flash mob in train station on ‘freezing/not moving’ position for 2 minutes. Craft a disruptive hypothesis (be wrong at the start to be right at the end). Define…

Cliché – more obvious idea of people think and do about business

Interactions cliché - Car rental: face-to-face agent > paperwork > rent a car for the day.

Product cliche – inexpensive, taste sweet, advertised as aspiration

Price cliche – magazine with subscription sale having big discount.

Example:  Eurisco - thinking outside the box, the disruptive strategy: on a game of ships general size – sent 1000 defenceless ships – computer lost the game; again new strategy: sink own ships the moment they get damaged – gain agility on other ships – computer lost game again.

A disruptive hypothesis is an intentionally unreasonable “what if” question.

Techniques:

• What can you invert? (The Shining ‘happy’ version of movie trailler; Cliché: inexpensive, sweet taste, aspiration – Inversion: expensive, bad/sour taste – final product: RedBull)
• What can you deny? (Cliché: see customer, loads of paper, rent by the day – Deny: don’t see the customer, no paperwork, don’t rent by the day – final product: ZipCar)
• What can you scale? (Cliché: subscription, 50% cheaper than buying on stand – Scaled hypothesis: subscription is 50% more than buying on stand but gives access to ‘premium’ content – final product: Monocle)

Another cliche: socks are sold in pairs – changed to socks in sets of three (and none of them match!) – Little mismatched – find the niche!!! (in this case, 12yrs old that like mismatching)

Disrupt innovation is not a tactic, it is a mindset, enjoy the possibilities!

Design Language for Interactions by Mike Lemmon

@mikelemmon

Product design, Ix design, icons and brand – layers: surface, material, colour, function, brand, consumer.

We see design language everywhere (Kitchen Aid, Jacob Jensen, Toshiba…)

Android style guidelines came out recently.

Document the system: philosophy + instruction manual

LAYERS

Consumer – the consumer instead of ‘user’ – the broader the target, harder to connect

Brand – “a brand is a promise” – Porch performance, Volvo safety.

 ”a brand is a promise”

Structure – “the most elegant products has the less fewer parts” – need no more and cannot afford no less – simplicity comes from the structure, capture the essence of the product.

 need no more and cannot afford no less

Interaction – flipboard language (social magazine, when designing a model try to future proof, exercise the use in different devices)

Visuals – don’t underestimate the power of a visual (but have to work on the system!) – Visual elements: colour, typography, layout, icon.

 know the rules before you break them!

Examples:

• TDK brand experience – balance analog and digital, the feel of ‘old mix tape’.
• Technicolor
• MGO – top level structure: live tv, tv shows, movies, …
• The new “I’m getting that for you” message, instead of “Loading media”

When you adapt, you diverge, and loose focus…

Happy hour, February 3rd

Oh yes, many times I get stuck. Is not nice, it is not easy to overcome sometimes, but then, on others, it is extremely easy if we just follow a few steps…

I found some good material online and I’m referencing it here. Please visit the original article, highlighted as [source], to read more. Words below are a mix of the topics on the articles and my own experience (in italics).

How to Overcome Your Creative Block [source]

Are you going through a creative dry spell? Here are five creativity busters and some practical tips for overcoming them:

Fear
Fear is a common problem apparently. Fear of rejection, fear of success, fear of failure, and many types of fear. The one that gets me sometimes is the fear of trying something new. Depending on the day a new task can be exciting and motivative enough, but sometimes the ‘blank canvas’ can be terrifying!!! And yes, it causes creative paralysis. One of the best ways to overcome it is to give yourself permission to face the fear head on. Once you identify the fear that’s paralyzing you, tell yourself it’s okay if the fear comes to pass. Write this permission down if you have to and refer to it often. Then, proceed to act in the face of your fear.

Perfectionism
“Are your creations never quite good enough? Do you have trouble feeling that a project is really complete? Are clients happy with your work even though it never seems quite good enough to you? If this is you, you may be suffering from perfectionist tendencies. If so, you’re not alone. Many creative people are perfectionists. One trick for combating perfectionism is to ask yourself if you would be this hard on someone else. Often, the answer is “no.” You should be at least as reasonable with yourself as you would be with another person.”

Busy-ness
Overscheduling your time with too many projects might seem like a good moneymaking strategy but in the end it can leave you feeling burnt out. This is because most creative people need time to process their ideas and they also need exposure to the outside world for inspiration. When you over schedule yourself you eliminate both processing time and inspiration. To overcome this problem, incorporate a regular block of time that isn’t assigned to a project in your weekly schedule. Use this time to process ideas, find inspiration, or just rest.

Procrastination
In many ways, this is the opposite of busy-ness. If you have a problem with putting projects off you may find that the quality of your creative work suffers. I’ve done it, you probably have done it… we do tend to push things to the limit and last minute sometimes… if you leave procrastination creeping in it could be a routine later on and your projects and deadlines can become a big mess. Tackle your procrastination by creating a workable schedule with plenty of breaks. Also, examine your attitudes closely to make sure that the root cause of your procrastination is not really the problem of fear or perfectionism.

Health
Not taking care of your health is a bad idea in many ways. Let’s face it. No one performs well on a diet of junk food or after only a few hours of sleep. If you get sick, your creativity will take an even bigger hit. To solve this creativity buster, identify your unhealthy habits today. Make healthier living (exercising, eating right, getting enough sleep, and regular checkups) a part of your routine. It’s best to avoid as many health problems as you can.

It is easy said than done, but for me it worked slowly changing bad habits… or adding a few good ones. My sacred good is to have at least one full bottle of water a day (not counting tea or coffee or juices). I bought a KOR water vessel to motivate me – a great piece of design – and it is also a reminder of my commitment to myself. Other good habits: not have lunch at my desk, it helps me to unwind and rest my eyes from computer even if it is for a few minutes. Try to walk after lunch, as a break from work, the desk and get some fresh air (also, even if it is 10 minutes it makes wonders).

In another article:

10 Tips to Avoid a Creative Block [source Inspired Mag]

1. Doodle in Your Sketchbook

Graphic Designers always sketch up some ideas or concepts when starting on new projects. I know I do and I have been sketching and drawing since I was little and you might have too. Drawing takes your mind off things and gets your creative juices flowing, you will be surprised how quickly ideas come back to you just from doodling in a little book.

2. Visit Inspirational Galleries on the Web

Looking through designs that were created by other people is usually a great inspiration too. People around the world has gone about setting up Inspirational Galleries for us to visit and view masses of art on the same website, saving us time and effort. I recommend visiting Inspirational Design Galleries as a hobby day to day too, keeping you up to date with the design trends. Read more on 10 Niche Social Networks to Get Your Design Creativity On

3. Take a Walk

Get out of your office, sitting all day is just going to make you look at the same things over and over again which definitely isn’t going to benefit you. Go outside and take the dog for a walk or just go for a walk by yourself. The fresh air and seamless nature around you might drive some new inspiration into you.

4. Search for New Fonts

You will be surprised by how much inspiration you can draw from a few simple curves. It freshens up your thinking patterns and gets your mind fixed on the things that you have to do. Fonts aren’t only used for saying something, they are also used to create something. Read more on 20 Websites for Font, Letter and Symbol enthusiasts

5. Stop Doubting Yourself

Self doubt is a huge thing to overcome a a person, every person faces it sometime or another.When the time comes and you break free from the emotional stumble block a whole new world opens up. Like I said earlier don’t compare yourself to other people, take a stand and believe in yourself, you will accomplish a lot.

6. Get Away For a Day or Two

Sitting in front of the computer days at a time isn’t good at all. My advice is to go away with friends or family for a day or two, the change of scenery will change your thinking patterns and a few ideas might spring up in the process. Keeping a balanced lifestyle is very important in the work that we do, working out is essential.

7. Take your work to the nearest Coffee Shop

Working amongst a busy environment can be very beneficial, especially if you have to come up with new concepts and ideas. The reason is that nothing stays the same, it keeps constantly changing and therefore your thinking changes. You won’t understand the difference until you have experienced it yourself. Try it.

8. Go out with some friends

A night on the town with some friends can bring across some inspiration as well. Having fun and taking your mind off work lets you relax and have fun and not think about your clients.

9. Listen to some Music

Try changing your usual music taste to something different that you don’t always listen to. It broadens your spectrum of thinking and moving by inputting some new sounds and words. A lot of inspiration can be drawn from a simple song. Read more on 20 Fantastic Ways to Find New Music that You Like

10. Follow Some Tutorials

You might think that you don’t want to follow tutorials because you want to come up with your own work, but learning new techniques is the only way to improve your skills and creativity. Following tutorials is a very good base to start off with, because you can add your personal touch to the image you are working on.

A couple more articles:

• The Cure for Creative Blocks?
• Dealing with creative block
• How great artists have fought creative block

And this just gives you random short ideas on how to overcome the block: Design ideas for when you are out of ideas

Read More

“People who know what they are talking about don’t need Powerpoint”
(Steve Jobs)

He got a discussion going on what is good and bad about slides (people’s opinion).

Bad: too much content, bad graphics (out of context, bad quality), audio effects, bad contrast, “Comic Sans”.
Good: visuals, contrast, communicate idea, uncluttered

Good slides tell stories about data too. (Difference between Bill Gates presentations from now and then)

“You must unlearn what you have learned”
(Yoda)

Keep in mind: Restraint, Simplicity and Naturalness

Look things around you, learn from the past and as much as possible get away from the computer to get ideas. “Be here now, be somewhere else later” (commenting about people in meetings with laptops on – and eventual email checking/twitter).

“We cannot see our reflection in running water… it is only in still water that we can see”
(Taoist proverb)

We are naturally storytellers, if you want to connect: tell a story.
Storytelling – harmonious blend of words, images and sounds.

(He mentioned Robert McKee – http://mckeestory.com )

Other things to keep in mind: Change, Conflict, Contrast (example of StarWars poster with contrast between characters)

Scott Adams – the joy of work (Dilbert creator)

Do or not do, there is no try
(Yoda)

He showed pie graph with 3 keys but only 50% 50% relating to do or not do (very nice!)

Empathy is important – put yourself in other’s shoes

Colours: choose colours in your pictures/words similar the one as the data showing in graphs

Quickly showed a video about Hans Rosling and his passion about data (www.gapminder.org)

Be passionate – like Steve Ballmer (showing his passion through sweat! )

Simplicity is good but simple is not.

“Simplicity is the ultimate sophistication.”
(Leonardo Da Vinci)

“Everything should be made as simple as possible, but not simpler.”
(Einstein)

Parody on simplicity:

(http://thegeniuses.tv)

“In the beginner’s mind there are many possibilities. In the expert minds there are few.”
(Shunryu Suzuki)

Fall in love with the problem, not the solution.

He also mentioned the concept of gamestorming

Cool way of styling the way people select things in your web page:

  /* Safari */
  ::selection {
    background: #a8d1ff;    
  }
  /* Firefox */
  ::-moz-selection {
    background: #a8d1ff;    
  }

Try selecting anything in the text below:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae purus justo, feugiat varius leo. Curabitur tincidunt, purus vel luctus faucibus, risus leo egestas ipsum, non pretium dui diam in magna. Pellentesque auctor convallis sollicitudin. Proin sit amet diam elit. Proin dui purus, pellentesque vitae tempus eget, bibendum id augue. Sed pulvinar ante at turpis ultricies ullamcorper. Donec urna quam, tristique vel fringilla luctus, cursus in diam. Praesent eget tempor erat. Etiam semper scelerisque vehicula. Etiam vel lorem nulla, in rhoncus eros. Aliquam non neque urna, commodo dignissim tellus. Fusce venenatis, quam vel pellentesque pellentesque, nisl risus interdum quam, et convallis lectus felis sed turpis. In rutrum massa at quam tincidunt eget pharetra odio ullamcorper. Suspendisse eu lorem ante. Donec feugiat molestie nibh, in sollicitudin augue gravida non. Sed a nulla dui. Curabitur a velit purus. Nam ac lorem vel lorem volutpat hendrerit.

Thanks to: CSS Tricks

Future of Web Applications – Day 1

Get excited and build things!

by Christian Heilmann – Mozilla

Over the last few years the internet has taken over. It is not a geek thing or something for university researchers. It is in our homes, on our mobile phones, on our tablets and even in our game consoles and TV sets. With that much exposure comes a lot of advertising and everybody wants a slice of its fame. The trick to make the best out of it is to jump right into it and not fall for the siren song of advertisers telling you that their product is what makes it work for you. All the web technologies that deliver the magic are open and have been proven for years. It is up to you to grab them, shake the box and find out how they work. In this session Chris Heilmann of Mozilla shows how being open and being interested helped his career and how you can find talent, build cool products and make a living through being excited and interested in the tech behind the media.

Breaking the lock:

• Web Intents
• Boot to Gecko
• Open Web Apps
• Web api
• Browser ID
• Fullscreen / notification / context menus

Web apis: dialer, sms, telephony and msg api; address book: contaccts api; clock, calculator; camera api; gallery: filesystem api; settings: device status api, settings api; games: accelerometer mouse lock api;

Mozilla has an open framework of apps, so it will show an apps bar on firefox, opens in fullscreen, utilises touches, etc (if on tablets). All that is needed is a metatag on the page saying that it has a different view (in this case an app) and firefox (and/or other browsers) will know there is an app available. Links become integrated: if you have a NY times app and twitter app installed, if a NYtimes link is clicked on Twitter, it wouldn’t open the browser window, it will open the NYtimes app since it is already installed (streamlined look).

MUST check: https://apps.mozillalabs.com

We’re in a crisis, game: http://playspent.org/ some article about it: http://staffingtalk.com/spent-online-game-challenges-last-1000/

BEAUTIFULLY done Slides at: http://icant.co.uk/talks/fowa2011/

Article: Animating with javascript: from setInterval to requestAnimationFrame

Sprite Sheet animation with CSS3 using the steps() feature.

What’s Next for JavaScript and the Web Platform

by Alex Russell – Google

Lots of new features are landing in the web — WebGL, WebAudio, Databases, etc. — but lowly old JavaScript, HTML, CSS, and DOM are all set to change dramatically in the near future too. Data binding, a true component model, and a better language for using them from are all in the cards, and they’ll change everything about the way you build apps. This talk examines what to expect, when, and why from
the perspective of the Web Platform team inside the Chrome project.

Frameworks and compilers are Plan B
Say what you must vs say what you mean

Alex explaining a bit about CSS Variables and CSS Mixings, CSS nesting/hierarchy (very good so you don’t have to repeat and write the class name over and over again… just use indentation). Mentioned about Shadow DOM and use of template tag.

The Future of Commerce and the Opportunity for Developers

by Neal Sample – X.commerce

The commerce landscape is undergoing massive change driven by consumers adopting disruptive social, mobile, digital and local technologies and services. Learn why we are building the X.commerce platform and how developers and merchants can leverage it to profitably meet this increasing demand and grow their business. Get details of how the platform is built, the opportunities it presents and how to engage, innovate and profit with us.

Why use a platform for commerce?
For the Merchant is easy to adopt new capabilities and at low switching costs. For the developer there are no barriers to entry, easy on-boarding of customers.
What makes a good commerce platform?
Firstly, should be robust, secure and scalable; then should have ability to change, be autonomous and modular; finally should be rich platform with consistent interfaces and developer-friendly! And now a new requirement: to be cloud ready.

Neal introduces x.commerce ‘Fabric’
It is a type of ‘broker’ that manages the data exchange and interactions betweaen all capabilities in x.commerce
Benefits: connect once to access all capabilities; innovate and customise in almost any language; seamless operation, not costly point-to-point integration.
It embraces opensource.

Merchant Awesomeness
Reach more customers
Ease of use for time-to-market
Future proof – built on open technologies
Insights through data and analysis
Trusted applications and developers

Developer Awesomeness
Reach more merchants
Ease of development with standards and hosting
Better monetisation through technology and services distribution
Relevant data for targeting and personalisation

@nsample
ns@x.com
https://www.x.com/

Spine, a Lightweight Framework for building JavaScript Web Apps

by Alex MacCaw

This powerful framework is only 2K but it gives you MVC structure for your JS app. Learn how to use it for your projects.

Spine, MVC Javascript framework http://spinejs.com/

He mentioned that would like to be sending email but not having the UI blocked (I don’t know if Spine does asynchronous that he just mentioned, but I found the concept interesting…)

Spine docs apparently is REALLY good: http://spinejs.com/docs/index

Spine gives us:

• classes and modules (good if you are just writing pure javascript since it doesn’t have classes and modules
• routing
• ajax
• dependency manager (Hem)

Example for fowa (but check spinejs examples too) http://spine-fowa.herokuapp.com/#/pages

Also mobile release: http://spinejs.com/mobile

@maccman
http://alexmaccaw.co.uk/

Found these after presentation, might be of help:
http://addyosmani.com/blog/building-apps-spinejs/

Responsive Web Apps

by Nick Pettit

Learn how to make your app look great on any mobile devices, while also delivering a more focused user experience.

Main elements: fluid grids, fluid images, media queries

• Fluid grid formula: target/content = result
• Fluid images: img{max-width:100%;}
• Media queries: @media screen and (min-width: 320px) { //css here } – adjust layout based on the width of the browser

Where Nick check design patterns/inspiration: Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns

Think about mobile first, adjust the scale, adjust the layout, make it vertical, use a visual, make it ‘responsive-ish’ (adaptive design instead of responsive, usually work on existing complicated websites) and his favourite: “just get rid of it”.

Check Responsive Data Tables

Slides for this presentation here: http://t.co/FBR62lHC
@nickrp

This App is 1% Finished: How to Rethink and Rewrite

by Bob Baldwin – Facebook

No matter how great your app is, you need to always be looking to make it better. Stop being complacent, put all ideas back on the table, and start building the next version. If you can start by believing you’re only 1% finished building your app, you’ll be more open to making bold changes that’ll push your app forward. I will share advice for orienting team discussion and how to recognize true product progress, drawing from my experience rewriting Facebook Groups, Questions, and Events.

If your app is 1% complete now, what would be the 100%? Be humble about your past/recent achievements.

Think about your challenges
Dislike your own app (find problems!)

Build extreme prototypes – then you’ll find the extremities; find the edges of what works (example of facepiles – right bar with friends chat and updates, etc.)

Facebook team debate about the names of things, for example, should Groups be named groups or something else? Discussion about button positions, colouring, states, text, etc.

Focus on impactful features (example of ‘join a group’, ‘invite a friend’ which generated over-large groups. Ended up only with ‘ask to join the group’, ‘add friend’ – pay attention to the words).

Focus on Key interactions. Choose meaningful defaults.

facebook.com/bobbaldwin

Building HTML5 Games

by Giorgio Sardo – Microsoft

Tired of playing Angry Birds, Farmville, or Pacman? Come learn how you can build the next cool game in HTML5. Expect code, best practices, experience from the field and lot of fun!

Games on html5 is not only about canvas… there is css, svg and other techniques…

These demos were just a-m-a-z-i-n-g:

• http://agent8ball.com
• http://www.worldsbiggestpacman.com/play/#0,0 (unbelievable the number of maze screens)
• http://www.ietestdrive.com
• http://jsdo.it/event/svggirl (amazing! change on the fly colours on animation and play it again!)
• http://www.pirateslovedaisies.com
• http://disneydigitalbooks.go.com/tron (one of my favourites, remember to grab and scroll side-to-side don’t click enter and wait or you’ll wait forever!)

Multi-touch experience

Today: mousedown, mouseup, mousemove
Webkit model: tourchstart, TouchMove, TouchEnd, TouchEnter, TouchLeave
Microsoft: multitouch doesn’t matter how many fingers

How to play from an airplane?
App Cache
IndexDB

bit.ly/gisardo
@gisardo

10 Tips for Web App Success and Profitability

by Dave McClure – 500 Startups

Launching a web app is fraught with danger, so learn 10 tips that will help you avoid the Dead Pool.

How to pitch to a VC

Concentrate on pitching your problem (not your solution)
Read Geoffrey Miller books:

• The Mating Mind: How Sexual Choice Shaped the Evolution of Human Nature
• and Spent: Sex, Evolution, and Consumer Behavior

The Elevator Pitch: only 30 seconds!, Use short, simple memorable words (what, how, why). Example: 3 key workds or phrases. No expert jargons, just KISS (Google it if you don’t know it).

The Problem: what is the problem? make it obvious! Who has it? Make emotional contact. Explain how painful the problem is… Painkiller not vitamin. Check blog post “Your solution is not my problem“.

Your Solution: great products and companies do 1 or more of these things: sex, money, power – and how your solution makes your customer happy and how is unique, if it is not unique change the way you pitch to get that uniqueness (example: it is different from company X which allows “left handed mothers to swim with their kids” – is not unique but found a niche)

The money shot: demo, screen shots, video; PRACTICE!, if demo fails have a backup (screenshots, local video, interpretive dance). Expect to be interrupted (if they interrupt: they care! it is good, answer the question first, only then go back to your presentation)

Market Size: bigger is better. Top down = someone else reported it (Forrester, Gartner, your uncle); Bottom up = you do it… calculate users/usage/revenue in money.

Business Model: describe top 1-2 sources of revenue, prioritize by size or potential (too many sources: you don’t know much); common revenue models: direct – ecommerce, subscription, digital goods; indirect – advertising.

Proprietary Technology/Expertise: VCs ‘really’ like unfair advantages (lead, experience?)

Competition: Are you Better or Different? – list ALL your competitors!!!

Marketing Plan: how to get customers and distribution? there are lots of channels and decisions, choose a few: PR, contests, direct marketing, radio/tv/print, telemarketing, emil, seo/sem, blogs/bloggers, viral/referral, affilite/cpa, widgets/apps.

3 things that matter / to measure:

1. volume
2. cost
3. conversion

Team: people that get VCs hot: geeks (with deep tech experience), entrepreneurs (who sold companies), sales/marketing (who bring customers money).

Money: How much money (3 budgets: sm, md, lg). What will you do with the capital? (new hires to buid product; mkt & sales to get customers more money; ops & infrastructure to scale up)

Presentation at: http://www.slideshare.net/dmc500hats/10-tips-on-how-to-pitch-a-vc-fowa-london

Check last slide of presentation for Additional Resources!!!

Future of Web Applications – Day 2

How to pitch your app and get big coverage

by MG Siegler – TechCrunch

The number one question I get asked is for advice as to how to pitch a tech blogger about a app/startup/idea. The answer is fairly complicated since every blogger is different. So instead I’ll proceed with a 40 minute lecture on the matter. And yes, I’ll cover the embargo nonsense. In detail. With curse words.

First real rule: Build a great product.

Second rule: Know what you are pitching.

If you have to ‘go back to you on that question’ etc. it is not a good sign. If someone is pitching for you/your company they should do research, they should KNOW everything (or almost everything) about what they are pitching for.

The world has changed, remember who is your public. The blogs ‘rule the world’.

Press releases are for losers.

If you have a better connection or relationship with TechCrunch and other companies you would communicate first in different ways. Press releases are welcome for the more general publicists, if a press release was sent to him as the first point of communication would highly be ignored.

You should work with journalists, not shout at them.

If you must shout, then blog!

If you have something to say it, say it! Don’t push someone to write bad things about your competitor. If there is something that you don’t agree write yourself. (example: Steve Jobs getting frustrated with Flash).

The adage: no such thing as bad press.

It is true in majority of cases, especially for tech startups. It is a way to get your name ‘out there’ above the crowd.

Find your guy

Know who it is at that specific publication that will suit your interests and have specialty into what you need. Don’t direct emails to the general company, find a name….

Techcrunck doesn’t like to work with embargoes… there is always something happening and excuses were heard many times… “I hit the wrong button”, “Our timestamps are screwed up”. If you must deal with embargoes, stick with writers you absolutely trust. Otherwise, you burn a bridge. If you use more than one writer use different angles to your advantage.

If you launch your product with too many at once could be an overkill.

Again back to the golden rule: build a GREAT app.

One story is the kindling.
Your app is the fire.

kin·dling (kndlng)
n. Easily ignited material, such as dry sticks of wood, used to start a fire.

If you cannot do it personally, write an email adding some personality. Pictures and videos are your friend for this type of situation. Verboseness is your enemy. Be passionate!

If you get no response, try again, and again, and again. Don’t be discouraged, the company could be in a pile of emails, or the time is bad… doesn’t mean that the company is not interested.

Pitching in different ways… instagram, twitter DMs, IM, Facebook messengeTr, Quora, twitter itself.

Friend of a friend, the social filter could help to reach the person you need.

Keep the pitch short, sweet and to the point.

The magic word: “world exclusive!” exclusivity and full access to the story will have a bigger chance for the company to work with you.

The f*** off word: embargo

Best time to pitch: right before you launch your product. A few days before launch.

Launch!

by Ryan Carson

The worldwide launch of YOUR new app covered by TechCrunch. If you want to launch your app, please email Louise

Great idea of having startups presenting their apps, giving the pitch and also getting feedback straight away from MG.

cityking.com – list of best of London, based on social sharing scores.

Jottify.com – social network for creative writters, difficulty on how to become a writter, (started as enovella), they transform to the right formats, 70% of value passed to author, 30% held for maintenance of website, etc.
Key words on the site “write, discover, sell”
Site design is quite nice and I really liked the idea!!!

LayerVault.com – simple version control for designers.

Scrollable timeline so you could see the evolution of the design, you could download the PSD in any version. Really great app, just waiting to come out for Windows (yes, I use Windows, not Mac, for my designing… booo)

The Things of the Future: Putting People First

by Cennydd Bowles

Technology has, of course, changed the world – but its main power has been social, not commercial. Despite the best efforts of the industrial age, the general public now holds the cards. They can have any colour they like, including black. They can bring down newspapers, industries, and governments. They’re not going to take your shit any more.
So farewell and good riddance to “pile em high and sell em cheap”, saturation advertising, and consumption culture. It’s time to put people – and humanity – at the heart of business.

If you talked to people the way advertisers talk to people, they’d punch you in the face

The product of the future should be … more human.

Great example: Innocent fruit juice package example, message on the bottom of carton: “stop looking at my bottom”.

http://wackaging.tumblr.com
bad examples of packaging trying too hard.

Toasting bread, cool button that says “a bit more” so it is just a bit more of heat but not the whole cycle so you don’t have to wait and check if the toast is burning or not… maybe is not all that necessary but it gives a nice touch and it could address a problem for a large population that was heard.

The product of the future should… tackle wicked problems.

Weightbot – track your weight app

Things of the future should… cross channels.

Each channel needs to be fit for purpose, NOT a replication or duplication of experiences #crosschannel #servicedesign #fowa #ux @cennydd

… disrupt, not only differentiate

Example: loans online taking out the middle-man (banks)

… create genuine value

total value = business value x customer value

Try to explore the customer value, designers are good in bringing customer value.

…favour intangibles

Design-led business works!

Book: Undercover User Experience Design

You’re in the Cloud, Now What? – Getting the Most Out of Your Cloud Platform

by Steve Marx – Microsoft

http://blog.smarx.com
@smarx

“The cloud” promises scalability, reliability, and easy management, but actually getting those benefits goes beyond simply deciding to use the cloud. Learn what you should consider when choosing a cloud platform and designing your application. We’ll talk about how to build web applications that can start small and grow seamlessly, stay up no matter what, and serve a global audience.

Will talk about challenges and what should be considered.

Web app expectations – requirements: updated frequently, high performance, up all the time. (not only that but keep that while doing changes/updates)

More VMs != Availability
More VMs != Scalable (make sure they have same capabilities, shared state)

stateless compute + durable storage = scalable, available app

node.js app on Azure for #FOWA demo by @smarx – American/British English ‘translator’ – http://www.twoenglishes.com/

iOS Accessibility – Why blind users love Apple

by Robin Christopherson – AbilityNet

Robin will demonstrate the amazing potential that iOS devices (and even more so their apps) have to change the lives of users with disabilities. Find out why a camera is so vital for blind users, and how apps that cost a few pence are replacing specialist bits of kit costing thousands of pounds.

@usa2day

How to find, hire and keep good technical talent

by Chris Lea – Media Temple

One of the most challenging aspects of operating a startup is assembling a team that’s truly able to build great products. Technical talent is scarce, demand is enormous, and the stakes are incredibly high. In this quick talk, I’ll discuss some tactics that will help you find, hire, and keep the kinds of people that will allow you to execute your company’s vision.

Building and maintaining the right team is essential. If you have agreat team, building a great product is almost an afterthought.

Find them!
People are not searching for jobs, jobs are searching for them… Infiltrate the communities, talk to them, find the technologies you need. Universities can be great targets.
Infiltrate relevant technical communities. Use IRC channels & talk to people. Scour & contribute to mailing lists. Attend meetups.

Have a tech blog. It is also a recruiting tool. Make sure you have a good referral program for existing employees.

Hire them!
Can they do the job? do they fit in? Culture is critically important. Would you hang out away from the office? ask existing employees the same question, if the answer isn’t yes, it’s NO.

Traits to look for: do their hobbies outside work involve ‘learning how stuff works?’, do they have any good war stories (big mistakes are good if they could turn around as positive), have they contribured to any open source projects? passionate enough to argue about? (about their tools, which text editor, workflow, etc.)

Keep them
Sunrise period (90 days?) to evaluate the person. What do you value about the job? (not only money), lifestyle freedom is a powerful motivator. This works if there are good communication patterns.

Allow workers to have a say on what they are building. Don’t let anyone be in the hero role, ever. Make sure they go on holidays, preferable away from the computer.

If your employees don’t use what they build, find out why and fix that!

Another post about this presentation at: http://thenextweb.com/insider/2011/10/05/how-to-find-hire-and-keep-top-technical-talent/

Better JS with CoffeeScript – 37 Signals

by Sam Stephenson – 37signals

Learn how to write cleaner and faster JavaScript with CoffeeScript. We’ll also cover where this is leading in the future.

CoffeScript is Beautiful & I never want to write plain javascript again

Hello World using Google Web Toolkit looks ugly! too many lines of code. Pyjamas (Google Web toolkit in Python) also ugly code… Then there is Objective-J better but bad documentation.

CoffeeScript is just javascript, but the good parts. It is shorter, more streamlined, no more var. runs anywhere, JSLint compliant.

10 Things I Love About CoffeeScript

1. Function Syntax
2. Significant Whitespace
3. Bare Objects
4. Comprehensions (borrowed from Python)
5. Classes & Inheritance
6. Bound Functions (built into the language)
7. Conditionals
8. Destructuring Assignment
9. String Syntax

Slides for this session: http://t.co/yLPzadu0

To Catch a Virus

by Barbara Macdonald – Willet Inc

Finished building your awesome new app and ready to take your market by storm? Get ready for the real hard part: getting users. It’s a challenge that engineering can’t solve but with the right planning, user growth can be incorporated directly into your core product. How? Viral loops.

Couldn’t participate of this session (was cuncurrent with CoffeeScript) but apparently was really good and the slides are here http://www.slideshare.net/becmacdo/actual-fowa

The Future of CSS

by Hampton Catlin – Moovweb

CSS has changed very little in the last decade. Its feature set has remained roughly the same since the day it was introduced. In this talk, I’ll introduce you to Sass, a major upgrade to CSS that you can start using today in your projects to make your CSS styling far more awesome.

SASS is not dynamic, it compiles to css; not server-side, developer-side (generate the css on your machine then go to server).

3 steps: first Walk – then Jog – then Run.

Using it: sudo gem install sass sass –watch thefolder. Check SCOUT. Other implementations: Ruby, python, .net, php, django, etc.

It is great for describing colours, if we know a colour, for example #369, if we want a lighter blue than that we can specify with percentage…. color: (mycolour, 50%)

Check example on Sass site about mixin

sassymothereffingtextshadow.com

sass-lang.com
http://compass-style.org

Book: Pragmatic Guide to Sass – discount code: “FoWA2011″ gives 25% off

Slides of this presentation: http://www.slideshare.net/hcatlin/future-of-web-apps-sass
@hcatlin

Mobile Web Apps: Where Are We Headed?

by Ernesto Jimenez – Vodafone

In this session we’ll take a look at what’s the future of Mobile Web Apps. We’ll do an overview on the status of Mobile Web Applications, what are the main players and projects to keep an eye on and where we are going.

jQuery mobile, PhoneGap, working on better standards: geolocation, device orientation, media captures, contacts, calendar api, focus on delivering a good user experience, do not focus on one browser only, be responsive (not only in your designs, but also getting back to users’ feedback).

Node.js, Socket.IO and Express

by Jim Hoskins

Learn how to use this amazing trio to build powerful JavaScript apps

Socket IO http://socket.io

Node.js What the node.js has that other webserver doesn’t have?
Typical web server: receive request > secret sauce > send response. Could split in multiple requests to make it faster.
Sockets ‘stick around’
Evented I/O (solution that node is based upon).

An analogy: L1 cache would be like taking a paper from your desk (3 sec), L2 cache would be like putting a book on a shelf (14 sec), RAM would be equivalent to have a 4-min walk on the corridor to get a Twix bar.

Fast: L1 cache, L2 cache, RAM (synchronous)
Slow: HD, Network, Services/DB (callbacks)

Evented Web Server
Receive request > secret sauce (but release control to call back later) > receive request > secret sauce (again release control) > do some code > send response (to that first request) and so on…

Example: http://wordsquared.com
Node.js projects: nodeknockout.com

Go Build Something!
@jimrhoskins
jimhoskins.com
jim@jimhoskins.com

Write better markup through writing better CSS

by Chris Coyier – Wufoo

Use the semantic tags, don’t add more classes on the html code, use it on css!

Slides: bit.ly/fowa-better-css
And a post from Chris: http://css-tricks.com/14492-writing-better-html-css-slides-from-fowa-london

@chriscoyer

Couldn’t resist and had to include this presentation by Luca Salvini. Sit back and enjoy!