Trends Future of Web Design

Rapid prototyping and responsive webdesign are the major trends at Future of Web Design, London 2015. Pixelperfect designs in Photoshop are sooo dead. Design in the browser is the new kid in town.

Workshops

The workshops are interesting because they give you:

  • Contact with the business.
  • Excellent speakers.

Content strategies

I attended Steve Fisher’s workshop on content strategies, and learned a lot. During the first part of the workshop Steve Fisher introduced his workflow. Then we had to try it out in groups.

With the responsive web new content strategies are needed. Several speakers focussed on the topic. ??? of the Guardian told about the redesign of the paper.

It was a story about failing, analysing and hard work before they found a formula. Perhaps not a silver bullet. But it works for the time being.

The design workflow

Of course designing in the browser will affect the workflow of the designer. In stead of painting his vision in Photoshop, the designer must work with code.

And the designer must test the production on several devices. Since there are litterally thousands of resolutions and screen sizes knowledge of libraries is important.

Perhaps code is not the first thing that comes to a designer’s mind. But as the designer from Envision said:

“It is not harder to learn code than to learn to use the graphical interface of Photoshop.”

At an early stage the designer will be able to test the production on real devices with the real target audience and the costumers.

More than one speaker stressed on working with real content in order to get the tone and voice of the product.

Of course Photoshop is not entirely dead. You still need a tool for image manipulation.

Code

Den Odell gave a very fine introduction to the future standards of HTML and CSS.

Christiano Betta introduced several libraries and validationg methods for credit card forms.

Even though most developers work with some kind of rapid prototyping framework they did not talk much about their rapid prototyping frameworks. They were mostly mentioned en passant. I’d have loved to hear more about this subjects.

Pen & Paper

The focus was clearly on content strategy, wireframing by pen & paper. Most developers talked about rapid prototyping directly in the browser.

There are many advantages when you design in the browser. You see the result immediately. If something must change, you don’t have to redraw the layout in some three to four resolutions in Photoshop. And recode your markup or stylesheet. The new workflow seems to look somewhat like this:

  • Mock up a static prototype in HTML / CSS.
  • Share your prototype with real content your prototype with the team, audience and customers.
  • Improve and iterate.

Rapid Prototyping from a designer’s point of view

Rapid Prototyping

A rapid prototype is build at the very beginning of a project. Gone and over are the days of pixel perfect wireframes in Photoshop, stated Billy Kiely

Now the entire design process is done via the browser. There are many advantages for the designer here. All design is an iterative process.

Design is all about designing interaction and storytelling.

Focus

The designer works with the interactive experience. Redesign must be easy – and with a keen focus on the story.

Three stages

There are three stages or aspects of design:

  • Aestetics.
  • Interaction experience.
  • Storytelling.

Wireframes are fine tools for the storytelling. But viewing drafts in Photoshop is not the same thing as watching your work on the actual devices.

Discover the story

If you design page by page, you risk loosing the general picture of the whole story. Therefore it’s better to work on little pieces at a time, and fill in the gabs when you see them.

Investment is the enemy of design.

Prototyping

A sum up of Billy Kiely’s rapid prototyping workflow from the designer’s perspective:

  1. Use it while you design it. You design an experience.
  2. Start with a cupcake. Get all the ingredients ready. Then you mix them in the proper order.
  3. The quicker you get feedback the better.
  4. Define the jobs to be done.
  5. Use real content.
  6. Make it accessible for the team and the costumer.
  7. Avoid the edge cases in the early stages of the work.

Trends in the Future of Web Design

Rapid prototyping and responsive webdesign are the major trends at Future of Web Design, London 2015. Pixelperfect designs in Photoshop are sooo dead. Design in the browser is the new kid in town.

Workshops

The workshops are interesting because they give you:

  • Contact with the business.
  • Excellent speakers.

Content strategies

I attended Steve Fisher’s workshop on content strategies, and learned a lot. During the first part of the workshop Steve Fisher introduced his workflow. Then we had to try it out in groups.

With the responsive web new content strategies are needed. Several speakers focussed on the topic. ??? of the Guardian told about the redesign of the paper.

It was a story about failing, analysing and hard work before they found a formula. Perhaps not a silver bullet. But it works for the time being.

The design workflow

Of course designing in the browser will affect the workflow of the designer. In stead of painting his vision in Photoshop, the designer must work with code.

And the designer must test the production on several devices. Since there are litterally thousands of resolutions and screen sizes knowledge of libraries is important.

Perhaps code is not the first thing that comes to a designer’s mind. But as the designer from Envision said:

"It is not harder to learn code than to learn to use the graphical interface of Photoshop."

At an early stage the designer will be able to test the production on real devices with the real target audience and the costumers.

More than one speaker stressed on working with real content in order to get the tone and voice of the product.

Of course Photoshop is not entirely dead. You still need a tool for image manipulation.

Code

Den Odell gave a very fine introduction to the future standards of HTML and CSS.

Christiano Betta introduced several libraries and validationg methods for credit card forms.

Even though most developers work with some kind of rapid prototyping framework they did not talk much about their rapid prototyping frameworks. They were mostly mentioned en passant. I’d have loved to hear more about this subjects.

Pen & Paper

The focus was clearly on content strategy, wireframing by pen & paper. Most developers talked about rapid prototyping directly in the browser.

There are many advantages when you design in the browser. You see the result immediately. If something must change, you don’t have to redraw the layout in some three to four resolutions in Photoshop. And recode your markup or stylesheet. The new workflow seems to look somewhat like this:

  • Mock up a static prototype in HTML / CSS.
  • Share your prototype with real content your prototype with the team, audience and customers.
  • Improve and iterate.