Design

Beautifully Made Process Diagrams


  

Process Charting (also known as Process Mapping) is one of the oldest, simplest and most valuable techniques for streamlining work. It is used in nearly every level of production.

At the base of each product lays a properly designed production process that includes plenty of stages which help to channel efforts in the right direction and don`t get side-tracked from the main goal. So no matter what kind of service or product you provide, you more than likely will have some kind of process diagram you are working off of.

Breakdown of the Breakdown

Since every process consists of actual tasks that must be completed the diagram usually gets divided into the main steps. For example, basic steps for companies and freelancers that create websites are:

  • Concept/Idea;
  • Design;
  • Develop;
  • Test;
  • Launch.

Of course, there are a lot of intermediate stages such as researches, conclusion of a contract, creation of the main structure, discussions etc.

Nowadays, a great deal of websites dedicated to the business of the web have a special section with a graphical representation that visually depicts the sequence of steps in their process. Sometimes it’s only a simple chart or text which explains the stages of their work; other times it’s really a piece of art; where the user not only can get acquainted with the process, but can also be delighted and inspired by the beauty of the process diagrams.

Whatever form the process diagrams may take, they are definitely a must have. They’re required not only to improve productivity, but also to make your work more transparent and your company more trustful. It’s a kind of guarantee of control for the customer and, of course, an essential part of website design.

In this collection you will find some of the most inspiring and outstanding examples of process diagrams.

Sites That Get It Right

1. Deda – Web and Graphic Designer

deda - process steps section

2. Web Agency Pisa 

Web Agency Pisa - process steps section

3. 3 Sided Coin

3 Sided Coin - process steps section

4. Mark Jenner – Front-End Designer

Mark Jenner - process steps section

5. Mihael Miklosic – Web Designer

Mihael Miklosic - process steps section

6. Alan Horne  – Web/UI Designer and Front-End Developer

Alan Horne - process steps section

7. Paper Street Interactive

Paper Street Interactive - process steps section

8. Jean-Philippe Gams – French Designer and Developer
Jean Philippe Gams - process steps section

9. Ketch Studio

Ketch Studio - process steps section

10. Camstech – Digital Agency Dubai

Camstech - process steps section

11. Webzeit 

Webzeit - process steps section

12. Danny Giebe – Designer and Front-End Developer

Danny Gieby - process steps section

13. Jordesign – Designer

jordesign - process steps section

14. World of eStore

World of eStore - process steps section

15. Growcase

Growcase - process steps section

16. Submit Quickly

Submit Quickly - process steps section

17. Nadine Roba – Designer
Nadine Roba - process steps section

18. U Feed Me Back

U Feed Me Back - process steps section

19. Sebastianjt – Web Developer and UI Designer
Sebastianjt - process steps section

20. Tarful

Tarful - process steps section

21. Tugrul Altun – Designer and Developer
Tugrul Altun - process steps section

22. Raffaele Leone  - Italian Web Designer

Raffaely Leone - process steps section

23. Eric Barse – Web Consultant
Eric Barse - process steps section

24. Sandra Wilcox  - Graphic Designer

Sandra Wilcox - process steps section

25. KenGraphX 

KenGraphX - process steps section

26. John Jacob – Designer and Developer

John Jacob - process steps section

27. Rodolphe Celestin – French Web Designer

Rodolphe Celestin - process steps section

28. Reverend Danger

Reverend Danger - process steps section

29. Jan Ploch – Web and Graphic Designer

Jan Ploch - process steps section

30. Janko at Warp Speed

Janko at Warp Speed - process steps section

31. Ryan Coughlin – Web Designer and Developer

Ryan Coughlin - process steps section

32. Sendoushi

Sendoushi - process steps section

33. FortySeven  Media

Forty Seven Media - process steps section

34. Work by Simon

Work by Simon - process steps section

35. Rise Strategy

Rise Strategy - process steps section

36. Pointless Corp

Pointless Corp - process steps section

37. Tympanus

tympanus - process steps section

(rb)


Web Worker’s Library: Awesome Printed Web Design and Development Books


  

There’s no doubt that eBook devices such as the Kindle and the Nook have changed how people read books forever. At the start of 2011 Amazon reported that for the first time eBook sales exceeded paperbacks. It’s doubtful this trend will ever be reversed.

Though with E ink devices, image heavy books tend to not work well (anyone who has tried viewing a PDF on an eBook will testify to this). This may change in 2012 with the rise of tablet devices, but for now printed books are still in demand. For instance, many web workers prefer to read web design and development books in printed form.

In this article we will look at 25 printed web design and development books that we think you will find useful. Many of these books are also available in digital form and the prices of which have been denoted where applicable.

Design

1. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement
Print: $22

One of the most popular books available on Progressive Enhancement. It focuses on progressive enhancement with markup, CSS, javascript and accessibility.

Adaptive Web Design

2. Mobile First & Responsive Web Design Bundle
Print: $30, Ebook: $15, Print/Ebook Bundle: $38

A good bundle from A Book Apart. Luke Wroblewski’s Mobile First provides a strategic guide to mobile design whilst Ethan Marcotte’s Responsive Web Design focuses on designing for mobile browsers, netbooks and tablets.

Mobile First & Responsive Web Design Bundle

3. The Smashing Books Bundle
Print: $49.80 , Ebook: $24.90, Print/Ebook Bundle: $69.70

Smashing Magazine have produced a beautiful series of books on web design. Smashing Book #3 is available for pre-order now, and set for release at the end of April 2012. So at the moment the best deal is the Smashing Books Bundle which contains Smashing Book #1 and #2.

The first book focuses on usability, color theory and main rules for web design, whilst the second book provides more practical advice and tips on building mobile apps and e-commerce websites.

The Smashing Books Bundle

4. Photography For The Web
Print: $34.95, Ebook: $29.95, Print/Ebook Bundle: $39.90

A digital photography book that teaches you how to take photographs specifically for the internet. It covers using light effectively, displaying and sharing your photos online, software tips to help enhance your images, and much more.

Photography For The Web

5. The Adobe Photoshop Layers Book
Print: $26.23

A whole book that is dedicated to understanding Photoshop layers. Masking, isolation, layer effects, styles and composite images are all covered in this useful book.

The Adobe Photoshop Layers Book

6. Don’t Make Me Think: A Common Sense Approach to Web Usability
Print: $22.22

With over 100,000 copies sold, Steve Krugs ‘Don’t Make Me Think’ is one of the most popular and entertaining books on web usability. Covers designing billboards, navigation, usability testing and much more.

Don't Make Me Think

7. The Web Designer’s Idea Book, Vol. 2
Print: $19.80

One of the most inspirational web design books available. Patrick McNeil looks at the basic principles of design and showcases over 650 websites. Sites are divided by type (e.g. ecommerce, directory etc), style (minimal, illustrated etc) and by structural elements (buttons, tabs etc).

The Web Designer's Idea Book, Vol. 2

8. 100 Things Every Designer Needs to Know About People
Print: $17.99

A book that looks at the psychology of design. Author Susan Weinschenk helps you see design from a non-designers point of view and looks into what people see, think and read. It also looks at how people focus their attention and are motivated.

100 Things Every Designer Needs to Know About People

9. The Little Black Book of Design
Print: $9.99

The design field’s ‘Art of War’, The Little Black Book of Design has inspired thousands of designers with short useful tips such as ‘Always ask why’ and ‘You built it, so natrually you understand it. Will the user?’.

The Little Black Book of Design

Coding

10. Learning PHP, MySQL, and JavaScript: A Step-By-Step Guide to Creating Dynamic Websites
Print: $23.99

A great book for those who want to learn how to create database driven websites using PHP, MySQL and JavaScript. Perfect for those who want to know more about the backend.

Learning PHP, MySQL, and JavaScript

11. Effortless E-Commerce with PHP and MySQL
Print: $23.09

Another PHP and MySQL book though this one focuses specifically on ecommerce. It covers structure and design, security, user accounts, creating a catalog, the checkout and administration.

Effortless E-Commerce with PHP and MySQL

12. Murach’s PHP and MySQL
Print: $34.34

With 24 chapters spanned over a whopping 840 pages, Joel Murachs book is a great book for beginners and advanced developers alike. A good choice for anyone looking for a PHP/MySQL reference.

Murach's PHP and MySQL

13. JavaScript & Jquery: The Missing Manual
Print: $23.99

Features an introduction to Javascript, Ajax and jQuery and includes lots of examples of how these languages can be used online to build forms and connect to services such as Google Maps.

JavaScript & Jquery: The Missing Manual

14. PHP Solutions: Dynamic Web Design Made Easy
Print: $26.99

A good introduction to PHP and the MySQL databases. PHP Solutions features a lot of practical examples of using PHP such as generating images, creating online galleries and managing databases.

PHP Solutions: Dynamic Web Design Made Easy

CSS & HTML

15. The CSS3 Anthology
Print: $39, Ebook: $17 , Print/Ebook Bundle: $34 (Promotion)

A great CSS resource that addresses common problems of text styling, navigation, cross browser techniques and more. The CSS3 Anthology is uniquely set up in a question and answer format to make it easy to find solutions to common CSS problems.

The CSS3 Anthology

16. HTML5 & CSS3 For Web Designers Bundle
Print: $30, Ebook: $15 , Print/Ebook Bundle: $38

Another good combo from A Book Apart. Jeremy Keith’s HTML5 for Web Designers summarises the 900 page HTML5 spec into a more concise 85 pages. Dan Cederholm’s CSS3 for Web Designers explains gradients, shadows, rounded corners and other CSS3 goodies.

HTML5 & CSS3 For Web Designers Bundle

17. CSS Pocket Reference
Print: $8.86

Whilst CSS is easy to understand, it’s very easy to forget the vast number of CSS selectors and properties available. The CSS Pocket Reference is a useful companion for any designer who wants a quick answer to a problem.

CSS Pocket Reference

18. Sergey’s HTML5 & CSS3: Quick Reference
Print: $46.14

Another good reference book that covers HTML5 and CSS3 topics such as HTML5 Elements, Web 2.0 Forms, HTML5 APIs, browser compatibility and more.

Sergey's HTML5 & CSS3: Quick Reference

19. Introducing HTML5
Print: $20.99

Introducing HTML5 gives a good introduction to the possibilities of HTML5. Lots of practical examples are given such as applying the most important JavaScript APIs, how to build web forms, and more.

Introducing HTML5

Drupal

20. Drupal User’s Guide: Building and Administering a Successful Drupal-Powered Web Site
Print: $23.17

Drupal developer Emma Jane Hogbin provides a step by step guide of how to use the Drupal content management system in this comprehensive user guide. It covers basic Drupal functions up to advanced topics such as designed for Drupal, accessibility and search engine optimisation.

Drupal User's Guide

WordPress

21. Professional WordPress Plugin Development
Print: $24.44

A practical approach to learning how to develop WordPress plugins. The book walks you through how to create a plugin file, using hooks, and much more. Code examples are given to help you understand what you need to do.

Professional WordPress Plugin Development

22. Smashing WordPress: Beyond the Blog
Print: $24.34

A great book from Thord Daniel Hedengren that helps you understand code concepts such as post types, child themes, the functions.php file and much more.

Smashing WordPress: Beyond the Blog

23. Build Your Own Wicked WordPress Themes
Print: $39.95, Ebook: $29.95 , Print/Ebook Bundle: $49.90

Written by 4 experienced WordPress theme developers, Build Your Own Wicked WordPress Themes shows you how you can build, promote and sell professional designs using the Thematic framework.

Build Your Own Wicked WordPress Themes

24. The WordPress Anthology
Print: $39.95, Ebook: $29.95 , Print/Ebook Bundle: $44.95

A good WordPress guide for beginner to intermediate users. The WordPress Anthology covers subjects such as the WP loop, post type, taxonomies and the WordPress API.

The WordPress Anthology

25. Digging Into WordPress
Print/Ebook Bundle: $75, Ebook: $27

Arguably the best WordPress reference available, Digging Into WordPress has over 400 pages of content. It’s how the WordPress codex should have been written!

Digging Into WordPress

With all the great web design and development books out there it’s difficult to get them all into this list. So leave a comment if your favourite design or development book was left out and tell us why it’s your fav.

(rb)


Is Your Website Ready for Pinterest?

Get People to Pin Your Site

Encourage people to pin your site by adding Pinterest buttons to make it easy.

Whether you’re blogging or building a business, chances are you’ve heard about Pinterest. Are you already using the up-and-coming social bookmarking site? A lot of people are, and early adopters are proving the site can be a powerful tool for businesses that want to build their brand online.

Even if you’re not sure that your business needs a Pinterest profile, it’s a smart idea to make sure that your website is ready for Pinterest. After all, Pinterest users are busy pinning favorites all over the web! The easier you make it to pin your site, the more likely you are to get pinned.

So, how do you get your website ready for Pinterest? Follow these steps to make your site easy to pin.

continue reading Is Your Website Ready for Pinterest?


© Barbara Holbrook for Tutorial Blog | 10 comments | Add to del.icio.us

Is Your Website Ready for Pinterest? is a post from: Tutorial Blog


Symptoms Of An Epidemic: Web Design Trends


  

Since Elliot Jay Stocks so poignantly told us to destroy the Web 2.0 look, we’ve witnessed a de-shinification of the Web, with fewer glass buttons, beveled edges, reflections, special-offer badges, vulgar gradients with vibrant colors and diagonal background patterns. The transformation has been welcomed with relief by all but the most hardened gloss-enthusiasts. However, design and aesthetics work in mysterious ways, and no sooner does one Web design trend leave us before another appears.

The Symptoms

So, exactly what is this new epidemic? Well, let’s start by looking at some of the most common symptoms, many of which you have probably noticed. They are easy to spot, and as with many other conditions, they often appear in conjunction with each other. (This is why the contagion spreads so effectively — seemingly independent symptoms grow more infectious when combined with others.)

Please note: The following list appears in no particular order and does not indicate the level of infectiousness or severity, which seem to be stable across the board. Note also that the instances given often exhibit more than one symptom, making classification more difficult.

Stitching

Stitching appears gradually, often as a result of the designer playing too long with borders and lines, particularly of the dotted variety. A full-blown stitch is evidenced by the subtle shift from dots to dashes, augmented by drop shadows and other effects to give the impression of 3-D. The purpose of the stitch is somewhat elusive, but it seems to thrive in environments where certain textures are applied, most notably fabric and leather, but also generic graininess.

While determining the exact cause of stitching is difficult, scientists are certain that it belongs to a larger strain of the infection known as “Skeuomorphism.�

Collage of interfaces with stiches
Clockwise from top: The Journal of Min Tran; Dribbble shot by Mason Yarnell; Dribbble shot by Liam McCabe.

Zigzag Borders

Borders are common elements of Web design, and as such, they are difficult to avoid; luckily, they are usually harmless and often have a positive effect on the layout. However, for some reason, a particular type of border — the zigzag — has grown exponentially in the last few years and is now threatening the natural habitat of more benign border specimens. Exactly why this is happening is unknown, although some researchers claim that the pattern created by the repeating opposing diagonals has such an alluring effect on designers and clients alike that straight borders have somewhat lost their appeal.

Collage of interfaces with zigzag borders
Clockwise from top: You Know Who; Dribbble shot by Christopher Paul; Dribbble shot by Meagan Fisher.

Forked Ribbons

Like borders, ribbons have long existed in various forms. What we’re seeing now, though, is the near dominance of a particular style of ribbon, easily identified by a fork at one or both ends. Some ribbons are also folded over twice, creating a faux effect of depth and reinforcing the diagonal lines in the fork. Whether the fork is related to the zigzag effect is unknown, but it seems that diagonal lines are the key to the ribbon’s survival, along with its ability to evoke memories of times past.

The danger of the ribbon lies mainly in its ability to exist independent of other symptoms (although it thrives in the company of vintage typography), meaning that it could date your design long after the epidemic ends, even if the symptom itself appears dormant. In many ways, this is reminiscent of the “special offers� badge of the Web 2.0 look.

Collage of interfaces using forked ribbons
Clockwise from top: Ryan O’Rourke; Cabedge; Jake Przespo

Textures

In the age of all things digital, it’s a conundrum that textures should dominate our illustrations and backgrounds, and yet they are indeed one of the most common symptoms on our list. Manifested by subtle grain, dirt and scratches, paper-esque surfaces and fold marks, they seem to embrace the spirit of the handmade. But ironically, they’re often the complete opposite: computer-generated effects or Photoshop brushes.

Possible explanations for the widespread use of textures include a yearning for tactile media (especially considering the emergence of touchscreens) or envy towards print designers, who have a much richer palette of materials and surfaces to play with.

Collage of interfaces with textures
Clockwise from top: Gerren Lamson; Zero; Amazee Labs.

Letterpress

A Smashing Magazine article from 2009 outlined letterpress as one of the emerging trends of the year and, boy, were they right. The simple effect has gone from strength to strength and is now a household technique for sprucing up typography online. A relatively harmless symptom, letterpress might also have infected designers through other digital interfaces, such as operating systems and games, as early as the turn of the millennium, indicating a very long incubation period.

Scientists disagree over whether the incubation period is due to the infection needing a critical mass before emerging from dormancy or whether the infection simply needed the right conditions — CSS3 text shadows, to be specific — for symptoms to appear.

Collage of interfaces with letterpress
Clockwise from top: Billy Tamplin; Dribbble shot by Phillip Marriot; Remix.

19th-Century Illustration

After being released from copyright quarantine, this symptom, favoured by fashionable ladies and gentlemen, was nearly eliminated during the last epidemic due to its inability to cope well with gloss and shine. But in this new vintage-friendly environment, it has found its way back into our visual repertoire. For better or worse, the 19th-century illustration will most likely hang around for a while, emerging stronger from time to time like a flu virus.

Collage of interfaces with 19th century illustrations
Clockwise from top: Killian Muster; Dribbble shot by Trent Walton; Simon Collison.

Muted Tones

After a long period of vibrancy, the average online color scheme seems to have been somewhat desaturated across the board. We’re seeing widespread use of browns, earthy greens and mustards and a general leaning towards “impure� colors, although this is generally thought to be a minor symptom of the epidemic. Some scientists will even argue that muted tones are, in fact, not a symptom themselves but rather a side effect of other symptoms, in the way that sweating is a natural response to a fever.

Collage of interfaces with muted colours
Clockwise from top: Dribble shot by Dave Ruiz; Cognition; Web Standards Sherpa.

Justified or Centered Typography (JCT)

This symptom is nothing new; in fact, it was pretty much the standard for the first 500 years of typography, until Tschichold and the New Typography showed up and quarantined it on the grounds that it was old fashioned, difficult to read and inefficient. Although we’re not sure at this point, this link with history might be what has made JCT reappear so vigorously under the umbrella of vintage symptoms. We do know that overall reading habits among humans have not changed in recent years (most Westerners still read left to right), and there is no plausible argument that JCT improves legibility; so, whatever the cause of the outbreak, we know it’s rooted in subjective emotion rather than rational thought.

Collage of interfaces with justified or centered typography
Clockwise from top: Grip Limited; Tommy; Visual Republic.

Circular Script Logotypes (SCL)

A circle is a basic shape and, in isolation, is no more a symptom of an epidemic than a triangle. However, if you repeat enough triangles in a line, you get a zigzag. Similarly, if you include a circle in your logotype, you end up with a circular logotype. And if that logotype happens to be set in a script font, you’ll get — that’s right! — a Circular Script Logotype (SCL). Not that SCL is lethal or anything, but it is relatively contagious and can be highly detrimental when enough hosts have been infected.

Collage of circular script logos
Clockwise from top: Trent Walton; Mercy; Dribbble shot by James Seymor-Lock.

Skeuomorphic Features

Skeuomorphic features — i.e. ornamentation or design features on an object that are copied from the object’s form in another medium — are rife, particularly in mobile applications, and this symptom is one of the defining indicators of the epidemic. Possibly a mutant cancerous strain of mildly skeuomorphic features such as stitches and letterpress, it can sometimes grow to overtake an entire interface, bloating it with redundant visual references to physical objects and materials. However, due to the labor involved in preparing the graphics and the heavy reliance on image resources, some researchers argue that we’re unlikely to see full-blown skeuomorphism dominate our desktop browsers any time soon.

In fact, most scientists regard the phenomenon as a curiosity and predict that some virtual metaphors for physical attributes will prove useful (as tabs have) and some won’t. Interestingly, while Apple has embraced and continues to pioneer the technique, Google seems to some degree to resist the urge to mimic physical reality in its interfaces. Perhaps it has developed a vaccine?

Collage of skeuomorphic interface elements
Clockwise from top: iBooks; Dribbble shot by skorky; Dribbble shot by Igor Shkarin.

How Did It Start?

Pinpointing the epicentre of a design epidemic (read: trend) is always hard, especially given the myriad of symptoms and the contagious nature of the Internet. Identifying Patient Zero is virtually impossible, and, to be pragmatic, doing so would serve no purpose. What we can say is that we’re most likely experiencing a reaction to the Web 2.0 aesthetic — a craving for textured surfaces and retro imagery, something tactile and natural-looking, as an antidote to the shiny impersonality of the past — and that this is both healthy and necessary for pushing the design industry forward. Whatever the sources of trends, they often start with applying smart design to solve a particular problem or, indeed, to counter another trend.

Let’s say that everyone used sans-serif fonts, strong contrasting colors and crisp white backgrounds as a rule. Imagine, in this environment, if a designer went against the grain by using Clarendon or some other warm serif to infuse some personality into their website (which happens to be selling “Grandma’s homemade jam�), and then complemented the personality of their font selection with earthy colors and some brown paper textures. The result would inevitably stand out from the crowd: beautiful, emotional, different.

Incidentally, this aesthetic inspires another designer who happens to be working on a website with a global audience, exposing the new approach to a whole generation of designers who, in turn, apply it at will (often without considering the context). A trend is born. And yet, paradoxically, the potency of the epidemic is under constant threat. The more people get infected, the less differentiated the symptoms appear; and once the infection reaches a critical mass, the symptoms begin to work against themselves. Infusing personality into your visuals is meaningless if everything looks the same.

Is It Dangerous?

In today’s open collaborative world, avoiding an epidemic of this scale is difficult; so, in a sense, everyone is affected to some degree. The symptoms listed above are not restricted to small-scale up-and-coming designers, but affect even the elite of the design community. This means that even though some symptoms are harmless — like a light fever or a runny nose from a flu infection — the viral onslaught of trendy features puts constant pressure on our immune system to protect our creativity, and staying vigilant is important to maintaining a healthy dose of original thought.

If you’re displaying a handful of symptoms, it’s really nothing to worry about — catching a cold that’s going around is not hard, but recovering from it is also easy. If, on the other hand, you display most or all of these symptoms, then there’s reason to be extra cautious in your next project. Using all of a trend’s identifiers as cornerstones of your work might make your portfolio look oh so contemporary, but in a way this practice is no different than passing off the work of your favorite designer, artist or musician as your own. Granted, symptoms with no identifiable origin are not protected by copyright, but that’s beside the point — you should be worried not about legal implications, but rather about the creative integrity of your output. The danger is not only that your work will be seen as a passing fad, a popular aesthetic that will look dated in a couple of years’ time, but that you will lose the respect of your peers when they catch on to you.

While nothing is original, we all need to respect the difference between inspiration and imitation. As Jean Luc Goddard said, “It’s not where you take things from — it’s where you take them to.â€� And if you don’t take them anywhere, what’s the point?

Worse perhaps than the loss of respect and integrity is the effect that epidemics have on clients and, in turn, the design community as a whole. The more designers are infected and the more symptoms they show of the same disease, the less your clients will believe that you’re capable of solving real business problems. Eventually they’ll exclude you from the early stages (where all the real design thinking takes place) and employ your services merely to skin their wireframes, in the process reducing the whole profession to an army of decorators.

What Can You Do About It?

Now that we’ve seen how detrimental trends can be, how does one avoid them? Is this even possible? Trends, by definition, are popular, and arguably nothing is wrong with tapping into that popularity to increase the exposure of your product. Convincing a client to accept a design that is off-trend can be difficult, and you run the risk of alienating the audience by going completely against the trend just for the sake of it. On the other hand, blindly following others is never a good idea, and you could severely stifle your creativity, integrity and client base by accepting what’s “in� as a given and copying it without purpose.

So, what’s the right thing to do? Trends are intrinsic to our society, whether in politics, culture, design or even religion, and as the consensus sways in one direction or another, so will your opinion (or “tasteâ€�) — to some degree, at least. Alas, avoiding trends altogether seems an impossible and pointless undertaking, but that doesn’t leave you powerless. In fact, you can do a host of things to combat the lemming syndrome.

Ask Why

Always question your design decisions (and make sure they are your own), and keep asking the magic question, Why am I doing this? Am I doing this simply because it looks cool or because it suits the message I’m trying to communicate? Why am I using this ribbon? Does the zigzag border add to or detract from the personality of the website? What does this leather texture have to do with the finance app I’m designing? The moment you stop asking questions, you fall prey to the epidemic.

Put Some Effort In

In his article “The Dying Art of Designâ€� Francisco Inchauste asserts, among other things, that inspiration requires perspiration, and I couldn’t agree more. I was lucky enough to attend a college where no computers were allowed in the first year, which meant we had to use physical tools to express ourselves — tracing letters by hand, drawing our photography, stocking up on Pantone pens (remember those?), abusing the copier. Not only did our creativity grow, but we learned an important lesson: good design is not effortless, and the best results come from your own experimentation.

Try Something Different

Remember that being distinctive is, for the most part, a good thing. Most great artists in history, regardless of their field, stood out enough for the world to take notice. Who painted melting clocks before Dali? Who would have thought to build a huge wall on stage before Pink Floyd? While mimicking what’s popular might be comfortable and might secure short-term victories, long-term success requires a unique, memorable approach.

Diversify Your Inspiration

In order to remain creative, staying curious and looking for inspiration all around you is crucial, not just in the latest showcase of fashionable WordPress themes. Read a book, perform a scientific experiment, listen to music you haven’t heard before, walk through a new neighborhood, or experience a foreign culture. Widening your horizons beyond your favorite websites and finding more than one source of inspiration is critical to making original, lasting designs.

Focus on the Basics

Finally and most importantly, study the underlying principles of design in order to understand what is and isn’t defined by style. Grid systems, contrast, legibility, juxtaposing imagery, well-written copy — these are the key components of successful design, yet they are entirely independent of fads and styles.

At the end of the day, design is not so much about style as it is about communication, and all style, imagery and typography should be inspired by the content, functionality and personality of the product, not by what simply looks cool at the moment.

No matter how cool something looks, it too shall pass.

(al) (fi)


© Espen Brunborg for Smashing Magazine, 2012.


Photoshop Tutorial: Create a Semi-Realistic MacBook Pro from Scratch


  

In the following Photoshop tutorial you will learn how to create a semi-realistic MacBook Pro from scratch. First, you will learn how to use the grid and the snap to grid for an easier workflow. We’ll start with some simple vector shapes and several warp techniques along with a bunch of basic tools. Next, we’ll add some color using the Layer Style properties. Finally, we’ll use Layer Masks, Clipping Masks and some discrete Noise to add the final touches for your illustration.

Final Image

This is the image that we’ll end up with by completing this Photoshop tutorial:

Step 1

Open Photoshop and hit Control + N to create a new document. Enter all the data shown in the following image and click OK. Next, enable the Grid (View > Show > Grid) and the Snap to Grid (View > Snap To > Grid). For the moment you need a grid every 2.5px. Go to Edit > Preferences > Guides, Grid & Slices and focus on the Grid section. Enter 2.5 in the Gridline Every box and 1 in the Subdivision box.

Also, set the grid color at white (#ffffff). Once you set all these properties click OK. You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes.

Step 2

Set the foreground color at #006d33, pick the Rectangle Tool and create a 920 by 15px shape. Make sure that this new shape is selected and switch to the Direct Selection Tool. Select the bottom, left anchor point and move it 50px to the right then select the bottom, right anchor point and move it 50px to the left. In the end your shape should look like it does in the second image.

Step 3

Reselect the shape created in the previous step and go to Edit > Transform Path > Warp. Select Arc Upper from the Warp menu, check the Orientation button, enter 70% in the Bend box and hit Enter. Make sure that this green shape is still selected and go again to Edit > Transform Path > Warp. This time select Bulge from the Warp menu, check the Orientation button, enter 60% in the Bend box and hit Enter.

Step 4

Set the foreground color to #fed700, pick the Rectangle Tool, create a 920 by 25px shape and place it as shown in the following image.

Step 5

Set the foreground color to #9f0b0b, pick the Rectangle Tool, create a 907.5 by 2.5px shape and place it as shown in the following image.

Step 6

Set the foreground color to #00bff3, pick the Rectangle Tool, create a 920 by 7.5px shape and place it as shown in the following image.

Step 7

Set the foreground color to #ec008c, pick the Rectangle Tool, create a 920 by 12.5px shape and place it as shown in the first image. Make sure that this new shape is selected and switch to the Direct Selection Tool. Select the top, left anchor point and move it 45px to the right then select the top, right anchor point and move it 45px to the left. In the end your shape should look like as it does in the second image.

Step 8

Reselect the shape created in the previous step and go to Edit > Transform Path > Warp. Select Arc Lower from the Warp menu, check the Orientation button, enter 80% in the Bend box and hit Enter. Make sure that this pink shape is still selected and go again to Edit > Transform Path > Warp. This time select Bulge from the Warp menu, check the Orientation button, enter 50% in the Bend box and hit Enter.

Step 9

Focus on the Layers panel and double click on the green shape created and edited in the first steps. This will open the Layer Style window. Check the Inner Shadow and the Gradient Overlay then enter the properties shown in the following images.



Step 10

Keep focusing on the Layers panel, find the shape edited in the previous step, right click on it and click on Convert to Smart Object. Make sure that this new smart object is selected and go to Filter > Noise > Add Noise. Enter the properties shown below and click OK.

Step 11

Move to the yellow shape and open the Layer Style window. Enter the properties shown in the following images and click OK. Make sure that you save the gradient when you get to the Gradient Overlay section. Just click on the New button and pick a name for your gradient and click OK. You can find your newly saved gradient in the Presets window.



Step 12

Move to the Layers panel and convert the shape edited in the previous step to a smart object. Select it and go to Filter > Noise > Add Noise. Enter the properties shown below and click OK.

Step 13

Reselect the thin, red shape created in the fifth step and replace the red with #231f20. Move to the blue shape and open the Layer Style window. Enter the properties shown in the following images and click OK. Pick the gradient saved in the eleventh step when you get to the Gradient Overlay section.



Step 14

Convert the second shape edited in the previous step to a smart object. Select it and go to Filter > Noise > Add Noise. Enter the properties shown below and click OK.

More on Page Two

We are about halfway through the tutorial, but there is still work to be done. The rest of the steps in this tutorial are waiting for you over on page two.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress