Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

The Lost Files – Interviews: Expert Tips From Renowned Designers (part 4 of 4)

← Design Patterns on E-Commerce Websites (3/4)31TOC42

Part 8: Visible vs. Invisible Design

Question: Would you recommend experimenting with unusual design approaches, or should designers stick to common usability conventions? Or does it depend on the purpose of the website?

Nick La: It depends on the scope of the project. For all of my personal projects, I try different and unusual design approaches. Every website I have designed has a different layout structure and style, as seen in my portfolio.

Question: How do you ensure that a certain visual element supports the design and is not mere decoration?

Matthew Smith: “Ensure” is a strong word. You can’t ensure it without a healthy dose of usability testing. The core of the design process is understanding the business or organizational goals behind the proposed website or application. With those firmly in mind, we can make clear judgments about the architecture, function and visual design of the application. It’s a matter of choosing the right hierarchy.

Trent Walton: For us, the design process never starts in Photoshop or CSS. Once the content and goals for the website are defined, we use those to inform the design. I’ve found that the initial sketch can be hashed out in as little as 20 minutes on graph paper, as opposed to 20 hours in Photoshop.

Brad Colbow: I think it’s fine for a visual element to be mere decoration, as long as it doesn’t take away from the usability of the website or app. I think the reason this question is asked so often is because on a smaller screen, a decorative element can clutter up the page fast.

Jens Meiert: What happens when you take it away?

Question: When does breaking the rules make a design unusable?

Rob Morris: It really depends on the rules you’re breaking and who is using the website. Generally, breaking rules results in an unexpected experience. At the right dosage, this can lead to more engaging, novel experiences. But when a design strays too far from the user’s expectations and from “protocol,” then the chasm becomes too wide. When the leap required is too great, the user falls.

Part 9: User Interface Design

Question: Please describe how wireframing fits into your design process. Which techniques work in practice and which don’t? Are there situations in which creating a wireframe or prototype wouldn’t make sense? And what tools and techniques do you use and why?

Jesse Bennett Chamberlain: I let the complexity of the website I’m working on determine whether a wireframing phase is needed. If the website looks fairly simple and I don’t foresee any major changes from the client, I’ll often start right in Photoshop and skip the wireframing stage. If it’s a bit more complex and I feel somewhat unsure of the client’s needs, I’ll usually wireframe it quickly to make sure we’re on the same page, before committing any major time in Photoshop.

Not all clients “get” wireframes, though… or some are just uninterested in the process. If I can tell that it’s adding confusion instead of clarity, then I’ll cut the process short or change the level of detail in the wireframe.

My main tool for wireframing is InDesign. Features such as document grids, character and paragraph styles, master pages and hyperlinks are perfect for wireframing and prototyping.

Rob Morris: I love wireframing, but I certainly don’t incorporate it into everything I do. When I have executive control over the direction of a design, working directly in Photoshop is usually faster. But if I’m collaborating with or being directed by others, then wireframing provides a means of fast prototyping and getting everyone on the same page. There’s no point in polishing a design in Photoshop if it’s fundamentally on the wrong track. Wireframing reduces the investment in changes and allows for super-fast iteration in the early stages.

Also, clients often get bogged down in details like color and treatment. They might get less excited when you present a black and white wireframe, but it’s a great way to keep them focused on and objective about the “bones” of a design, without the distraction of the “skin.”

Paul Annett: I often use Leisa Reichelt’s “design consequences” workshop technique to get stakeholders involved. It’s a great way to help clients convey their ideas visually, and it gives them an appreciation of the wireframing process. I find that leading the session as an impartial observer and always seeking the opinions of other stakeholders before giving my own is a fantastic way to spark conversation and ideas on any team. It’s also an energetic and fun way to break up a long meeting!

I sometimes sketch wireframe ideas on paper, but I prefer to work on them digitally. Iterating is so much faster in software, at least until pens get copy-and-paste functionality. I use OmniGraffle with Konigi’s wireframe stencils. Having said that, a considerately hand-drawn wireframe in fine black liner, with texture and depth added in cool gray Pro Marker, is a beautiful thing.

