Design Myth
5

Put it above the fold!

Written by Stephen Emlund

Stacks of newspapers

‘Above the fold’ on the web is out-dated and should be left out of the conversation when discussing website design. The phrase, ‘Above the fold’ originates from the newspaper industry. Newspapers were actually folded (newsflash, I know!), so the idea of putting the top story above the fold was important. Primarily because there was a literal fold, and only one fold. On the web, there is not a literal fold. There are, however, thousands of ‘folds’ in the form of various mobile devices, laptops and desktop computers.

The commonly used mantra, ‘Above the fold’ was handed down from newspaper design to web design.  Newspapers are a very controllable medium – but web design is not. The newspaper designer knows the width and height of the page. The web designer has no idea what width and height their users will be viewing their website. Could it be on an iMac, iPad or iPhone? Possibly an Android tablet or Galaxy S5 phone? The list goes on – just take a look at the tweet below.

There are so-called best practices when it comes to the ‘fold’, but those are always changing and with the variety of mobile device usage, each website’s audience may require a different ‘above the fold’ best practice. If we look back a few years, we see that the ‘fold’ grew very quickly. One year it might be 600px, the next year, 800px, the year after that 1000px. Strangely, the idea of the ‘fold’ never seemed to be dismantled, it simply kept growing.

Websites are living documents, not dead trees. Websites can be consumed from phones, tablets, laptops and desktop computers. Each device has a different height and width. This means a different fold to obey…if you want to keep things above the fold. Could it be that it isn’t about the ‘fold’ at all, but about the right content in the right context?

Why has the ‘fold’ taken so long to die?

A website is not the product of one profession or discipline, it’s the product of at least two professions. When a website is ‘designed’ by the designer and ‘coded’ by the developer – there is an inherent trust between the two about what is best practice in each profession. Pile on top of that – the almighty client who may often ask to put something ‘above the fold’ – and you have a recipe for disaster. If we don’t treat the client relationship as one of education and understanding, we may get in the habit of ‘doing what we’re told’ regardless of best practice. Can you see now, why the ‘fold’ lived on for so long?

How many other bad habits are we carrying on by ‘doing what we’re told’ rather than seeking to bring our clients along and helping to educate them for the sake of a successful website?

The fold may have been necessary in the early years of the web, when we were all learning how to browse the web – but now scrolling is second nature. When is the last time you consciously thought about scrolling? You just do it.

The truth

The fold is really a code word for hierarchy and importance of content. It simply got dumbed-down and tied to the constantly changing constraint of screen resolution. If the content is prioritized correctly, there are then some things to consider with design to ensure you are optimizing for users to scroll. One option is to try the ‘cut-off content’ method (illustrated above) to hint there is more to see below. This provides an intuitive experience for browsing a website. Of course, this requires thinking about the various screen resolutions and possibly utilizing vertical media queries.

What others say

Sophie Shepherd explains that ‘the fold’ has really just become whatever the user is seeing when they have to decide to engage further or move on. So the fold is really at any point in your content or website design that could cause users to browse away. Damn! That’s a tall bar to reach – having no weak spots in your content or website design? No one ever said website design/development was easy.

Paradigm shift

With the number of mobile devices on the market and the changing landscape of screen size, holding on to ‘the fold’ concept is impossible. Consider these statistics:

  • Nearly two-thirds of Americans are now smartphone owners, and for many these devices are a key entry point to the online world – source
  • The average smartphone screen size when the original iPhone was launched was 3.2″, when the iPhone 5 launched, it was 4.3  source
  • It took five years for the average screen size to get from 3″ to 4″, but only two more to get to the current average of 5″source

Note the various mobile device sizes illustrated by the blue outlines in the tweet above. Which fold would you like to follow? All of them? None of them? Doesn’t this illustrate the need for a paradigm shift?

That paradigm shift is: Design for content, not the fold. Design webpages with a hierarchy of content that encourages consuming the content and taking action at just the right time, in the correct context. Just as imaginary friends are not very helpful, neither are imaginary ‘folds’ on a webpage.

Design Myth
4

Show me some mockups, then I’ll sign the contract

Written by Stephen Emlund

