John hicks (johnhicks.co.uk)
Example project which will be online soon on
www.cheesophile.com
Preset folder for projects
[css]
[img]
[dev] (photoshop/firewroks etc)
[js] (js sample etc)
[swf]
[library]
index.html
Settup a localhost
Headdress and mamp voor a localhost..
Before you think about styling think about your content.
Open up your fireworks or your photoshop and create in the toplayer title of where you want which html element. Where does the H1 go or the menu will be a UL ist etc..
Then build up your (x)html
Do this on your favorite way. And put a skip to content element in the beginning.
Define the browser support
Y! grated browser support
Support does not mean that everybody got the same website.
www.Developer.yahoo.com/yui/articles/gbs/
Basic structure
- basic HTML
- basic css
- use a lyout.css (layout with @import/**/
- Use a reset.css (reset stylesheet)
- use a typography.css (typography stylesheet)
Typeface choise
example1. Helvetica, Calibri, verdana, arial, sans-serif
Example2. Gill sans, trebuchet, Helvetica, arial, verdana
Both examples gives weird results.
Some typeface tricks
- Try letterspacing letter-spacing { -1px;}
- Heading line height Line-height{ 1.4em;}
Design a grid for the site
Design the grid with grid calculator
www.29digital.net/grid/
Or use Grid layout script
www.gridlayouts.com
Where you can show the grid patern behind your html. With ctrl-shift-G you can switch it on or off.
After that the worse part bughunting.
Haslayout is the key to understanding all your problems in the browsers.
For ie6.css
Div, li {
Zoom:1;
}
—
John hicks
http://www.hicksdesign.co.uk/
Here i’m going to show some life draft of the future of webdesign event. So keep in mind that there can be typo’s and weird sentences. But feel free to comment..
Larissa Meek (agencyNet Interactive)
And here you can see the presenation on Slideshare.
And here you can see my notes of the presenation
1. Make friends with your client
- They are not your enemy.
- Keep realizing the paying money for your work.
- They have another variety of resposibilities
2. Ask allot of questions
- get to know the clients industry and business objectives
- Perform a competitive analysis.
For example: Hotdog
what are they, what are the best way, why hotdogs associated with baseball games, what are the most popular topping, can you eat them cold,
3. Ask more questions (who will be using the site?)
- What is the target age range?
- the user needs can be different as the business objectives.
- use real people for user profiles by your process
4. Use wireframes. But don’t be tie to them!
- use it as an conversation starter
- use them to indicate content priority
- it’s ok to make small changes
- get you clients to think about the functionality for your site.
- make you wireframe to scale
- walk your clients to the wireframe. The see it as lorum ipsum and blocks. Clients see it visual nog functional. You have to help them to walk though it.
- For flash site you don’t do wireframing but storyboarding
5. Talk about your design before you open photoshop.
- Before you start the design, you have color palets, a moodboard a styleguide references of other websites which were discussed with the client
- As and designer you have to understand the style guide.
- Use site examples & Color palettes to show what will be you design direction
6. One design direction will do.
Give them allot options is not a good option. Because then you are going to combine two concepts.
7. Present in the browser.
- show it in a browser.
- don’t show it through a email. You have to link them to the browser.
- Provide notes. Provide proper documentation.
8. Prototyp as needed.
- If you do a webapplication it can be very handy.
- you can check the user experiences.
(Fireworks allows you to make rapidly fast prototypes. )
9. ask for consolidated feedback. Limited rounds of revisions.
- educated your client on the importance of providing consolidated feedback.
- collect al the feedback and combine them to one document.
- too many cooks in the kitchen. Limit the feedback possibilities of the client.
Tips to get the feedback you need.
help you r clients to focus on the user needs.
10. be confident in your work
- Don’t fall in the trap of asking your clients what’s right.
- be a friend and be teaching them
11. time will tell
- With time your client will understand the design
- The client will understand the revisions
12. make the most of a difficult situation
- Stay positive
- be optimistic
- work with them not against them.
Here i’m going to show some life draft of the future of webdesign event. So keep in mind that there can be typo’s and weird sentences. But feel free to comment..
Andy budd (clearleft)
You have to focus on the whole experience. You can define the user experience within 7 experience points.
The 7 points of experience.
1st. First impressions count.
- People judge on looks
- good design can create more value to a website
- iPod is a good example. They make the unpacking of the product an experience.
- Create a nice design
2nd Attentive services
- the waiter refilling your class
- opening a new line at the checkout
-It’s just usability
- Apple for example, build the first shop inside a big hall and just tested it with customers and checked how they reacted. After that they changed it. And opend 6 flagships stores at ones with the definitive layout of the shop
3rd Person
- the barman knows your name
- at Starbucks, for example they don’t say a café late. Now they for your name when your order. And when it is ready they say your name. A café late for Paul.
- customize your website.
- like flickr, say hey paul, welcome back.
4th Attention to detail
- Like chocolates on your pillows in a hotel.
- Or in a hotel they have a written letter on your bed with the weather forecast
- In a theme park for example. Even the trash cans are customized. This is attention to detail.
- create delightful experiences
- threadless, they e-mail you if the shirt is almost sold which you have in your shopping cart.
- Personality is important.
- build in easteregs. Because then you can create great user experiences. Because people who mentioning them will be telling it to friends.
5th Feedback
- Like a gambling machine which is giving feedback with sounds.
- Like a American mailbox. The mailbox gives you feedback, if there’s new mail.
- Like a phone que that you are waiting and waiting. The better way is to giving you info about how many people are in front of you so that you can think about the time it will cost you.
- Help people to solve your problems
- buttons have to give your feedback, they must look like buttons and acts as buttons.
- the process bar at linkedin. Like how many procent you have to complete.
- show you the process of a search. (Like kayak search)
- like google maps. Gives feedback.. when you click you get action and reaction.
- give friendly feedback, on errors.
6th Make it fun
- Look at the game industrie, they make great user experiences
- We love collection, and we can share them . we love that and we get feedback from friends.
- We love collecting photo’s on flickr, we love to collecting friends on facebook or on last.fm.
- People love it to get feedback and to get regards.
7th Create the experience
- Look at vegas a place where there are a lot experiences
- look at the trainstation ticket machine. Look at the experiences..
-look around
andy@clearleft.com
www.clearleft.com
Here i’m going to show some life draft of the future of webdesign event. So keep in mind that there can be typo’s and weird sentences. But feel free to comment..
Andy clarke (Stuff and Nonsense) & Steve Pearce (poke)
Steve pearces
There is now competition against each other. Because there is no winner or loser..
Client and studio most be in harmony. There is now war.. User experience is brand experience visa versa.
See it as an iceberg..
I see the top but I want to see the whole iceberg..
The most designers create a great top of the iceberg but have an poor bottom of the iceberg..
So your homepage is great. But you have to make the whole website great.
Because the bottom of the iceberg must also be good for the great user experience..
An example google..
Not great designer but great coding.. So they have the bottom of the iceberg right but not the top of the iceberg.. so the process (user experience is great) but the brand experience is poor..
Andy clarke
People talk about something how great something is. That’s the userxperience. Think about why we going to drink starbucks in stead of going to drink a Nescafe coffee.
We consume media now a days allot diffent as 30 years ago. We get less more people to catch. For your user experience. Or it’s going to be more difficult to create something remarkle
Inspired design?
A usable design must be a safe design?
Books to read
Designing for interaction http://tinyurl.com/4tbtf8
Purple cow http://tinyurl.com/4vpgu
Here i’m going to show some life draft of the future of webdesign event. So keep in mind that there can be typo’s and weird sentences. But feel free to comment..
Patrick mcNeill (design meltdown) Finding inspiration for design
What is inspiration
Inspiration is ongoing process.. Every time a day you can get inspired.. Inspiration takes time.
And practice.Yes Practice you have to work on your inspiration. Train yourself to search for new things.
Where do I go for inspiration?
Magazines (online, print etc)
Cataloging books (typography, color, layouts, Design)
Direct sources?
Everday life (Billboards, Restaurant menu’s, Commercials)
Online (Blogs, Design showcases)
Know you source. So know the inspiration which you have seen. So try to store ideas and know all you sources for inspiration later.
Fresh ideas in fresh places
Arty histoy (Try to compare old painting with websites. So the position the action etc..)
Unexpected books (For example Economy books)
How to avoid to abuse
Inspiration vs duplication. Don’t look at websites. But look at the elements on different sites. And create a bunch of links to website with elements witch you want to used..
Usage of design trends?
Use it also as inspiration for using specific elements for your site. So don’t follow but think about why the designers did it on that specific way. If they build that in that way the have to had a reason for that.
Current Design trends?
- homepage banners (one big banner with a few links)
- Homepage video tutorials. (intro video)
- The color brown
- Super size me big fonts. Big title within a blog (easy to scan)
- Big forms (big input fields)
Future WebDesign trends
- Muted more Softer colors.
- Better usage of the horizontal space. And less vertical space..
- More usage of video
Links which where presented:
http://www.designmeltdown.com/fowd/
This week i’m going to The Future of Webdesign, which will be held at Kensington Town Hall in London.. I’m looking forward to attend the presentations and the workshops.
My favourites for now are:
- Patrick McNeil (Design Meltdown) Finding Inspiration For Design
- Andy Clarke (Stuff & Nonsense) & Steve Pearce (Poke) User Experience v Brand Experience
- Larissa Meek (AgencyNet) Getting your designs approved: 12 Simple Rules
- Jon Hicks (Hicksdesign) From Design to Deployment
- Elliot Jay Stocks (Carsonified) Print is the new web
- Daniel Burka (Digg & Pownce) Evolving the User Experience
I will update on my thaisie twitter account, and wil use twitter hash shortcut #FOWD so that you see the Future of webdesign twits combined.. You can see them here hashtags.org/tag/fowd/.
And I will put my pictures at my flickr account. So you can see what happens on the Future of webdesign event. And what I’m doing within London.
Feel free to comment, or to react at my twitter account @thaisie.