Web Design Tips: What All New Designers Need To Know

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.

---

Attention non-designers: You can learn how to assemble beautiful layouts. Learn more.

---

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.

Get more web design tips in Andy Pratt’s class, Modern Web Design Demystified.

---

Attention non-designers: You can learn how to assemble beautiful layouts. Learn more.

---

TAGS #DESIGN #GRAPHIC DESIGN #UI #UX #WEB DESIGN

Emily Potts

Emily J. Potts has been a writer and editor in the design industry for more than 20 years. Currently she is an independent writer working for a variety of clients in the design industry.www.emilyjpotts.com

Read More

Delfina Foundation

Delfina Foundation, an artists’ residence non-profit, is represented by a bold and modern monogram. The logo reduces down to an underline, then to nothing, and finally completes its cycle by revealing the “D” and “F” again. It has a utilitarian feel and quite simply it works. This straight-forward functionality represents the idea that Delfina Foundation is bringing functionality to artists.
Thank you

Delfina Foundation

  

Read More

Drawing for Graphic Design: 6 Exercises to Sharpen Your Skills

When talking about drawing for graphic design projects, we’re very often talking about a digital process. We’re so used to sitting in front of our computers, plugging away at pixels in Photoshop and Illustrator, that we sometimes forget to step away, grab a pen or pencil, and just draw. Here, we provide six simple drawing practice exercises that revolve around drawing for graphic design. These were pulled from Timothy Samara’s book on that subject. Timothy teaches Graphic Design Fundamentals at CreativeLive and his exercises will help you get started, and hopefully, breathe new life into your work.

1. Positive/Negative

This study trains the eye to tell form from space and pick out different levels of value.

1. Choose a simple object to draw. This can be just about anything you’ve got lying around: a cup of coffee, a pair of scissors, or a desk chair should do nicely.

2. Instead of trying to draw the object itself, draw the negative space that surrounds the object. Define the shape with contoured fields of color rather than lines.

3. Now the actual shape of the object should be defined, so go in and add details using pencil or a lighter charcoal to create different values. Add each level independently, beginning with shadows. In each iteration, increase the number of levels between black and white.

2. Form Language: Motif and Evolution

This quick study starts with original mark-making, then turns it into a motif through repeated movements.

1. Using any medium—pencil, brush, marker—make repeated, unique movements to create a rhythmic motif.

2. On a larger sheet of paper, repeat the motif over and over again to create a pattern that seems balanced and stable. The motif should retain its individuality, but no instance of it should optically disconnect or be emphasized more than any others. The field of texture it builds should seem continuous and undisturbed.

3. Finally, repeat the motif at different scales, using different media, and different values. Number the reiterations in each stage and date the sets. Periodically revisit the study and use different motifs to build a library for reference.

3. Rough Traces: Mass & Contour

This study helps to understand how to connect gestural language and pictorial depiction to introduce stylization at a basic level.

1. Choose a photo of an object, figure, or scene.

2. On tracing paper, quickly rough in the subject’s masses. Work with the image at a reduced size so that the medium no matter how controllable, captures essential mass shapes as bluntly and directly as possible. Use a combination of media or multiple values or colors for different masses.

3. In the next stage, focus on the image’s contours, outlining its major shapes. Using a continuous line, draw the contours without lifting the tool from the surface, creating a loopy network of connective contours.

4. Icon Studies

This study develops skill with simple pictorial reduction and stylization, through observation and editing skills.

Choose an animal or common object as a subject. The goal here will be to achieve an important distinguishing characteristic of an icon that is nonspecific. An icon of a clock, for instance, should not identify it as a certain kind of clock, but instead capture the neutral, universal aspects of all clocks.

Do a couple of different versions from different angles and compare them to see which is most recognizable and combine different aspects to change the silhouette.

5. Nonpictorial Narrative: Gestural Field

In this study, use your imagination to create emotional gestures through drawing.

1. Using a medium of your choice, make 2 sets of marks that depict contrasting emotions. Avoid using common clichés and symbols like hearts and stars, and focus on visualizing opposite emotions such as anxiety and joy.

2. Develop several variations for each emotion.

3. Compare and contrast your variations, noting which characteristic identifies each and sets them apart. Consider how these marks signal different emotions to you and how that could affect your work on future projects.

6. Stylization: Putting it all together

Using the steps above, create a narrative that reinforces the relationship between form and meaning.

Combine a variety of stylistic, pictorial motifs from the previous exercises to communicate a more meaningful narrative. Arrange a selection of three images and juxtapose certain elements to create different moods and meanings. By playing with the different studies and their interactions, you can create different stories and meanings for each. It’s a fun way to explore different mediums and not get hung up on tiny details.

