Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

Andrew Kuhar

Artist & Designer

28

8

Web Design on Paper

Hi everyone,

Below are my current notes and outline for my upcoming debut class, "Web Design on Paper." I've been a professional web designer in Cleveland, OH for several years now, and in looking back at my experiences & process, I'd like to share one of the most valuable lessons I had to teach myself: working your ideas out on paper.

I think this is a good class for Skillshare's platform and format because much of it requires no web design experience at all, and the concepts can be covered very quickly before getting into a real-world example. While jumping into any code without experience is daunting, I think it is important to show some semblance of a final result. In that spirit, I will provide a few helpful assets to keep students engaged and focused on ideation instead of troubleshooting. Web design can be fun and rewarding if you know how much to bite off at a time, with measured and creative learning tools.

Some familiarity with web code (HTML, CSS) & web design in general is helpful, but not essential for following along.

DESCRIPTION

If you are a graphic designer today, chances are you’ll be waking up a web designer tomorrow. It’s a skill that’s in higher demand than ever, and one that takes a lot of practice to get right, even if you’re already a talented designer. Although one of the toughest parts can be knowing where to start, the practice can be rewarding if you take some simple steps to plan ahead, research and pace yourself by executing each idea one at a time.

GOALS

The goal of this class is to introduce designers to some simple techniques and philosophies that can help you connect the dots, from your initial sketches of a layout to their early stages in a web browser.

We’re going to take a simple and familiar web design element today, an edge-to-edge article cover, and create it from the ground up using mostly fundamental HTML and CSS properties. We’ll start with and focus on the ideation process, covering how to take your time and plan ahead. We'll then conclude by figuring out how to transition those ideas into reality with great (and free) tools to make sure you’re getting the right results.

ASSIGNMENT

Come up with your own layout idea for a website you want to make – or already have – using easy-to-understand terms and quick sketches. Keep this simple, and just to one element. This could be an update to your main navigation, a way to represent a user profile, an eye catching button or even something that would appear in a sidebar. Think in terms of cards.

DELIVERABLE

Deliverables are two-fold:

  1. Share pictures of your own ideas in sketch form, similar to how I’ve presented mine.
  2. Bonus: share a version of the element we make together, but change something about it (fonts, colors, etc.) Get feedback if you’re not sure how you feel about it!
    1. I will supply a simple starter library to speed up the process

Class Outline on Google Docs (revised on 8/1)

Comments

Please sign in or sign up to comment.