This myth is perpetuated, not only because clients may request spec work, but also because designers may want to work more casually. Spec work is any work a person completes without a contract that outlines the project and payment. When both designers and clients are apt to work without a contract, you’ve got a recipe for disaster. You’ve also got the current state of the design industry – one that needs to grow out of it’s teen years – a time when they took lots of risk and did things they later would regret.

Full-time employees in an organization are paid hourly or are salaried – and are generally working at their employer’s brick and mortar business. Full-time employees sometimes even sign some sort of contract at the beginning of their employment. When a freelancer engages in work with a business, organization or person, they don’t have the same structure and framework built-in. Because of this, they are left to appropriately and professionally preface the working relationship with an agreement that outlines what work they will complete, what they will be paid and the terms of the agreement. Without an agreement (or contract as some call it), the freelancer AND client are engaging in a high risk, working relationship. Did you catch that? The client is ALSO at risk. This is because, if there is no agreement, the designer could just as easily not complete their end of the deal just as much as the client can ruin the project for the designer.

Implicit vs explicit contracts

We make implicit contracts all the time. These would be verbal and fast-paced – primarily because the product or service we receive is provided within minutes, instead of weeks or months, as is the case for freelancers. When we go to McDonalds, the contract we make is that we will pay the cashier 100% of the cost for the menu items we choose. Minutes later, we receive what we paid for. For freelancers and clients, the exchanges of goods and services for money is not so instantaneous or simple… so a verbal agreement just won’t do – unless you like risk and tension. How do you ensure that both parties can agree on a complex service with many phases, such as a new website? The answer is an explicit contract that is put in writing!

A contract is what you need to start building trust between all parties. No contract, no basis for trust.

—Mike Monteiro in Design is a Job

OK – so you’ve presented a contract to the client and they are reluctant to sign on the dotted line… If a client is not willing to sign a contract prior to work being completed, it could be one of these reasons:

  1. They don’t have the money to pay for the project
  2. They don’t understand how to work with service providers, like designers and developers
  3. They think they won’t like the work you create

Let’s think through these reasons:

They don’t have the money to pay for the project

This is the worst reason of all, and probably the least common. If they don’t have the money to pay, but want you to do work anyway – that should be a red flag. They don’t respect your time and don’t understand how business works. There is no excuse for this behavior and any professional should run as fast as they can away from this working relationship.

They don’t understand how to work with service providers, like designers and developers

This is a genuine reason for not wanting to sign a contract. Most people will never purchase design or development services in their lifetime. This may be their first time doing this. If you get this drift, you should seek to educate them. Explain how the project will unfold and what the design process will be. Of course, these two things should be covered in your contract, but you could also have a conversation to answer any questions they have. Also ensure that they have reviewed your portfolio and contacted your previous clients so they can be sure that your project together will be successful. When they are confident in the quality of your work and your prior designer-client relationships, it should put them at ease and lead to a successful working relationship.

They think they won’t like the work you create

If they are unsure of the quality of your work – you should check that they have reviewed your portfolio. If they like the work in your portfolio, then the next question might be whether their project represents a departure from your typical design style. If this is the case, you have to do any and everything you can to put them at ease. Maybe your portfolio includes projects under various design styles ranging from corporate clients to small businesses, just not the style they are going for – which may be for a rock band. This is a genuine question to have. Try outlining the differences between the projects/styles that you HAVE completed. Although the differences may not be too great, there are probably some differences that can help ensure that you are multi-faceted. Additionally, maybe you have done some personal projects that fit the style they are going for – and you could share those with them. This is where you have to put your salesman hat on. Do everything you can to put them at ease.

Not convinced?

If you still aren’t convinced that having a contract is a good idea, realize that contracts add much clarity to the designer-client relationship that otherwise wouldn’t be there. Here are just some of the benefits of having a contract. A contract:

  • defines the ground rules for the project
  • defines the deliverables and cost of those deliverables – probably the most important aspect
  • defines copyright ownership. If designer retains rights, which they should, this can ensure that derivative works are not created (If it’s a logo, the client should be given copyright ownership after final payment)
  • Brings to light any gray areas. Presenting a contract helps you define those gray areas better. It makes for a healthier designer-client relationship to discuss these gray areas up front rather than in the 11th hour. Remember, it’s all about clarity?

