Return to the source of design: How to use the sketch planning site?

There are a large number of basic courses in design colleges. It is not surprising that big companies and start-ups are taking a back-source design approach.

Whether you're a lifelong graffiti artist or a serious trademark designer, it's an important design skill to explore your inspiration through paper.

Don't be afraid! The strength of such tools as pencils will not die. In this era of dedicated equipment, a simple, time-tested approach to design is still promising.

In fact, I've heard a growing voice against wasting hours on the high-fidelity Photoshop effect chart. Hand-painted artwork allows you to create iterative incremental designs in a flexible way, without having to overspend on high fidelity designs and electronic manuscripts.

Whether you're a big company or a freelance designer, it's a very important tool to communicate ideas with your customers quickly and hand-painted.

　　Why hand-painted?

In some ways, hand-drawn manuscripts have advantages over wireframes and even electronic manuscripts. It is portable, cordial, creative, and time-tested. Nothing is simpler than paper and pencils (or pens).

I have also found that hand-drawn drafts are popular enough for customers to be able to make comments and make changes. The high fidelity effect picture looks like "the finished product" or is about to complete, that will bind the customer to propose the improvement proposal the intention (COLA orange here really cannot help to insert a sentence, this completely does not conform to the national conditions Ah, unscientific!). The hand-drawn manuscript is relatively rambling, friendly and informal. You can erase the changes.

Wireframe is always filled with a lot of text, rarely reflects the trend of art and design tone. Especially for photos and visual elements. Have you ever seen a large fork that conveys a picture?

With hand-drawn sketches, you can quickly and almost mentally exercise your thoughts and record your ideas. It works so fast that you spend less time in front of the screen, so you have more times to create ideas. Roll up the sleeves and look for answers.

It will eventually translate to Photoshop's visual manuscript to the customer. You will find that it is similar to the traditional wireframe, but it can more closely reflect the art trend of the design manuscript.

By hand-painted, you can eliminate those images just for the placeholder. You know, you put a big fork in a prototype diagram and an effect diagram, and it's going to put a real picture here. You'll be saving your expensive copyrighted pictures.

This is the site's effect map. Can you see the changes in the sketch to the wireframe and to the effect diagram?

　　Where do we start?

There is one thing to be sure, more practice to master. Carry a notebook to Doodle, iterate, sketch, keep the skill in the best condition.

I've found that the best way to practice is to draw a picture in any line--like buying coffee, grocery shopping, waiting for trains ... As long as the waiting time, can be used to hand-painted.

Draw what you see and this technique will help you in the future when you need to show it to your customers. By painting each of the things that inspires you, taking a notebook with you means you can record your inspiration at any time and leave it for later use.

As the volume of hand-painted increases, you will begin to refine your hand-drawn manuscripts and translate them into more formal illustrations or drawings.

Hand-painted for web design

When planning a website, hand-painted can become a very important part. You can use it for design, user experience testing, interface elements, and even trying out ideas for font design.

I used it to imagine some creative elements, such as photos and icons, on multiple sites. I have also used this approach on key interface issues, such as how to make a button or icon more intuitive and friendly.

Hand-painted is also the best way to change the design elements of an exchange. Customers like this creative link. They're going to be stuck in this, and they like to be painted.

I had a client who said, "Wow, it's like you can draw it right away." It's unbelievable! " This is the magic of hand-painted when interviewing clients.

　　Attention! Practice more.

Doodlers Anonymous is a good place to start learning, to see how others hand-painted, doodle and think about their ideas. It is also a great place to share community and peer exchanges.

Note that the reality is brutal. It's hard to delve into hand-painted. If you are not sophisticated, or have not polished your artwork ... Then find some time outside of work to paint.

Inspiration can be found on sites such as worldwide Sketchcrawl, doodlers Anonymous and Urban Sketchers.

Subscribe to some hand-painted blogs and delve into those logs and hand-drawn manuscripts. Then ask yourself, are you ready to paint in front of the client?

Urban Sketchers is an international non-profit organization dedicated to observing and studying hand-painted. They have a perfect community on Flickr and Facebook. An important part of their blog is a core group of hand-drawn and selected journalists who collect works from other people around the world. In their websites and Flickr and Facebook communities, you can find a number of inspiring ways to sketch the world around you.

Remember, the strokes don't impress anyone. The ability to hand-draw is a very important beginning. You may have to take the time to "practice" and understand how to express your ideas with hand-painted before you invest in a client's project.

This is an early piece of electronic hand-drawn work. I was experimenting with a mixed-type electronic wireframe that was sketched with a Wacom digital board. From these early hand-painted works, I learned that for customers, simple strokes is far from enough.

　　Questions to be raised when hand-painted

First ask yourself, do you know all the elements of the page you are designing? If it's a facelift, I'll check the existing content and think about what the user wants to see.

