Master teaches you how to plan Web design sketches

When you plan to design a Web page, you don't have to rely entirely on electronic devices. Learning how to hand-draw can help improve design efficiency and give you more inspiration.

Design colleges teach students a lot of basic courses. There is no doubt that many large institutions or start-ups are using the method of returning to the basics to design and create. Whether you are a long time to doodle the Ashes class master, or just start sketch small rookie, can use paper and brush to create is very important design skills. Do not worry. Some tools that mimic the function of a pencil are also not covered. In this era of equipment-oriented, there is still a lot of space for simple and acceptable design creation.

In fact, I often hear a lot of people complain that designers waste too much time and cost in using PS to make elaborate sketches of plans. Hand-painted is more flexible and can help you develop more original plan sketches while reducing costs.

Whether you're working in a big company or a freelance designer, it's essential to communicate with your customers by sketching.

Why do you want to draw a sketch?

Hand-drawn sketches are more advantageous than digital wireframe or electronic painting. It is easy to carry, easy to understand, more creative, and tried. There is nothing simpler than using pen and paper to express the way directly.

I find that customers prefer to be able to make suggestions and make changes while getting information. Drawings made from electronic devices appear to be close to the finished product, leaving the customer with a desire to lose suggestions and modifications. Freehand sketches are very casual and you can modify them as you please.

Diagram: Such a wireframe looks like a lot of text, and it's difficult to express the style and tone of the work, especially some photos and visual material. When did you see these big "XX" descriptions of the pictures that will be placed here?

By sketching, you can quickly record the ideas in your mind. Hand-painted sketches are very efficient, and you can reduce your working hours in front of your computer and spend more time focusing on your creations. You just have to roll up your sleeves to find the solution.

Image: This sketch will eventually be made into PS format electronic images. You can see the similarities between the electronic sketch and the sketch layout, and you will find that the sketch is more expressive of the artistic style of the final work.

Using freehand sketches can reduce the use of alternative images (that is, the big forks that replace your official pictures). Hand-painted web sketches can also save you the cost of buying alternative pictures.

Image: This is a sample of the Web page. Do you see the evolutionary process from sketching to the final sample?

How to get started?

One thing is for sure, that is practice makes perfect. So pick up the pen, and start the sketch book.

I've found that the best way to do this is to practice sketching while standing in line or waiting, while you're drinking coffee, or when you're shopping at a grocery store, or when you're waiting for a train. Any waiting time can be used for hand-painted exercises.

Draw anything you see, which will help you present your thoughts to the client. Drawing on everyday objects can help you gather inspiration, and you can keep track of your thoughts whenever you carry a sketch.

As the time and quantity of practice increase, your hand-drawn will become more and more exquisite, and will develop into a more formal style of painting.

Web designer's hand-painted

When planning to make a Web page, hand-painted is an integral part of the plan. You can use it for design, user experience testing, user interface element design, and even font testing.

I used to use freehand sketches on several pages to create and create projects, such as photographic pictures and icon designs. I have also used hand-drawn to solve difficult user interface problems, such as how to make a button that is comfortable to use.

Hand-painted is the best tool for the communication of design ideas. And customers also like creative elements. Let them also join in the process and you will find that they also like to paint.

A client once said to me: "I think you can draw it, it is amazing." "This is the magic of hand-painted in customer meetings.

Warning, practice, practice, practice.

Photo: Doodlers Anonymous is a great community where you can start to practice hand-painted and see other people's graffiti while seeing others ' sparkles. This is also a good community to share and communicate.

Beware, the world is very cruel. It can be difficult to practice hand-drawn. If you are not an experienced painter or a tool that is not ready for painting ... It's better to spend more time practicing outside of work.

If you want to find some inspiration, you often go to see worldwide sketchcrawl, Doodlers Anonymous, and Urban Sketchers.

After studying the painting tutorials and submitting your compositions on the painting blog, you have to think, am I ready to hand-painted in front of the client?

Image: Urban painting is an international, non-profit, dedicated to the site of hand-painted observation. It has an influential community on Flickr and Facebook. Its official blog featured a group of hand-painted masters of the exercises to share. You can find a lot of drawing tips in its blogs, Flickr, and Facebook communities that are worth referencing.

Remember, the strokes are not to impress people. So it's very important to have the ability to hand-draw. Maybe you need to take some time to practice and think about how to show your ideas in front of your customers.