---

Join us to learn everything Photoshop during Photoshop Week 2018 with 20 seasoned experts from the field. RSVP Today.

---

TAGS #DRAWING #DRAWING EXERCISES #GRAPHIC DESIGN #TIMOTHY SAMARA

Emily Potts

Emily J. Potts has been a writer and editor in the design industry for more than 20 years. Currently she is an independent writer working for a variety of clients in the design industry.www.emilyjpotts.com

Read More

3 Crucial Design Principles to Factor Into Every Design

In his class Create a Knockout Design Portfolio, award-winning designer and art director Ram Castillo unveiled crucial design principles that should be factored into every design you make. Here, in Ram’s words, are the first three:

1. Relevance

Do not be led by aesthetics.

I’ll say it again. Do not be led by aesthetics. Be led by relevance. I cannot emphasize this point enough. This requires you to do adequate research before beginning any design brief. The more you know about your communication objectives, the target audience demographics, the culture of the brand, the perceptions of the market and the environment the design will be seen in, the clearer your mind will be when making design decisions.

Once you start uncovering this information, you can get to the solution quicker because you’re informed by the psychology of the people you are speaking to. 
In your attempts to create disruption, always ask yourself, “Does it create relevant conversations between brand and consumer?” Oftentimes relevance is what creates the disruption you’re looking for.

Photo via Flickr.

2. A grid system

Whether you stay in the grid or break out of it, you must have one. Why? Because you need to organize the information in a hierarchy that is easily digestible, alluring and pleasant to look at. Do not start a project without one. Four columns, six columns, twelve columns – see what works best for the brief or task.

Photo via Flickr.

3. Typography

Typography can make or break any communication piece. It’s a craft in itself. Kerning and leading text should become second nature and used appropriately. Your objective should be on legibility first and foremost. So if the heading or copy needs more space — give it some. If it needs to be tighter — make it tighter. Font weights and size should be used in consideration with information hierarchy.

For example, using a bolder weight for sub-headings and a lighter weight for copy is common as it helps the reader scan the content of the page easily. Line breaks must flow both with the reader’s eye and with the content. A line break shouldn’t be disruptive.

Typography overall need not be flat. You’re only restricted by your imagination.
For instance, if you’re designing a poster with the word ‘SUMMER’, there’s no reason why you shouldn’t explore the letters with beach-themed objects. If it hits the tone of the brief then great, if it doesn’t, it’ll reaffirm that the other design direction you’ve done is the better solution.

A portfolio is a designer’s calling card. Job-seeking designers must capture the interest of potential clients and employers, but the elements of an attention-grabbing portfolio are far from obvious. Learn how to showcase your best work with Ram Castillo’s Create a Knockout Design Portfolio.

TAGS #DESIGN PRINCIPLES #GRAPHIC DESIGN #GRID SYSTEM #RAM CASTILLO #TYPOGRAPHY

Whitney Ricketts

Whitney Ricketts is CreativeLive's Senior Communications Manager. Email her at whitney [dot] ricketts [at] creativelive [dot] com.

Read More

Collaborate and Create: Top 10 Summer and Fall Design Conferences

Whether you spend days designing in a home office with no one to talk to but your cat, or continually rework ideas alongside a team, design shouldn’t be a lonely endeavor. Bouncing ideas off other designers, taking tips from industry leaders and socializing with like-minded creatives can create serious kindle to bring that creative spark into a roaring flame. 

Design conferences allow freelancers to actually interact face-to-face with other creatives — and help teams find that missing outside insight. Around the world, design conferences bring digital artists together and send them home with more insight, ideas, and know-how. Here are some of the best design conferences worldwide in the summer and fall of 2018, from the long-established to the exciting newcomers.

Smashing Conference

When? June 26 & 27

Where? Toronto, Canada

Who’s it for? Web designers and developers

What’s the big deal? The Smashing Conference comes with a twist — the presenters aren’t allowed to use slideshows or decks. That means all of the web designers will be working live during their presentations, on anything from fixing bugs, examining accessibility and, of course, designing. The design conference is slated to include presenters ranging from web developers to researchers to authors, including Rachel Andrew, Joe Leech, and Lea Verou. The Smashing Conference is a first-ever event for 2018, but based on the success of the organizers smaller workshops, is likely to be a summer highlight for the web designers that attend.

App Design and Development

When? July 4-6

Where? Barcelona, Spain

Who’s it for? iOS and Android designers and developers

