What All New Designers Need To Know ~ Computer Zoom Design

Andy Pratt and Jesse Arnold are leaders in the new frontier of web design. Andy has worked with organizations including the Smithsonian Institution, Samsung, Cartoon Network, Nickelodeon, Wenner Media, Lego and Turner Broadcasting, and Jesse’s resume lists names like New York University, Conde Nast, and the Jim Henson Company.

Below, Pratt offers some great web design tips that clarify what it means to be a web designer vs. developer, and the changing skill sets required to create beautiful, functional websites.

What exactly is web design today?

Web design is the process of creating a browser based product or experience that will be delivered to a variety of device types, sizes, and resolutions. Many websites or apps will provide a service, distribute content and/or connect people. The best ones will have a clear purpose and meet business goals and user needs.

We have more control over the medium than ever before, especially with drag-and-drop software tools like Wixand Squarespace. And that medium is not fixed in size or resolution. There are certainly a lot of tools, technologies and techniques out there that streamline efficiency, but they also create opportunities to solve tougher problems and elevate the craft. Today it is nearly impossible for any one individual to have deep knowledge that spans across the required skillsets (ux, design, content, development). Web design is not a solo experience. As a designer you are a co-creator with your team, your users and your clients.

Your class talks about working with web developers. What is a developer? What do they do and why is it important to work with one?

When people refer to developers they are often referring to one of two types: frontend developers or backend developers. Frontend developers code the elements that a user sees and interacts with on the website. A backend developer codes the services that run on a server. It is important to understand that distinction because they have different skill sets.

For the class, when Jesse and I refer to a developer, we are referring to a frontend developer. It is important to work with one because, through code, they can bring the intended designs to life in a browser. They speak the language of the web, and the more you speak the same language, the better off all parties will be. More and more the responsibilities of a designer and developer overlap, especially as the term “designer” continues to become more ambiguous.

What tools do you use to design a website?

My toolkit varies from project to project. However, there are a couple that I use pretty consistently. Stickies, Sharpies and whiteboards are worth mentioning twice. Stickies, Sharpies and whiteboards are worth mentioning twice. Google products, like Docs, Slides, Sheets and Hangouts are critical to help me keep in touch and share ideas with my team, which is distributed around the globe.

Balsamiq is great for wireframes. Invision for prototypes. Sketch and Photoshop for design comps. Unfuddle for user stories. Dropmark for Behavior Galleries.

I also use the inspectors, or dev tools, that come with a browser to take a look at the HTML and CSS.

How is the workflow for a site design determined? Is there a standard process?

One of the main points Jesse and I explore in the class is that there is no one workflow. It depends on the skills and makeup of your team. Jesse and I are both designers, but we have different and overlapping skillsets. It was really important to us that the class represent different takes on how designers work to solve the same types of problems.

Also, workflows are not just determined by the makeup of your team. It depends on your client. How open are they to trying new things? What kinds of design artifacts do they need to show progress to their stakeholders? You always want to educate your client on more efficient ways of doing things, but they are embedded in their own workplace culture. As a designer, you need to determine when to be flexible and when to be firm.

So I wouldn’t say there is a single standard process either, however, there are some principles I like to explain to my clients so we can have an honest dialogue and manage expectations.

These principles include:

• Websites are modular systems. Design them with that in mind.

• Get your design into a browser as quick as possible

• Don’t focus on pretty artifacts that will quickly become outdated.

Do functionality and design work hand-in-hand, or does one take precedence over the other?

I always liked this quote by Frank Lloyd Wright. “Form follows function – that has been misunderstood. Form and function should be one, joined in a spiritual union.”

In practice, functionality needs to be prioritized over the visual language. Users will be quick to point out a broken button over awkward margin spacing or a wrong color. However, users will lose trust if aesthetics are an afterthought. And with a lot of competing services and products, the visual language and interface personality can be the differentiator. Great websites embody this spiritual union that Frank Lloyd Wright speaks of. Functionality is branding. The actions and behaviors of a website determine the interface personality of a website as much as the visual language.

What websites are currently your favorite for both their functionality and aesthetics?

There certainly are a lot of them out there. A couple of my random favorites are information sites, like Good, Medium, and Bloomberg. I also love the way The Guardian has been pushing interactive storytelling. The redesigns of Airbnb and Virgin America are really great, too. One last one: my wife, Sarah, uses Solo to manage billing for her interior design company. It is easy to use and beautifully designed.

What will be the main take away from your course?

One of the most important skills a designer can develop is the ability to collaborate. By the end of the class, designers will learn exercises and techniques to collaborate with clients and communicate with developers. This will help them to create websites that are both functional and look good, too.