Hand-drawn art and design is gaining popularity and industry demand. Let’s see how this aesthetic can enhance your designs

The marriage of traditional and digital graphics is a fun and ever-evolving experiment. On one hand, hand-drawn sketches have an intrinsically poignant and unique quality, making it irreplaceable. On the other, digital software is great at mimicking hand-created effects, bringing a whole new look to the traditional approach. This tutorial will show you how to design a template that seamlessly blends the best of both worlds.
The end result is a flowing aesthetic that begs the user to figure out which parts are hand-drawn and which computer-generated. As you try it out, you’ll soon discover this process is not only amazingly fun and useful, but the possibilities are endless. An ordinary sketch or doodle has the potential to become a functional element in a website, while computer-generated graphics add further visual prowess to improve the overall look.

(This tutorial originally appeared in Web Designer issue 156, authored by Wendy Ding)

01 Inspiration

A great starting point for this tutorial is the sketchbook. Every creative person should carry one and sketch ideas whenever they come to you. Abstract flowing lines, fun colours, odd juxtapositions and unexpected patterns are all worth noting down as creative reference. We will be using them to implement a similar treatment and styles into our sketchy web template.

02 Colour palette

The magic of a sketch or doodle is its uncontained quality because it is a visceral expression of emotions and thoughts on paper. The colour palette should subsequently reflect that immediacy, and for this purpose solid graphic colours work well. As a second and complementary element, quiet pastel hues are great for adding softness.

03 Rough sketch

Using natural sketching techniques, instinctively begin rough sketching some concepts across the paper and formulate up with a base drawing. The idea is to get a feel for the elements needed in the finished product: flowing decorative shapes and lines that form together to make a header. For now, we’ll use a regular blue ink pen for a quick brainstorm.

The Eighties are making a comeback not only in fashion but also in web design. Here’s how to add some recognisable graphical touches

The Eighties is a special time for today’s Gen-Y’ers. It’s synonymous with our childhood when sunglasses, Rubik’s Cubes, cassette tapes and neon colours were all the rage. It was about exuding an unprecedented loud personality in all fronts: big hair, big clothes, and even bigger shoulder pads.
In terms of design aesthetics, computer graphics had started to become more popular. Everything was over the top and often clashed because of the bold colours, playful compositions, zany patterns or a combination of all of them. Some designs were so visually strong that it was overwhelming to look at. Nevertheless, this is what gave the Eighties its daring edge, which makes it one of the most memorable eras.
With this in mind, let’s explore how to dress up a web template in the style of this unique look. A collage, hands-on approach using bold colours, hand-drawn text, sketchy doodles and the signature spunky attitude all come into play. Totally rad, right dudes?

Tutorial files available here.

01 Design concept

This exciting concept for an Eighties-style design is a whirlwind of playful iconic graphics that can all be associated
with that time. It embodies a combination of computer and hand-created images with some vibrant splashes of colour to invoke an energetic quirk. The open structure of the page invites the viewer to step in as if they were entering a time machine.

02 Design space

There are three columns here from left to right: navigation, main content, and eye-candy graphics. The backdrop for the actual content is toned down compared to the heavier graphics to create balance and visual comfort. Although the menu text is rendered in a sketchy manner, it’s clean and clutter-free and this helps add to the focus.

03 Iconic images

We chose four of our favourite images from the Eighties: a Rubik’s Cube, cassette player, fashionable girl and a sneaker. Sketch these by hand with a pen or marker on white paper. Scan the drawings into Photoshop under File>Import. Double-click on the image layer and hit Enter to exit the default locked background mode.

04 Close Cropping

Then you will need to save the document as a .psd file. Next, delete the background so only the object remains (this is Close Cropping). This can be done with the Magic Wand tool and Polygonal Lasso tool. Clean up afterward with the Eraser tool if needed to make sure all your edges are sharp and the image looks clean and crisp.

