Adobe Creative Cloud

June 25, 2015 /UX/UI Design /

Sketch, Iterate, Repeat: Prototyping Your Website Design

Explore ideas with pen and paper

Pen to paper is a great way to start creating user flows and low fidelity sketches for your design work. As a design medium, paper is very forgiving and allows you to explore ideas and test concepts. Solve problems freely on paper without having to think about how the problem will be solved by applications or code. Sketching allows you to generate a large number of ideas in little time. Don’t be concerned with how rough or unstructured your initial sketches are; simply capture your initial ideas and thoughts, as well as define the concepts. You can later take the best elements and refine your ideas.

Designer develop a mobile application usability and drawing its framework on a paper.

One of my favorite techniques is to photocopy some of my sketches, cut them up into the base components, as described in Brad Frost’s Atomic Design, and then begin fleshing out the design concept by grouping and reshuffling components.

IMG_20150621_175934

I find that by physically moving the pieces of paper around, it allows me to identify patterns and think about how the user will interact with the design solution and interpret my messaging.

“We’re not designing pages, we’re designing systems of components.”—Stephen Hay

Recently I started using with the Creative Cloud connected notebook for importing sketches quickly into applications for further refining and rapid prototyping.

creative cloud moleskin

Iteration and evaluation of your design solution takes practice. Sketch daily, sketch often and prototype. Follow the ABCs – “Always Be Creating.”

The Design Funnel

Sketching and repeating the iterative process helps you move through the design funnel, getting your ideas and design solutions from low to high fidelity and allowing you to tailor the design to the communication message or digital product. The design funnel is based on Stuart Pugh’s Total Design, which separates activities into six iterative stages. For digital product design, I’ve simplified this into sketching, wireframing, mockups and prototypes. Remember, a sketch does not equal a wireframe.

Banners_5_3

Skip the Ipsum. Use real content.

The design of any digital solution should always begin with real curated content. Placeholder text is only an estimation of any possible design solution. Your design should provide context to the content for users (and your client). Using placeholder content can lead to making wrong design decisions that can affect design and further development. I’ve seen countless mockups or prototypes referring to “Bob Smith, job title here.” Use real copy to know how your design will look like once it’s been fully implemented. Real copy will help you define the lengths of form fields and how long sections and sidebars will be. Lorem ipsum will give you a false sense of security and lead to unrealistic assumptions about your design work. You will design to an ideal amount of copy or content, neither of which occurs in the real world. Make design decisions that support the content.

loremipsum-compare

Design is How it Works

Simplicity is the goal when designing user interfaces and user experiences.Reviewing use cases and job stories can help shape interfaces and strip away unnecessary friction points within the interaction. However, we still do not truly know who the end user will be or how they will interact with the interface.

As UI and UX professionals, it is important to create user interfaces that satisfy the needs of both novice and expert users, interfaces that are easy to learn without being condescending. Getting from point A to B requires us to bridge the knowledge gap for novice users through visual cues and feedback while providing advanced, learnable and explorable features for advanced users.

Test Assumptions in the Browser

Test, early. Test often. Provide context of use. Build prototypes that can be used in the browser or on mobile devices to test your design assumptions through prototyping to validate your ideas and solutions.

Through prototyping, design “hand ready” user experiences, creating tools and interfaces that users don’t notice they are using – tools and interactions that become extensions of the user. Set the stage for engagement and maintaining an interaction flow that is simple, quick and natural. Ultimately, you should design for touch.

designer drawing website development wireframe

UX Design Tool Kit Checklist:

  1. Pencil & eraser
  2. Gel ink pens (my favorite)
  3. A ruler
  4. Sketchbook (grid or blank)
  5. Grey tone makers
  6. UI stencil
  7. Post-it notes
  8. Sharpie markers

Anything else you’d add to this list? Let me know in the comments.

Happy designing!

UX/UI Design

Join the discussion

  • By Hood - 6:09 AM on June 27, 2015  

    Except we would never take it to DW or muse #bootstrap

  • By Wrisberg - 9:42 PM on July 5, 2015  

    Regarding the non-ipsum text, it is not always easy to write made up copy about a topic you know nothing about. An excuse to show off an old project of mine (it needs some dusting now a few years later): http://wiksum.com/. It takes a link for a Wikipedia article as input and outputs the same words, scrambled into nonsense sentences – I can promise that clients like to see familiar words in the mock-up designs!

    • By Andrew - 5:55 PM on August 12, 2015  

      As a wed designer/developer, you should not be writing copy for your client projects. It is good standards of practice to do a content audit and incorporate a content strategy into project to have the client provide copy up front.

  • By Andrew Clarke - 7:21 PM on November 3, 2015  

    Would you consider using and iPad (with an app like Adobe Sketch + FiftyThree Pencil) as a replacement for the physical sketch pad and pen?

    • By Andrew - 9:53 PM on November 5, 2015  

      Hi Andrew,

      Everyone has a different work flow. I find that starting with paper you do not have any limits on where and how you can sketch. If you run out of room, you can simply add another sheet. Staying analog allows you more freedom and a notebook and pencil and go anywhere or be used anywhere.

      Digital tools are great for rapid prototyping but can, in my opinion, can limit your ideas.