chromoly: road popper

chromoly: road popper

the road popper is a bike-mounted bottle opener designed by the canadian design duo chromoly. Designers jonathan sabine and adam pickard developed the design for their own use and decided to share it, polishing the design for production through shapeways. the design attaches directly to the rails on the underside of the saddle, keeping out of sight. users order the product and it is produced on demand using the rapid prototyping services of shapeways in bronze infused stainless steel.

http://www.chromoly.ca

christophe robillard: victor bike

christophe robillard: victor bike


image: christophe robillard

the victor bike is a concept bike created by montreal based designer christophe robillard. the bike is most notable for its unique frame, which is bent so that it requires less tubing. the bend is most noticeable on the back wheel, where it is connected to the bottom tube on the left and the top tube on the right. The bike also has integrated reflectors on the back fender and front tube. the bike is a fixed gear with a chain guard and a front wheel hand brake.

http://c-d-robillard.blogspot.com


image: christophe robillard


image: christophe robillard


image: christophe robillard


image: christophe robillard


image: christophe robillard


image: christophe robillard

10 Simple steps to run a website project

These are by no way definitive, just a suggestion to get you on your way.

1. Set a target
What is the point of the project and what are your clients' goals? Is it to rise visitor numbers? Increase dwell time on the site? Defining the goals with a client is key to keeping the project focused.

2. Be ambitious, but realistic
Does your client really need augmented reality to sell a pen? Wouldn't it be better to build a tool that showed how the pen writes, before making a purchase?

3. Plan, plan and plan some more
A project WILL fail through lack of planing - it may get finished, but it will miss the target without proper planing. Every project should go through a wireframing process, with client sign off before moving onto design.

4. Don't confuse your client
Even with a very technical project, keep it simple for the client. You will not gain any respect for using big words. Stop playing buzz-word bingo, speak in plain terms.

5. Client sign off
Make sure you get the client to sign off each and every stage of the project.

6. Don't treat it like a print project
If you've got experience of running/working on print projects, put that experience to one side. Every aspect, from timings and resources to deliverables and required skills are different. 

7. Choose the right technology
HTML, FLASH, jQuery, ASP, PHP? Each technology has it's place, and you need to have an understanding of what each can offer and its limitations.

8. Testing 1, 2, 3…
Always allow time in your project plan for testing, no matter how small the site. 

9. Publicise your project
Proud of what you've just done? You should be, so why not tell everyone about it? It brings publicity to your clients new site and to those involved with the project. Everyone's a winner.

10. Did you hit your target?
After the dust has settled, the Champaign glasses cleaned, arrange a meeting with your client to discuss the results of the project - maybe a couple of months down the line. It could also be a great way to pitch new ideas and get your client excited about future work.

Why designers should and shouldn’t code

Great overview of an old & ongoing debate from Richard Rutter over at clagnut.com

All started from a little tweet:

Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse. – elliotjaystocks

Personally I never touch code of any flavor, but I don't believe this makes me a bad designer. I do have a good understanding of what is/isn't achievable code-wise, this comes from working with some great developers. Only when working as a member of a team of experts do you achieve a great result. You can be good at many things, but it better to be great at one thing.
Now it's worth going over to Elliot's site to read the full article he's written about his tweet as he explains his reasoning very well.

Explaining the Wireframe

A wireframe is a framework which defines the basic layout, placement of content and page elements (such as navigation, header & footer) within a website

Wireframes serve a central function in the development of a website. Devoid of graphic (visual) treatment, they represent the architectural design of the website – and serve as a blueprint for graphic designers to produce visual designs (user interface), and for developers to build functionality.

Just as architects create blueprints that show the form of the building, define the functionality of services, and provide the builder and interior designer specifications from which to work, web developers create wireframes. It allows them to define areas of content, functionality and navigation strategy, which will become the skeleton of the resultant site.

Why do we use wireframes?

It’s not what you look at that matters, it’s what you see

A wireframe, whether in electronic or print form, allows all interested parties to focus on the core function of each page, and helps to remove the sometimes ambiguous nature of creative design until a later stage. With many disparate interests in the website (design, SEO, copy, marketing, business development), it is IMPERATIVE to focus on function, and allow creative design to flow from this.

wireframe01 wireframe02 wireframe03

What’s in a wireframe?

  • Layout: General placement of page elements such as headers, footers, navigation, and content areas. It should communicate decisions about navigation strategy of the site while also showing the hierarchy of page content.
  • Content elements: What content needs to be present on the page.
  • Functionality: Links, forms, animation etc.
  • Additional: Notes/annotations may be added as to how elements should be displayed, or their functional behaviour.

Key deliverable

The sign-off of the wireframe will allow the graphic design and development phases of the project to begin.

What it is not

It is not a finished design and does not cover every element of fine detail (such as links to each page). Importantly it is a work in progress; the wireframe is there to assist with and organise the thoughts of all stake-holders in the project, prior to development.

Who uses the wireframe?

wf-table