In summary, designer-client relationships should not be a roller coaster of emotions where your interactions are worthy of  the pages of ‘Clients from Hell’. A contract can prevent much of this friction. After all, you are engaging in a professional, working relationship, not a middle school fling where hearts are broken…

…and you write off girls forever

…and feel like there is no hope in life at all

…oh, sorry – back to contracts.

What others say

“A contract doesn’t keep things from going wrong. It merely addresses what should happen when they do. Most importantly, a contract can’t make the project go right. There is no substitute for a solid client relationship coupled with good quality work – those are what make a project go well.”
—Mike Monteiro in Design is a Job

The truth

A contract should be initiated before any design work is started. The contract should define the ground rules, deliverables, cost, copyright ownership and much more. Completing design work without a contract is the best way to introduce unneeded risk, tension and confusion to the designer-client relationship.

Design Myth
3

Designers don’t make the company money

Written by Stephen Emlund

This myth arises due to designers being seen as meaningless decorators brought in at the end of a project to make something look pretty. On the contrary, great design should be integrated into all aspects of a project. A project that utilized great designers throughout the process can prove to be outstanding in a marketplace of ‘sameness’.

Just look at Apple. They have successfully built a business around products that are designed well and designed with simplicity in mind. Apple’s successful integration of great design has catapulted it as the superior option, even demanding much higher prices. Apple, without great design, leaves it in the middle of the pack.

Good design is good business.
—Thomas Watson, Jr. Second president of IBM

In 1973, The retiring, second president of IBM, Thomas Watson, Jr. said something seen in that day as idealistic. He said, “Good design is good business.” He had just retired as president of IBM where he had hired designers to transform the IBM showrooms, their 1964 World’s Fair exhibit and much more. In a time when design was not highly revered, it had become IBM’s differentiator, alongside the many advances by their engineers. Fast forward to 2003 when Steve Jobs said, “Design is not just what it looks like and feels like. Design is how it works.” Today, everyday objects are more beautiful and accessible than ever before. When an industry matures, the manufacturing quality of a product can longer sustain it’s competitiveness. What’s left is to compete on design improvements. Design is the differentiator.

Smart design = smart for business

Today, more companies are seeing the benefit of great design. Interestingly, a company that is innovating like never before has a designer for CEO. Nike’s CEO, Mark Parker started out as a shoe designer and his company is now innovating more than ever. One such innovation is the Nike+ Fuelband, which started as just Nike+iPod (basically a custom soundtrack to your exercise) and became a wristband that tracks your daily exercise in real-time.

Similarly, Phillips lighting was at a place where it was hard to differentiate with lightbulbs, but they decided to innovate around how their retailers managed products between stores, with a new software called Engine Service Design. This software put forth a clear set of design principles informed by customer insight, brand values and business goals. This helped retailers to standardize the customer experience across many touchpoints. Once again design became the differentiator.

AirBnB, which is a website with a simple interface, that helps people rent unique places in 190 countries. It was founded by two design school graduates and had a $10 billion valuation in early 2014. Smart design = successful business.

Yet another example is Nest Labs, creator of the popular and smart thermostat. A thermostat that allows you to control it from anywhere. If you didn’t think design can make your company money, this well-designed product and it’s parent company were sold to Google for $3.2 billion.

What others say

Thomas Lockwood who has a PhD in design management says, “Investing in the design process can be a sustainable business advantage, because it tends to lead to five things: creative collaboration, innovation, differentiation, simplification, and customer experience.”

A word of caution for those who think great design in a large organization is easy: Dieter Rams knows that without approval and insulation from the CEO, great design can fail. This is primarily due to the layers of approval required. Layers that often follow a common trend – adding things to a design rather than taking away and simplifying them. We all know that cramming more things into a design makes it less effective. Rams said, “My work was only possible because I was reporting directly to the chairman of the board. Design has to be insulated at a high level. Otherwise, you can forget it.” Great design is almost impossible when a designer lacks influence.

The truth