Photo: This is an early electronic hand-drawn sketch. I was trying to mix the digital hand of the wireframe with the Wacom Digital board. From here I have found that to have more interaction with customers, the strokes are far from enough.

Questions to be raised when sketching a project in hand-drawn design

First I ask myself, do I know what I'm going to use in design? If it's a redesign project, I'll list the elements that I already have and write down the new elements that customers are looking forward to seeing.

If it's a new Web page, I'll refer to the same type of Web site and conduct a competitive analysis of those sites, and identify the needs of the users and write these points into a list.

Next, I'll ask the customer if they have a special favorite design style. Most of the time customers have their favorite websites. Knowing these is helpful for the next design. Color matching, font selection, language style, visual elements, and design trends, these tend to have an impact on marketing. Picture sharing, emotional display boards, and design "Treasure hunt", these links will help you understand the customer's preferences.

Hand-painted a design sketch

Photo: This is a sketch of a drawing that I designed for a private school. The goal is to fully display the layout of the Web page, while not wasting too much time on the PS rendering.

First, collect the key content on the page. I'll use a post-it or create a document. Of course, I'll start with the text, but the text just records the original idea, so I know what will appear on the page.

Second, I will pick out some of the different ideas to hand-painted. I have a great idea and I can make up my mind to finish it. I usually get a lot of feedback from my customers and peers. Hand-painted sketches are visually very informal, so customers will be more comfortable to choose the preferred scheme to make the next step.

A typical project process

Image: This is the PS finished product made from the selected sketch. You can see the help of freehand sketches in choosing pictures.

For most of the items, I'll start with a simple square and some thumbnail pictures. This process is very simple, but it helps me to provide a lot of choices for customers, managers, and partners.

When we start talking about the idea behind thumbnails and thumbnails, I'll show you the thumbnails I've chosen with rough hand-painted. These sketches can help determine the primary and secondary content of the page and the layout of the page. I also draw pictures and other materials to prepare for the typography of buttons or other icons.

At the beginning I will try to figure out what the user wants and how to arrange the content on the page. This phase is a need for cooperation. I'll show my sketches to customers, managers, and team mates. If necessary, we will even have some users to test. Next I will change and refine the sketch.

Once the sketch is roughly settled, I'll draw a formal wireframe. Like the traditional wireframe, the hand-drawn wireframe will have concrete content, text, icons, and pictures. So my design style and some ideas will be tested and validated in this sketch. I also use a freehand wireframe to test the elements of the user interface to make sure they are available. We'll test all the scenarios, and sometimes we'll have some design that's somewhere in between.

Sometimes when I need a formal presentation to my client, I use ink instead of graphite for hand painting. Ink will increase the formal sense of hand-drawn, if you want to color, I do not have to worry because graphite instability and blurred the interface elements on the page.

Finally, you will build your own design process. The best part of hand painting is that it makes design free. You can record your ideas anytime, anywhere.

Practical hand-painted "sharp weapon"

Figure: It's important to find the right drawing tools. I like to use Uni-ball Vision. A portable brush can easily fill the color.

In general, these are common tools for interactive painting in meetings.

Pen-I love to draw with a pen. Of course, this requires a certain amount of self-confidence, but you can always reorganize your line. Customers also like the visibility of ink. My favorite pen is Uni-ball Vision. It is waterproof, you can use watercolor to color.

Portable Whiteboard-Take an old whiteboard and cut it into small pieces so there are a lot of small, portable whiteboards. You can take your portable whiteboard from one office to another, or you can use the impression notes to record work and sketches.

Large sketch book-do not shrink from the small size of the sketch originally for customers to paint. Find a book that is at least 14 inches long. This will be a better way to showcase your work.

Flip Chart--Flip chart In fact, like a portable whiteboard, are the tools to attract customers. If it can be pasted, it can be affixed to the wall for a long time design discussion.

So what?

The best tool for a designer is your idea. Your ability to express information quickly and efficiently separates you from the rest of the web-building process. Hand-painted can liberate you from the mouse and the monitor.

With excellent hand-painted skills, designers can improvise and steer dialogue to the path of innovation. Hand-painted can be lazy, so that you can maintain the intimacy of the project.

Grab your pen, move your sketch book, and turn your graffiti into a market-worth picture.