If the website is on a pre-built system and the project does not allow for modifications to the templates beyond customizing the look, then wireframing adds little value. I’ve encountered this at both ends of the spectrum: with a small e-commerce store using off-the-shelf software, and with a multinational website that had so many thousands of pages that making even the smallest change to the structure was a mammoth task.

Question: In your opinion, how crucial is prototyping to the design process? How much time do you usually spend in the wireframing and prototyping stage relative to the whole project?

Jonathan Longnecker: First of all, wireframing or prototyping is insanely crucial to any project. You have to have goals and a foundation before you start building. The percentage totally depends on the project. If we’re talking about a complicated Web app, then wireframing or prototyping would take up a high percentage, probably 30 to 40%. For marketing and brochure-type websites, wireframing is still vital, but because the interactions will be very basic, it should be only 15% or less.

Nick La: I find that planning, wireframes, mock-ups and prototypes are very important. They are about 60 to 75% of the entire project. Once the prototypes are done, implementation is very easy because everything has been planned.

Paul Annett: Prototyping has most value when the website is doing something unusual; inevitably also the most exciting type of project to work on! It can obviously be used to help designers test their ideas early on, but it also has value in getting client buy-in for a page or element that is hard to explain in words.

I can’t put a percentage on the time to set aside for wireframing because I’m often not involved in the later stages of the project to realistically know how long the whole 100% takes.

Elliot Jay Stocks: Leaping straight into a design without doing some sort of test run is extremely unwise. You needn’t create full-blown prototypes?sometimes wireframes can take the form of sketches?but there should always be some kind of preparation so that you don’t go into the design stage blind. These preparatory stages allow you to spot and work around problems before worrying about aesthetic considerations such as color and texture.

Question: Can aesthetics, functionality and effective marketing all work hand in hand? Or can only two of them be satisfied at a time? How do you balance them? How do you resist shady requests from the marketing team and protect the user’s interest?

Lea Alcantara: If aesthetics, functionality and effective marketing don’t all work together, then what is the point? Without all three working in harmony, then the project is pretty much moot. Finding the balance is essentially about knowing the goals of the client, project and audience. The ability to communicate that to the client and marketing team helps avoid strange requests that would harm the user’s experience. Prevention is really the best course of action for resisting shady requests.

Bruce Lawson: Effective marketing is about giving the consumer the information they need without making them work. So, yes, it’s perfectly possible. But it’s not easy.

Part 10: Books and eBooks

Question: What are the most difficult problems you have encountered in publishing your magazine 8faces? And how did you handle them?

Elliot Jay Stocks: The most difficult problem was that, while I’d thought a lot about the magazine’s editorial and design, I totally underestimated how long it would take to handle all of the “unseen” stuff: things like getting advertisers on board, chasing the ad creative, liaising with the printers, helping out customers with post-sale support, etc. As a result, the magazine took up a lot more of my time than I had expected, and the whole thing was, at times, pretty stressful. It was completely worth it, though. I’m over the moon about the product, and so are our customers: we sold out all 1000 physical copies in under two hours!

I’m not sure I dealt with the added pressure so well on the first issue?I just had to work through it and get it done?but learning the hard way has enabled me to plan adequately for issue #2. One of the main things was securing a substantial amount of funding so that I could be paid to work on the project, rather than have to fit it into evenings and weekends.

Question: Can you give us some details on your experience as an author, specifically related to your reputation and earnings as well as your experience in publishing yourself versus working with a publishing house?

Paul Boag: It’s funny how things work out. I never set out to write a book or even build a reputation in the Web design community. I started blogging primarily for myself, as a way to process the things I was learning as a Web designer. I found that writing things down helped to clarify them in my mind.

I guess starting the podcast was a more conscious decision to reach an audience. But I never would have guessed how popular it would become or how much exposure it would bring me or my Web design agency, Headscape.