What’s the big deal? App Design and Development is a conference focused foremost on serving as a place for designers to collaborate and find new ways to work together. In fact, the entire first day of the conference is dedicated to workshopping. That’s followed by two days of presentations by developers from Facebook, Shopify, Uber, and Google.

---

Break Out Of Your Thought Patterns To Achieve Maximum Innovation And Imagination. Learn More With Sally Dominguez.

---

TypeCon2018

When? August 1-5

Where? Portland, Oregon

Who’s it for? Typeface designers and creatives that dig a good font

What’s the big deal? Ever geek out over a stunning font? TypeCon is a conference in Portland that’s focused entirely on fonts, typeface design and calligraphy. Hosted by the Society of Typographic Aficionados, 2018 will be the conference’s 20th anniversary.

SIGGRAPH

When? August 12-16

Where? Vancouver, British Colombia

Who’s it for? Digital artists

What’s the big deal? With more than four decades of successful conferences, SIGGRAPH is a long-standing design conference that focuses on the latest technology. The conference’s art and design segment focuses on all forms of digital art, from virtual reality to computer animation. If it’s a cutting-edge design technology, it’s probably at SIGGRAPH.

UX Week 2018

When? August 21-24

Where? San Fransisco, CA

Who’s it for? UX Designers

What’s the big deal? This conference is so chock full of content, the organizers need a week to get it all in. UX Week is a four-day conference in San Francisco that brings in designers worldwide to collaborate and learn from industry leaders. This year’s roster features speakers from Etsy and Microsoft, along with designers who’ve worked on Hollywood-level films to hosts of radio design shows.

Circles Conference

When? September 19-21

Where? Fort Worth, Texas

Who’s it for? Designers, illustrators, creative directors and UX designers

What’s the big deal? The Circles Conference isn’t designed for niche designers — it’s a three-day event designed for helping creatives deal with the reality of most design work today — you’re not just a designer. The Circles Conference isn’t afraid to talk about wearing multiple hats while also dishing on industry trends and pushing past common stumbling blocks. Mixing discussion with hands-on workshops, attendees also walk away from the experience with contacts for long-term relationships with like-minded designers.

Design Matters

When? September 26-27

Where? Copenhagen, Denmark

Who’s it for? UX and UI Designers

What’s the big deal? Centered on digital design, Design Matters is a two-day conference that explores current digital design while theorizing on the future of design. The list of speakers includes easily recognizable names like designers from Netflix, Minecraft, Amazon, IBM, Dropbox and more. The 2018 event is focused on making an impact using design, creating immersive worlds and augmented reality, and rebelling against the traditional design rules.

---

Can’t make it to a conference? Get your design on with CreativeLive on the go or from the comfort of home. Shop all Art & Design classes now! 

---

Adobe Max

When? October 15-17

Where? Los Angeles, California

Who’s it for? Any creatives using Adobe software

What’s the big deal? What better way to learn the ins and outs of software than from the company itself? Adobe Max has a full schedule of both talks and hands-on workshops from design and illustration to photography and video. Last year’s event had over 300 sessions, so if there’s an Adobe software that you want to reach ninja-level proficiency in, Adobe Max is probably a good place to do it. The event also tends to include announcements and sneak peaks on Adobe’s latest products, so attendees are among the first to glimpse the latest features heading out to Adobe software.

An Event Apart Design Conferences

When? Various dates

Where? Locations across the U.S., including Boston, Washington DC, Chicago, Orlando and San Fransisco

Who’s it for? UX designers, developers, and other website creatives

What’s the big deal? Looking for a conference with all the perks but without so much travel? With four locations across the U.S., chances are good that there’s an Event Apart conference in your region, for U.S. based designers. A conference for everything related to websites and website design, expect industry leader presentations, networking and tips you can use right away.

Digital Summit Design Conferences

When? Various dates

Where? Locations across the U.S. in 18 different states

Who’s it for? Digital creatives, including UX designers, mobile app designers

What’s the big deal? With a conference in 18 states, chances are even better that there’s a Digital Summit not too far. The conferences are focused on all things digital, including digital design. While not as niche as some other conferences, the slate of speakers usually includes reps from big companies along with workshops and master classes.

---

Can’t make it to a conference? Get your design on with CreativeLive on the go or from the comfort of home. Shop all Art & Design classes now! 

---

TAGS #APP DESIGN #CONFERENCES #DESGIN #DESIGN CONFERENCES #DIGITAL ART #GRAPHIC DESIGN#UI DESIGN #UX DESIGN

Hillary Grigonis

Hillary K. Grigonis is a web content writer and lifestyle photographer from Michigan. After working as a photojournalist for several years, she made the leap and started her own business and now enjoys sharing tips and tricks with emerging photographers.

Read More