Explore Posterous

I have attended too many conferences over the years where there is always a cry to redefine "Industrial Design". It is typically a generational thing. The old guys are tired of talking about it, and the new kids on the block are energetic enough to demand resolution. This article is a well written approach that breaks down ten ways to approach the discipline. Even though both of my degrees are in Industrial Design I have always focused on the environmental, space defining elements of the profession...experience has always been a foundation to my practice so this aligns with my thinking (that is probably why I like it...). However, I do resent the reference to having the Eames molded plywood chair in the dumpster above. Mr. Fry should do some research on the history of the manufacturing process that the Eames' went through in the 1940's to understand the true context of the design (he may be surprised to find out that his 10 principles have been around for a while).

Here are the 10 methods Ken Fry lists (for a description of each point log on to the Core 77 link above):

01. Design beautiful experiences, not beautiful artifacts
02. Stop asking "what" and start asking "why"
03. Start with experience, end with experience
04. Genius will fail, wisdom will succeed. Become wise
05. Keep it simple
06. From design thinking to dynamic thinking
07. Let iteration direct your process: Work more rapidly, change more frequently
08. Have fun
09. Adapt your process to your design goals, not the other way around.
10. Preserve the experience, not your own competency

Ken Fry is Design Director at Artefact, a design consultancy that works with a variety of high tech consumer electronics, communications, and computer software clients to research user needs and design breakthrough software and technology products. Nice site: http://www.artefactgroup.com/

"Even though I've been practicing interaction design for most of my career, it is my industrial design experience that has enabled me to straddle the worlds of both hardware and software. Over the years I've seen interaction design thrive while the industrial design profession has gone into decline. I think we need to challenge the practice of industrial design. We need to adopt new behaviors to make the discipline healthy again.

At its core, industrial design has been about creating objects of desire. For nearly a century we've reinforced this understanding by celebrating the superficial beauty of the industrial designed artifact and forgetting the human context in which that artifact lives. Too often designers ignore how people interact with products over time, the cultural relevance of the artifacts they create, and the social and environmental consequences of their design decisions. We've allowed this malady to infect our schools and seduce our customers. The problem is pervasive. We need to do more than attach new words to our definition of industrial design. We need to redefine what industrial design means."

Article continues at link above.

Sep 17

7 Steps for Systematizing The Design & Build Process

• Posted in DESIGN
• 1 Comment »

Systemization is basically what it says on the tin, i.e creating a series of processes or a pre-defined set of steps to speed up and quicken a laborious and or repetitive task.

So how can you systemize the design & build of websites? The day to day nuts and bolts of your business?
Below are 7 steps you will need to create systems to fulfill repetitive and dull tasks so you can save time for creativity to flow.

Snippet Repository

Absolutely everybody should have a code / design repository. You can use a dedicated program, like code collector pro: http://www.mcubedsw.com/software/codecollectorpro or just build a folder filled with text / html & photoshop files containing your code or design elements.

Here’s a few ideas as to what you could store to save you countless hours in re-writing, re-designing and wasting time:

