What is UI sketching?

UI sketching is simply the process of drawing out your user interface ideas before diving deeper into the design process. It can be done with pen and paper or with a variety of online tools. UI sketching doesn’t really need to be detailed, it’s just a way to start visualizing ideas without significant time and effort.

Want to improve your website or product design process? Before you go down into the path of wireframing, prototyping, and developing, start with sketching.

Benefits of sketching

Although simple, sketching is an important step of web design and development. It allows you to identify high-potential ideas (and rule out less valuable ones). Here are just a few of the benefits of sketching.

Sketching is fast

Since you can sketch with pen and paper or on a whiteboard, it’s the fastest way to present your ideas. Any changes and updates can easily be erased or replaced prior to presenting (or during a presentation) to stakeholders.

It promotes creativity

Sketching empowers your creative mind by allowing you to focus on the ideas rather than the aesthetics.

No tools needed

While many UI designers prefer to use online tools rather than pen and paper, knowledge of a particular tool is not required. Sometimes tools can actually hinder you from presenting all of your ideas, because it takes more time and effort to use a tool than to grab your notepad.

More ideas, in less time

You can bring more ideas to life with rough sketches than with polished design. With more ideas in hand, you’ll be better prepared to select the best option and move on to wireframing.

Sketching vs. wireframing

Sketching is usually done prior to wireframing. Think of it as a rough draft or outline before you add more form and structure. Sketching allows you to bring multiple ideas to life, select the best option, and then move to wireframes, which are more of a blueprint of the user interface, and include a plan for navigation.

Related Terms

Brand Strategy

Brand strategy involves translating your technical offering into a clear value proposition and backing it up with a messaging framework and brand personality you can own.

Anchor Text

Otherwise known as link text, a link title, or a link label, anchor text can be described as clickable words or phrases within a hyperlink that connects two web pages.

Search Engine

Database tools that help users find content on the World Wide Web. Once a user enters a keyword or search query, search engines curate a list of the most relevant webpage URLs, images, or videos, known as the Search Engine Results Page (SERP).