CREATING A DESIGN for a website that successfully represents the subject matter or business in question is more than chance. When we embark on a new web design
project it’s always very tempting to jump straight into creating visual mockups, defining navigation placement and colour schemes. This can work occasionally, and definitely adds a freshness to the final design, but as an approach it’s full of risks.
As a professional web designer it’s better to take a structured, measured approach where you build a design solution after examining business objectives, user requirements and defining the informational layout; that is, how the information
contained within the website will hang together.
There are many different ways to approach a design project. In this short tutorial we will look at just one way to improve your workflow, reduce risks to meeting business goals and end up with a meaningful design that meets users’ needs. You can adapt this approach to suit your own personal needs – the key lesson to take away here is that having a firm structure in place doesn’t actually restrict the creative process but rather gives it a solid grounding.

Author: Sam Hampton-Smith | Originally appeared in Issue 156

01 Gather information
The first stage of any design project is to find out who you’re designing for. This is simple enough if you’re working on a personal project, but if you’re employed to work for a client you need to ask some crucial questions at the beginning of the process. Establish what the purpose of the site is, who it’s going to be aimed at, what the constraints are (specific colour schemes, fonts and images that are required as part
of any existing branding) and so on. In our case, we’re going to be creating a design for a medium sized engineering consultancy business. Understanding your client and their business is crucial as this will have a huge impact on the design considerations.

02 Define your objectives
Having determined who the website is going to represent, we need to establish what and who it’s for. In most cases your client will want their site to perform a particular function: increase sales, communicate with customers, build relationships or explain a concept. These are the core business objectives that drive the decision to develop a site. Once you’ve defined the objectives, you’ll have a good idea of who the users of the site are going to be. You’ll also be able to set some success criteria; define how you will measure success or failure of the website. For our business the client wants to broaden their customer base, educate existing clients to other services offered and introduce a new sustainable energy service.

03 Create user personas

At all points of the design process it’s useful to refer back to the business objectives, and also the target users. You should ask yourself what the user reaction will be to any design element you introduce. To help measure and objectively record this crucial information, create a series of user personas. A user persona is a caricature of a typical user within the target audience. Develop a separate persona for each major element of the target audience. Give each a name and some broad characteristics such as age, sex, wealth, education and attitudes. Base these attributes on what your client can tell you about their customers (but avoid recreating a real person). Have a look at our personas which you’ll find on the cover disc. If it helps to visualise your users, Google Image search for suitable mugshots for each persona.

04 Create a site map
Now we know what we’re creating, for whom, and what the objectives are. This collection of information allows us to start creating the informational layout for the website: how the content and site information is arranged semantically. A common approach to handling this part of the design process is to create a site map. This is a visual representation of the pages or sections that comprise the site overall. Draw this on a piece of paper and think carefully about the relative importance of pieces of information. Refer to the objectives and user personas to ensure that the key information is readily accessible. In our case, the client wants to push their renewable energy services, so our primary navigation will contain a link to further information about this.

05 Make a mood board

Here’s where the fun begins. It can be tempting to jump straight into a web design project at this stage, but the value of the information gathered and developed in the first four steps will really show a benefit when you start laying down ideas. The idea is to gather together as much inspirational material as possible. Collect this in any way that suits you: a mood board with cuttings from magazines and brochures, a digital clipboard with web snippets and screen grabs, or a big box that you can stuff T-shirts, sandwich wrappers and vinyl records into. Save and record anything that can provide inspiration to your project. If you’re unsure what a mood board might look like, do a Google image search for ‘mood board’ to get some ideas. See the boxout for useful tools to help you create your mood board.

06 Sketches and storyboards
Now it’s time to take your mood board and sitemap, user personas and objectives, and create a series of thumbnail sketches to represent a design solution that encompasses all of these elements within a single layout. Each design decision you make will be related back to the information established and developed in the previous stages. We’re using the company font, Cafeta, to create accent headings and navigation elements, helping to support the branding. The branding suggests the Twenties to us, so we’re aiming for a stylised industrial look which also helps to re-enforce the business message and competencies. Notice that we’ve set aside three large areas for key service messages; as our user personas are busy decision makers we’re going to try to get the most important information across to them quickly and effectively. We’ve still got room for an aesthetically pleasing layout though! Every designer is different; there is no right and wrong answer to the design process, so do what feels right for your project.

07 Reflect