Writing a book is certainly not something I had ever considered, and I don’t think I would have ever written anything if I were not approached by Manning Publishing.

I have to be honest and say that I found writing a book a painful and long-winded process. I don’t think I would do it again unless I was going to self-publish, and even then I would think twice. You don’t get rich writing a book on Web design.

That said, despite my somewhat ad-hoc approach to publishing through my blog, podcast and book, it has worked out very well. As well as being an international speaker, I make good revenue from webinars and advertising. However, the biggest earner is the work these marketing channels bring to Headscape.

Question: Is free content dead? We’re seeing more products, services, eBooks and subscription-based platforms for content. Are pay walls the next step in the evolution of digital content?

Yaron Schoen: I see this issue from a different point of view. Let me explain in short.

The free Web is the greatest democratic achievement of our generation. The free distribution of data to everyone is one of the core traits of a healthy democracy. Now, not only is it free for everyone, it is also distributed instantly. Based on this, we can go so far as to say that the free Web helps our democracy. But looking at it realistically and knowing the kind of power the free Web holds, we would also recognize that it could also damage our democracy.

We all know that many major publications are finding themselves in serious trouble lately. Lack of profit brought on by the free Web is seriously plaguing their industry. This is not a healthy situation. We need them to perform, and perform well, so that they can continue in their crucial role, acting as the watchdog for democracy. If they are not paid, then they will not be able to do their job?it’s as simple as that. What would happen if we started relying on independent contractors scattered across the country, working for free?

Will we ultimately rely on random untrained bloggers to obtain our news? Will these bloggers be able to step away from their day job and travel to Washington to undertake some investigative journalism, maybe uncover a corruption scandal? Better yet, could they afford a flight to Iraq to document the war? If not, will large-scale publishers be forced to do it for free? How many quality writers are willing to do that? So, from a broad perspective, we are now sitting in limbo, where free Web content is, on the one hand, aiding democracy by allowing for the free, instant distribution of data, while, on the other hand, harming it by destroying our watchdogs. We need a smart solution.

That said, I do not think the pay wall in its current format is the smart solution we are all looking for. We have grown accustomed to free content, and once we are used to having something for free, going back is hard. We have seen what happens to publications that try this system. Introducing an old system (i.e. yearly or monthly subscriptions) into a new distribution model doesn’t work. Niche publications might be the only ones that could pull that off, because readers are already willing to pay for niche content.

For this to work, there has to be an easier model; perhaps something like iTunes, where you pay à la carte, or perhaps a completely new way of thinking. I am not even sure consumers should be the ones paying. Maybe there is a way for publications to sustain themselves with ads, and all we need to do is rethink the way the ads are presented.

As for where we are headed, I don’t have a concrete answer. I can only say that content creators, particularly journalists, need to get paid. Who will pay?the consumer or the advertiser?only time will tell.

Question: Do you see the eBook format as the default reading format for books in the future? You have already released eBooks. What was your experience? Can one build a stable business model on eBooks?

Collis Ta’eed: I think it will be quite a while before eBooks are the default, but I do think everything will eventually be digitized; it’s just a question of how far into the future. Ultimately, reading electronically is a much more efficient system; as long as the experience is pleasant, I believe people will slowly switch over. I do think, though, that it will take some time, if for no other reasons than there are quite a lot of books out there and a lot of businesses, people and livelihoods are tied up in traditional publishing.

I definitely think building a business by selling eBooks is possible. Like anything, building a business in this niche takes time and hard work, but it certainly has fewer up-front costs compared to traditional publishing.

About the author

Steven Snell – really likes American football.

"Take action, and don’t be afraid to take risks." Steven Snell (1978) was born in France and has a Bachelor’s degree in Business Administration and Bible Studies. He lives in Central Pennsylvania and has run Vandelay Design for the past four years as a designer and a blogger. Steven likes to spend his free time with his wife, traveling and enjoying sports, especially American football.

← Design Patterns on E-Commerce Websites (3/4)31TOC42


  1. 1
  2. 2
  3. 3
  4. 4
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top