If it's a new site, I'll go through the peer site, do some competitive analysis, and then look at what the most "typical" users want, and add those to the list.

Next, I'll ask the customer if they have some design preferences. In many cases, customers have websites they like and adore. It is very helpful to know these things and to understand their preferred design language. Color schemes, fonts, language/copywriting styles, visual elements, and design trends that affect the marketing Commissioner. Pinterest, atmosphere Picture Library and "Treasure Hunt game" help to master a customer's personal preferences.

　　Hand-painted Expression Design

In this case, this is what I drew when I designed a website for a private school. The goal is to avoid spending a lot of time on the high-fidelity Photoshop rendering, and also to image the wireframe of the homepage.

First, I use a sticky note or write a document to collect the most critical information on this page. Of course, it's all about writing on paper, but text is a representative source of inspiration, and it can help me sort out a comprehensive list of the navigation, content, and support information I need.

Then, I'll convert the list of text items to thumbnails. Draw navigation, content blocks, ads, columns, support information blocks, page headers, footer, and so on. If the paper is not enough, just stick one below.

Next, I will choose the final winning idea for the final hand-drawn manuscript. Once I have formed a series of useful ideas, I decide to move on in its direction. At this stage I can always get a lot of feedback from my clients and my designer peers. Hand-painted looks very popular, customers in the selection of the best creative also feel more relaxed, at this time, the distance from the formal PSD effect diagram is still early.

　　A typical project process

This is a high fidelity Photoshop visual manuscript evolved from a hand-drawn wireframe. Can be seen from the hand-painted to the photo of the art trend of help.

In most projects, I start with a simple rectangle and draw a series of thumbnails. The process is fairly straightforward, but it can help me create a set of options for customers, project managers, and designer peers to choose from.

When we talk about thumbnails and the ideas behind them, I draw further sketches based on selected thumbnails. These rough sketches are designed primarily to prioritize content and to push the finalization of page layouts. I also draw pictures and creative elements, such as buttons or other icon graphic elements in the layout.

In the sketch phase, I want to answer questions such as "What the user Wants" and "how to embody the content priority". There is a great need for collaborative discussions at this stage. I will share the sketches with customers, managers, project colleagues and other designers. If necessary, we will pause for a moment and draw one or two sketches before the user for testing. Then repeat this phase to refine, iterate, and deduce the sketch.

Once the direction of the sketch is clear, I will draw a formal hand-drawn manuscript. Like the traditional wireframe, there are certain contents on the page of the hand-drawn wireframe ... text, icons, and photos. Therefore, I to the picture of the art trend in the hand-drawn manuscript has been examined and discussed. I also use a freehand wireframe diagram to image the final UI elements to make sure they are useful. We usually test these, even for some very complex interfaces, and draw the wireframe of the transition interface that users will encounter.

Many times, in the formal presentation stage, I will use ink instead of graphite to paint. Ink can add a bit of formal sense to a hand-drawn manuscript, and if you add color, I don't have to worry about some of the actual UI elements on the missing page.

In the end, you always form your own process. One of the most magical parts of hand-painting is that it achieves complete freedom. You can capture inspiration at any time.

　　The "plugins" needed to draw a conference sketch

It is important to find the right tools to hand-draw for customers. I'm a big fan of Uni-bal vision, and it's waterproof. A handy brush can fill a large area of dark ink well.

So, to sum up, here are some of the "meeting" items that are needed to draw a good interactive hand-drawn manuscript.

Pen-I love drawing with pen. Of course, using ink to sway creativity requires a certain amount of self-confidence, but you can redraw those lines at any time. Customers also like the clarity of ink. My favorite pen is Uni-ball Vision. It is waterproof, you can rest assured that the use of color markers.

"Portable" whiteboard-find an old whiteboard and cut it into smaller, more portable "mobile" whiteboards. Mobile whiteboard can follow you through the office, but also through the Evernote to record iterative changes and hand-drawn manuscript.

Big Sketch Book-Don't use small sketches in client projects, don't be afraid, find something 14 inches wide to use. As much as possible in the big things on the presentation of ideas.

Flip Chart-It's similar to a portable whiteboard ... It's an incredible tool to keep your customers focused on an idea or concept. The sticky kind can be glued to the wall to cope with long design meetings and team work throughout the afternoon.

　　Conclusion

As a designer, the most valuable property is your mind. The ability to quickly and spontaneously express visual information makes you different from other roles in the Web development process. And hand-painted can release you from the mouse and display, the scene to show the customer the answer required.

With reliable hand-painted skills, designers can improvise ideas and turn conversations into real innovations. Hand-painted can be very popular idle, can keep the whole project cordial.

Then, pick up a pen or pencil, a sketch book, and then turn your graffiti into the sales of employers and customers.