This is arguably the most important phase of the design process overall. You must take time to step back and reflect on the work you’ve done, the design solutions you’re proposing, and what that means in terms of usability and the business objectives. Consider how the users represented by your personas will react to the website; will it appeal? Will they like it? Will it meet their needs quickly and without fuss? Is the design appropriate to the business and its objectives? If you can answer positively on all counts you’ve got a workable design. It’s also worthwhile getting second opinions at this stage; ask some willing volunteers to give you honest feedback on your design approach, and take on board any criticisms without taking these personally – feedback, good or bad, is a useful tool to help you refine your design.

08 Create design approach
Once you’re happy with your thumbnails, you need to develop these into a first digital mockup. Everyone has their own favourite way of approaching this, so use whichever tools you’re most comfortable with whether it’s Photoshop, Fireworks, Paint Shop Pro or Illustrator. We’ve used Illustrator and Fireworks here to refine our thumbnails into a design that fits a 1024 screen width (common for corporate businesses). Choose supporting images carefully, and refer to your mood board to get the right combination of image association and colour. Stick to a defined colour palette throughout the design. Don’t spend too much time on the fine details yet; we need to test that the design works before developing the final product. The photographic images used within our example site design are licensed to Stock.xchng (http://sxc.hu).

09 Prototype your design

Ideally you’ll have a couple of different pages laid out roughly. There are numerous ways to test your design works effectively. Paper prototyping allows you to quickly spot any issues with navigation or information. Print out each page layout and sit down with a volunteer. Ask your helper to perform a series of tasks using your design (for example “locate the contact information for this business”). Get your colleague to point to the button they want to press, then show them the page that will appear when that action is taken. If the user can’t find the information you’ve asked them to, you need to look again at your design. Another approach is to use a tool such as Fireworks which allows you to create functional mockups of the website based on interactive images. Save each page design as a flat image then import them into Fireworks. Add image maps to link between pages where the navigation sits within the design. Repeat the same process as for paper prototyping, but sit your helper in front of the computer to conduct the testing.

10 Attention to detail
Once you’ve established that your design works, it’s time to go back and develop the fine details. Add your “wow-factor” elements here; embedded Movie Clips, careful typography and consistency checks. You still need to refer back to the user personas and business objectives, but by now the design should be very well defined so there’s less risk of going off-message. We’ve added some useful brand-supporting elements here such as ghosted versions of the logo, as well as a caption area for the primary accent image.

11 Refine into final template, then test again

Once the design is signed off by the client (or you’re happy with the completed design where you’re the client), work up the design into HTML in the same way you normally would. We look at some of the techniques involved in realising our design in the tutorial found on page 50. When the design is translated and you have your HTML, don’t forget to test it once more to make sure everything still works. This design approach might seem overkill for some projects, but your clients will thank you for it when their new website meets the specific needs of their users and supports their business objectives as well as looking great.

THE ACT OF news reading has largely moved from paper to screen, thanks to the internet. This doesn’t mean that newspapers are dead, its familiar aesthetics can simply take new life in modern-day newspapers: blogs and websites. Bold titles, catchy sub-headers, taglines and graphic styles yield
effective design and add a distinguished sensibility to any site. The result is an innovative interpretation of a tested and familiar visual communication.
Let’s take a look at how this is achieved with three different influences: a financial newspaper, a retro broadsheet, and trashy tabloid magazine. When designing web headers, the most crucial aspect to be aware of is spacing since there is only a limited amount of area to work with. Make the most of it by
keeping everything neatly aligned, clean and legible. Each style offers a uniquely different flavour but all will conjure up the fun of sitting back in your favourite chair and reading the paper.

Author: Wendy Ding | Tutorial originally appeared in Issue 157
Download Tutorial Files

01 First banner

The financial-style design here is like the tailoring in a fine suit, which adds simple sophistication. The title is timeless and bold while other elements echo the same voice, only slightly quieter. The clear and crisp white text on a dark background is an elegant and classic look that highlights the maturity of the website and gives it a clean, crisp feel.

02 Backgrounds

The space around the title is bigger and pure black while the rest are dark greys; this draws the eye and creates a hierarchy. The surrounding backgrounds also have minor
variations: the top bar has a diagonally striped pattern while the bottom is a faint black to grey gradient. These small details add subtle visual interest to the header and give it some extra flair.

03 Starburst

Make an oval shape in Illustrator with the Ellipse tool to use as a guide, then draw zig-zagging lines
around the top half with the Pen tool. Set the colour to #E2D6A3 with no fill and add some sheen with
Effect>Stylize>Inner Glow. Make the settings Normal blend in #9E9C5E, Opacity 75%, Blur 0.15 in and check the Edge box.

04 Dashed lines

In Illustrator, first create a line with the Pen tool in #B4EDED at 1pt stroke width. Then, under the Strokes panel, check the Dashed Line box and set it to 3pt dashed and 5pt gap. These lines will separate the headers but do so very subtly, adding a layer of depth to the site’s header and keeping within the overall intended theme.

05 Second banner

This banner will have a more retro theme. First, scan a multi-columned newspaper section. Then, in
Photoshop, select Image>Adjustments>Gradient Map and make sure Preview is checked. In the dialogue box, click on the gradient to bring up another window. Click on the first Color Stop and make it #685112 for the text, and the second #FFF7DA for the beige background.

06 Expand the image

To fill the whole page, you’ll need to duplicate the newspaper layer in the Layers panel and shift the
position so the two images stack one on top of another. With the Eraser tool, erase along the edges so that the text matches roughly. Merge the two layers when you are finished and you’re background image is coming along nicely.

07 Aging effect

To age the newspaper, use the Dodge and Burn tools to lighten and darken certain areas. Use a low Exposure like 5% and make the disparities random, as the aging effect should look natural. The end result should look like an old newspaper page. When finished, save the image as a JPEG.

08 Corner band

A dark band adds a nice contrast to the newspaper texture. In Illustrator, place the newspaper JPEG by selecting File>Place. On a new layer, draw a corner band with the Pen tool in a dark brown fill at #63452D with no fill. Then, add two thin lines close to the edges in #CCBD8D at 1pt stroke width.

09 Gradient

First you’ll have to drag out a thin horizontal rectangle using the Rectangle tool. Then you need to select the shape and in the Gradients panel, select Radial gradient and set the colours at #CCBD8D and #AD9A74. Then, with the Gradient tool drag inside the shape to apply the gradient.

10 Third banner: tabloid theme

The key to creating a tabloid look is using bright colours and big sans serif fonts that shout at the viewer with commanding force. Use clashing and lively colours like pink, yellow and white since the content is usually frivolous or trivial but nonetheless entertaining. More importantly, it needs to suggest a scandalous appeal.

11 Circle graphic

The type in tabloid design is mostly square and structural, so a round shape gives a nice visual break.
In Illustrator, create a circle with the Ellipse tool in blue at #3E75CE. Then, in the Appearance panel, add two new strokes from the corner menu and make the top one white at 3pt stroke width, and the bottom in a lighter blue at #52A5E8 in 10pt width.

12 Visual hierarchy

With high-intensity colour and letters, it is crucial to keep the design clean and fitted. Otherwise, everything will be too cluttered and messy. Make the title the primary focal point by increasing its size and set it in capital letters. Leave room at the top for a feature line, space at the left for a catchphrase or tagline, and be mindful of the colours’ effect on legibility.

13 Drop shadow

Normally, drop shadows are frowned upon because it can cheapen the look of a design. However, it is quite fitting for a tabloid theme and can be used here. In Illustrator, create the title text in the font Impact at 127pt size with a white fill and 2pt black stroke. With the text selected, click Effect>Stylize>Drop Shadow to bring up the dialogue box. Set the blending mode to normal in black at 85% with a blur of 0.08 inches.

Handmade-looking graphics add a personal touch to a project and inspire a sense of nostalgia. Wendy Ding examines how this can be done for a web banner in Illustrator and Photoshop

With the boom of blogs and social networking sites, the web is getting more and more personal. New websites are sprouting every day, and while it is handy to simply pick a template from the plethora of pre-existing ones, the aesthetics can easily become generic as the site loses its own personality. Too much repetition can lead to an overhaul of similar-looking websites and a diminished sense of individuality, thus adding to the “I swear I’ve already seen a site just like this!” factor.
Naturally, every company, business owner and individual is different from one another, and their websites may be used for different functions, such as an online store, a virtual kiosk for the company or a personal blog. Ideally, their websites should aim to project an accurate and engaging reflection without sacrificing too much individuality. This tutorial will demonstrate how to add a dash of personality that simultaneously highlights the function of the website.

01 Target audience

We’ve created a banner for a cute and girly dessert shop for young and fun-loving females like myself. In order to maximise appeal, we picked visuals that will attract them (and myself in fact): heart shapes, pastel colours, fashionable patterns in a bright and cheery tone. The right look is essential in drawing in the right crowd.

02 Choosing visual elements

A great exercise in choosing the right elements is to look at the selected images and see if it implies the correct idea. We chose four elements that best embodied the notion of dessert: icing, picnic tablecloth, hearts and cupcakes, because I couldn’t help but feel my mouth water every time I thought of them!

03 Colour palette

Make sure that you use colour wisely, as it sets the overall mood of a website. While it is subjective to individual taste, some rules will always apply: black is bold and serious, white is light and airy, blue is cool and tranquil, and so on. We’ll go for a pink and red palette to emphasise femininity, playfulness and fun.

04 Title text

Here we’ve chosen a fancy handwritten font to accentuate its delicateness. I also wanted it to emulate smooth chocolate and wrote it on a curved line. Create a curved line with the Pen tool, select the Type tool and click on the line to type. To change the placement, hover over it with the Direct Select tool and then drag.

This tutorial will show you how to design an eCommerce fashion site. Eye-catching and trendy graphics are great for drawing attention to a website, but ease of navigation will always reign supreme as the user should be able to swiftly browse and see the products no matter what. We created a mock layout in order to show how to combine fashion and function to make this happen. Remember the importance of clarity and hierarchy; what you initially want to draw the user in with (an image, tag line or both?), what products are available and what section of the website the user is currently on. We illustrated six dresses for the clothing section and built the website around it, as the products should always be the primary feature. The rest is all about tailoring (if you’ll pardon the pun) and choosing the right colours, patterns and the right amount of detail to maximise the overall appeal – just like a real outfit!

01 Initial idea

Step 1

First, figure out the target audience for the site and what theme would best appeal to them visually. Then establish a solid theme or look for the project. For this youthful, fun fashion site, we chose a nature and dream-inspired theme. Explore and brainstorm for the appropriate imagery

02 Rough sketches

Step 2

Now you have a theme, you need to come up with some visual elements. The sketches at this point are loose and uninhibited – anything goes! Next we refined the better of the batch and developed them into a more finalised stage. We lightly shaded it with pencil for a rough guide

03 Layout

Step 3

A good layout makes the website more user-friendly and understandable. It should be built on the nature of the site: what is the main function? Make a list of the main components of the site and divide them into a banner, menu, main section, shopping-cart section and footer.

04 Layers

Step 4

Organisation is absolutely critical in vector projects. Whenever you’re dealing with multitudes of elements, put related elements on separate layers and label them with a short and effective description. This also helps to think logically about the stacking order of the artwork.

05 Tracing refined sketches

Step 5

The sketches are scanned and placed in a template layer in Illustrator at 50 per cent Opacity. Trace with the Pen tool to turn the sketches into vector shapes. Initially, use a black stroke with no fill so the sketch is visible underneath. Colour is added later when the shapes are developed.

06 Hierarchy

Step 6

A solid hierarchy increases the overall design flow. A banner establishes the mood, the product section is next and then the shopping-cart section since it is an online store. The screenshot above shows how the eye should travel from one to three.

07 Colours

Step 7

It is important to choose colours that suit the nature/dream theme, so we went with gradients of teals and pale greens. Exploring with colours is the best way to create an image that you’re most satisfied with. Above are screenshots of some other options experimented with.

08 Shapes

Step 8

Illustrator’s most powerful tool is the Pen tool, and it can lead to a ton of fun and endless experimentation once you master its Bezier Curves. Keeping in tune with the theme, create various nature-inspired organic shapes, like flowers and palm leaves that embody dream-like qualities.