• Contact forms (create one which allows you to quickly customize for different projects
• User Management / login scripts e.t.c (create one that is not heavily integrated into your design with loads of inline code for even more time saving)
• Payment handlers and online store scripts (if you’ve built one before, why not re-use it?)
• Commonly used design elements (buttons, headers, layout’s, footers e.t.c)
• Anything else you’ve built bespoke before that could be of use, store a stripped down, non specific version for a later date
• Designers will find it handy storing away a ready to roll HTML template, complete with doctype and link to stylesheet already inserted. This will save time when starting new projects as opposed to starting from the ground up.

CodeCollectorPro: http://www.mcubedsw.com/software/codecollectorpro

Code of conduct

If you work in a team of any size, you’ll know that once a piece of code or script is passed around, things can start to get messy. Everyone has different styles, and will implement their own unique quirks into code. Because of that, if you come along afterwards, it can be quite hard to get to grips with the way something’s built or why that div was floated to the left – so develop a template or guideline as to how everyone in the team should work.

It might be as simple as saying that CSS properties should be defined in order of:

• width
• height
• color
• position
• misc

You may also wish to request everyone uses self explanatory function and class names, for example if an element is to contain an advert, and is located top left, it should be named "#topleftad".

Pre-made templates

If you find yourself with a spare hour or so, you might decide to create some designs that you can code, and have ready to ship when needed. This will reduce time spent creating sites from scratch. Simply design the template, either with a generic style or target it at a specific industry, such as a landscaping company- whatever suits your business.

You might also build out skeleton sites, that is a site with features you commonly integrate into a site. That might be a wordpress install with a newsletter plugin, contact form & SEO plugin. Systemizing this process can save hours in unneeded extra work!

Canned Email Responses & pre written scripts

Although not technically part of the systemization of developing and building sites, you may as well optimize the way you communicate with clients while your at it. It would be wise to consider frequently asked questions by first time clients, and then write out an answer ahead of time.

Then the next time they ask "I want a website, how much will it cost" – instead of writing out a complex long answer, its pre-written. That can save anywhere between 5 and 20 minutes per emails sometimes.

To save even more time, pop these FAQ’s on your site, and you’ll cut down on these emails in the first place!

Coding Frameworks

Using a coding framework will save you masses of time. Once installed, you have a library of pre-written, validated elements to use.

The great thing is, there are loads of frameworks, to suit developers & designers.

Frameworks for Designers

Designers will benefit from checking out CSS frameworks and Grid / Typography systems. In short, design frameworks will save you time, give you cleaner more structure code and achieve an optimal browser compatability.

Here’s a few worthy of note:

Blueprint CSS – http://www.blueprintcss.org/

Blueprint is a CSS Framework which aims to cut down your development time by giving you a grid system, typographical guidance and even a print stylesheet. Plugins are available for buttons, tabs and sprites.

YAML – Yet Another Multicolumn Layout – http://www.yaml.de/en/home.html

Another HTML / CSS framework designed to be lightweight and based on web standards. Features include modular construction and design for accessibility.

Eric Meyer CSS reset - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Reset browser default CSS properties so you start with a clean slate every-time. Stops bizarre bugs and quirks where your CSS conflicts with the browsers.

YUI Grids CSS – http://developer.yahoo.com/yui/grids/

Yahoo is another major player in the framework sector. YUI offers four preset page widths, preset templates, ability to stack regions and is only 4KB.

960 Grid - http://960.gs/

A css grid system for developing professional, solidly laid out designs.

Coding Frameworks

Using a framework for development work will also great benefit you and your team. You can integrate MVC (Model, View, Controller) architecture into your coding. Basically, that means that the data (model) is separate from the Controller (which grabs data from the model) and combines that with the view (what the user sees.) Quite often, you’ll see components and tools included to help you build complex applications faster.

Using a framework will also mean you can scale your app, lower costs and developers need to write less code.

CodeIgniter - http://codeigniter.com/

CodeIgniter is an open source web application framework. There’s very little configuration required when implementing, you don’t need to use the command line and you don’t need to stick to restrictive coding rules.

You save time, because the framework provides you a rich set of libraries for commonly needed features.

CakePHP - http://cakephp.org/

CakePHP aims to achieve a similar "rapid development framework" to CodeIgnitor. It has an active community meaning there’s lot of opportunity to get support if you need it.

Zend Framework – http://framework.zend.com

Extending the art & spirit of PHP, Zend Framework is based on simplicity, object-oriented best practices, corporate friendly licensing, and a rigorously tested agile codebase. Zend Framework is focused on building more secure, reliable, and modern Web 2.0 applications & web services, and consuming widely available APIs from leading vendors like Google, Amazon, Yahoo!, Flickr, as well as API providers and cataloguers like StrikeIron and ProgrammableWeb.

Zend supports -

• AJAX support through JSON – meet the ease-of-use requirements your users have come to expect
• Search – a native PHP edition of the industry-standard Lucene search engine
• Syndication – the data formats & easy access to them your Web 2.0 applications need
• Web Services – Zend Framework aims to be the premier place to consume & publish web services
• High-quality, object-oriented PHP 5 class library – attention to best practices like design patterns, unit testing, & loose coupling

Javascript Frameworks

What if you could add animation, dynamic page reloads and better user integration, without writing raw javascript from scratch? Well you can. Using a javascript framework. You get pre-made and tested functions to utilise typically for free from the many high quality open source frameworks out there.

Jquery - http://jquery.com/

jQuery simplifies HTML document traversing, event handling, animating and ajax development. Its free, lightweight, cross browser and CSS3 compliant. Its probably the most widely used jQuery framework, and there are 1000’s of tutorials and plugins available around the web.

Build your own

Of course, if you have the time, then you could build your very own design, css or coding framework. This would be a combination of elements, functions or properties you use frequently, and having them stored away will save you countless hours. You can basically re-purpose most of these elements from past projects, ready for future ones. You might even create Photoshop frameworks. Because you build your own, you’ll be able to tailor it perfectly to your workflow.

Accounting, Project Management and Client Management

The 3 fields above are essentially full time jobs for 3 qualified people. So why should you as a freelance designer or developer be struggling to balance the accounts, keep projects running smoothly and actually working on the projects yourself?

Its time to get some help. Using readily available web apps, such as Basecamp, Highrise & LessAccounting you can securely and quickly keep your business running smoothly. This will free up several hours per week for you to focus on what you love doing.

Customer Support sites

Support is very important, because things break, customers get confused and all havoc generally lets loose.

So, set-up a support site, with documentation on how to set-up emails or how to use your CMS and cut down angry phone calls and countless emails. Including screencast videos will ensure that even those who know very little about computers can follow along. You could use a specialized support application like helpserve http://www.kayako.com/solutions/supportsuite/ which handles support tickets to keep everything super-organized.

So, with just a few ideas on how to systemize your business, you’ll be freeing up 5, 10 or maybe even 15 hours a week, and cutting down on boring, repetitive tasks. Systems can take a few hours to set-up, but they will return 100-fold the time you invest in initially setting them up.

Author: Joel Reyes

Joel Reyes Has been designing and coding web sites for several years, this has lead him to be the creative mind behind Looney Designer a design resource and portfolio site that revolves around web and graphic design.

This entry was posted on Thursday, September 17th, 2009 at 8:29 am and is filed under DESIGN. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Advertise Here

Related Posts

• 9 CSS Ethics Every Designer Should Have
• 30+ Unusually Awesome Freshly Created Designs
• 101 CSS Techniques Of All Time- Part 1
• Animating Design Elements: 7 Unique & Creative Practices
• 9 Timeless 3 Column Layout Techniques

"Exploring mobile gesture design at Nokia" is also quite interesting as we see Younghee Jung go around London talking to people about potential new gestures. The bit at the end is exciting and I'm glad Nokia is exploring interesting new interactions.