Design has changed how we experience everyday life. If corporate leaders let it, smart design can change their business as well. Good design can be a business differentiator in a landscape of sameness.

Design Myth
2

I have Photoshop, so I can just design it.

Written by Stephen Emlund

This myth is ever-present for many reasons. One being that the correct tool, software, or hardware indeed helps to complete the task of creating a design. The problem with this myth is that a tool, piece of software or your favored operating system only serves your needs, not the needs of the target audience. You’ve solved your problem, not the design problem. You’ve ‘checked the box’ and ‘completed the task’, but you’ve not done the work of a designer. A designer’s work involves visually communicating an idea to the intended audience using rules, principles, a structure, and an overarching vision for the design. iMovie can’t make you a Hollywood blockbuster any more than a hammer can make you a mansion.

The way something looks is not veneer layered on top of its functionality.
—Aral Balkan

No other time in history has there been such easy access to the tools required to get your own book printed, your own website created or your own videos/movies created. The publishing process of these mediums are more democratized than ever before. The aspect that can never be democratized is an understanding of design principles, color psychology, critical thinking skills, writing ability, an understanding of how to solve design problems, etc. These things take years of specialized training to master. Since there is much more accessibility to these tools, the next question is, “who is going to create something great?” Something that solves the design problem at hand and really reaches it’s target audience?

What other say

Seth Godin says, “Racing to build your organization around the latest social network tool or graphics-rendering technology permits you to spend a lot of time learning the new system and skiing in the fresh powder of the unproven, but it might just distract you from the difficult work of telling the truth, looking people in the eye and making a difference.”

The truth

Each design problem is unique and requires more than any software can do by itself. A piece of software stocked full of templates just won’t do the job, because it’s just solving your problem of needing something designed and not really solving the design problem.

 

Design Myth
1

Designers just make things look pretty.

Written by Stephen Emlund

This is a common misconception that many people say and believe; sometimes even designers. The myth arises due to the end-product of a designer’s work being visual in nature. Therefore, it is judged on a visual basis. A designer’s work is so much more than just pretty. Designer’s should take into account their target audience, the design problem, corporate goals, and most importantly their vision for the work. This is done by understanding that audience and how they are best communicated to. This involves psychology and human perception, not merely aesthetics. All too often, “pretty” wrongly becomes the benchmark by which a designer’s work is judged rather than how successfully the target audience is reached.

Design is not just what it looks like and feels like. Design is how it works.

—Steve Jobs

This myth is perpetuated in part because design and fine art are seen as one and the same. Design is not fine art. Design is bound by rules, principles, processes, target audiences, user problems, and correct solutions. Fine art is relieved of the duty of solving user problems and communicating to a target audience to the same extent of design. Art is for art’s sake, while design is for the target audience sake. Don’t get me wrong, aesthetics are definitely one component of a successful design, but it’s not the driving force.

To further explore how design is not just about making things look pretty, let’s take websites for an example. In a website, not only does it have to do more than just be ‘pretty’, but form and function need to be inextricably tied. In a website, not only does it need to ‘look good’, It has to be clear how each link, image, etc functions. Ideally, form and function will be working together to create a beautifully, functional website. So a website’s form and function must work together, but the design choices also have to be make sense for the target audience. It might be tempting to choose your favorite color (like pink) for a particular website design, but if you weren’t thinking about your target audience, who might be men, you would be way off. Of course, this is an extreme example that occurs in more nuanced ways all over the place.

To better explain how form and function need to work together, let’s do a quick word study. The word affordance can be defined as:

  1. A visual clue to the function of an object.

  2. The quality of an object, or an environment, which allows an individual to perform an action. For example, a knob affords twisting, and perhaps pushing, while a cord affords pulling.

As Aral Balkan says, “The way a thing looks creates inherent expectations about how it is meant to be used. This is called an affordance.” So a designer’s work primarily resides in this area: providing visual clues to the function of the website or app. If a designer’s work has intuitive affordances, then it is successful.

What others say

Antoine de Saint-Exupéry says in The Little Prince: Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away

The truth

Designers solve problems that happen to be visual in nature. They don’t simply make things look pretty. In the case of websites and apps, form and function are inextricably tied requiring intuitive affordances.