BlogmyQuery – BMQ

In this tutorial we will be showing you step-by-step how to create a photo realistic illustration of Apples latest crowning achievement, the beautiful and inconceivably thin new MacBook Air.

The finished result

Step 1

We start off, with a new document; its size set to 1000 x 750 pixels, an increased resolution of 120 pixels and a white background which we’ll delete later for a transparent background.  First off, switch the foreground colour to #eff0f2. Now, select the Rounded Rectangle tool (U) and on the tool’s Options bar, set the rectangle’s radius to 20 px and click on the little square icon “Fill Pixel” to automatically fill the shape to be drawn. Draw a rectangular shape and name the layer ‘Panel.’

Step 2

Double-click on this layer to add Layer Styles to the shape. Select the Gradient Layer style and adjust the Gradient’s Color Stops and other parameters as shown below:

Follow up with an Inner Glow Layer style and make the necessary adjustments as shown below:

The Layer styles result for a reflected effect.

Step 3

Create a new layer under the previous layer and draw another rounded rectangle just slightly larger than the first. Also have the shape’s radius set to 22 px.

Step 4

With the Burn Tool (O) selected and its Exposure set at about 50%, darken selected edges of just the second rectangle.

The burn result:

Step 5

Being on the ‘Panel’ layer, select the Rectangular Marquee Tool (M), and make a selection across the rectangle and hit the Delete key to clear the selection.

Press Ctrl+D to ‘deselect.’

Step 6

Back to the second rectangle, add an Outer Glow Layer style.

The result has the edges of the panel defined.

Step 7

The panel appears too smooth here, we must add a subtle touch of grain to it by applying a Noise Filter effect (Filter > Noise > Add Noise).

Step 8

In a new layer, draw a rectangle for the screen and fill with the colour #828384. I also enabled the Guides (Ctrl+’) to aid my positioning of the screen.

Add a Stroke Layer style to it. Afterwards, add a Guassian blur with a raduis of 1.5 pixels to the rectangle. It softens the Stroke effect a bit which previously was too sharp. This will form the backdrop upon which the main screen will be placed later.

Step 9

For the flat base of the Macbook, select the Pen Tool (P) and click with the tool to create these Anchor points as shown below.  You may also use the direction keys on your keyboard to conveniently adjust the positioning of selected points.

Step 10

For a little gloss for the base of the laptop, add an Inner Glow, Inner Shadow and Gradient Overlay Layer styles with the settings below:

The result:

Step 11

Draw a 2 px rounded rectangle right on top of the base to form something of the rim on the base. Burn its edges sparingly on both its ends.

The new outlook of the base:

Step 12

Add a soft shading to the rim applying an Inner Shadow Layer style with a reduced opacity of 45%.

Step 13

Pick the Pen Tool yet again and map out an outline shown below. This is to form a shallow inward curvature on the base of the Macbook.

Step 14

Fill the outline by right-clicking within it and selecting ‘Color.’

Step 15

Apply both a Gradient Overlay and Inner Shadow styles to create a resulting appearance of an inward curve,

Step 16

For th hinges of the Macbook, use the Rectangle Tool to draw a flat rectangle and then fill with a white colour.

Step 17

Set up both Gradient Overlay and Inner Shadow Layer styles for the hinges with the parameters below:

Step 18

Saving time drawing a second hinge, just press Ctrl+J to duplicate the ‘Hinges’ layer and position the hinge copy to the right of the Macbook.

Step 19

With a rounded rectangle set at 2px, draw an opening or slot on the right of the Macbook and fill with a black or if your Tool’s shape has “Fill Pixels” set on its Options bar, just hit ‘D’ on the keyboard to set the foreground colour to black before drawing.

Step 20

Select the Type Tool (T) and bring up the Character Panel (Window > Character) to make other adjustments not available on the Type Tool’s Options bar. Set the Font to Verdana ts size to18 pt and color to #4b4b4b. Also use the scaling options to scale vertically and horizontally at 41% and 31% respectively. You’ll get something almost close to the real thing.

Step 21

For the web cam, use the Ellipse Tool to create a small circle holding Shift to constrain its portions and fill with black. Add a soft glow around it with an Outer Glow Layer style.

Step 22

Follow up in a new layer, with two other small round points. Of course, adding an Outer Glow Layer style as well.

Step 23

For a nice and shiny screen complete with abstract graphics, we will creating create something intricate. Select the Rectangular Marquee Tool and make a selection and then pick the Gradient Tool (G) and change the Color Stops of the Gradient. Make a diagonal sweep across the selection with the Gradient Tool.

Note: place or resize the screen within the grey rectangle in a way a thin margin is formed around the screen.

Step 24

For other elements within the screen, use Polygonal Lasso Tool (L) to create the shapes below. You can on the Tool’s Options bar, select “Add to selection” to create multiple selections. Fill the selection(s) with the colour #e2eef2 using the Paint Bucket Tool (press Shift+G if not already selected). Ctrl+D to deselect afterwards.

Step 25

On the Layer Palette, reduce the opacity of this layer to about 70%. Proceed to add a Layer Mask by clicking on the third icon from the left at the bottom of the palette. Fade the shapes with a black soft brush. You’ll also have to vary the brush’s opacity when fading certain areas of the shape.

Step 26

With the Elliptical Marquee Tool (Shift+M if not already selected), create a flat ellipse selection. Fill with #e2eef2 and on the Layers Palette, set the layer’s Blend mode to Soft Light and Opacity to about 38%. Create another Layer Mask and with a brush (Opacity; 25%) fade the base
of the ellipse.

Step 27

Create two other ellipses in a similar fashion as the previous steps. Again, use the Polygonal Lasso Tool to create another shape and then fill. Right-click and select Transform Selection and then select the Warp Transform Tool to make a curve on one side of the selection.

Step 28

Hit Enter when through and of course, set the layer’s Blend mode to Soft Light and reduce its Opacity to about 85% and add a Layer Mask to make the necessary adjustments.

Step 29

As always, create a triangular selection with the Polygonal Lasso Tool and fill with the usual colour.

Step 30

For a curve, Use the Warp Tool in Free Transform mode.

Step 31

Change the layer’s Blend mode to Soft Light and Opacity to about 58%.

Step 32

The Polygonal Lasso Tool for another shape - you should know the drill by now; fill, warp and deselect!

Step 33

The layer’s Blend mode here is set to Soft Light definitely and its, Opacity reduced to about 62% as you see fit. You might as well create group your shapes for organization and reducing excessive scrolling within the Layers Palette. Select the little folder icon at the bottom of the palette and drag your shape layers into it and collapse it.

Step 34

Select the ‘Screen’ layer and add the Layer styles, Inner Shadow and Outer Glow making the following adjustments below:

Step 35

As an option, you may download one of the numerous Mac OSX icon set for windows. These images were in JPEG format and were edited in a separate window and moved to the working document. Like I said, you may skip this step as its okay for the ‘Air’ to be clutter free.

Step 36

Create a new layer, ‘Shadow,’ below all other layers and with the Ellipse Tool, draw a very flat ellipse.

Step 37

Go to Filter > Blur > Gaussian Blur and set the Blur Radius to 3.5pixels.

Step 38

Draw a rounded rectangle and Press Ctrl+T to enter Free Transform mode and select the Distort Tool and splay the shape outwards. B. Add a Layer Mask and with its thumbnail selected, use a Gradient Tool (black to white) to draw  a vertical gradient.

There you have it, a slick and realistic Macbook Air to say the least.

A Macbook image without the dock. This might be the ideal icon; though it all boils down to your preference eventually.

Also delete the background layer for a transparent layer.

Here’s a rather bland but clean Macbook Air icon.

Downloads

Photoshop PSD file
png files

As most of you may already know, Noupe is a subsidiary of Smashing Magazine. For those of you who don’t, we offer books on the best practices in modern Web Design. Our books share technical as well as practical tips on coding, usability, optimization, typography and much more!

Is the Book Really Coming?

What’s the best way to start a new year? Not just with resolutions and good intentions, but with good deeds! Therefore, today we have the pleasure of announcing that a new Smashing Book is on its way. And not only that: it’s not just a book but an annual event.

In all honesty, the Smashing Book 1 could have been better in several ways: the overly long shipping times and poor quality of the binding were critical mistakes we made with that first book. But we did our homework and learned from our mistakes. We wanted to make the Smashing Book 2 better than its predecessor in every respect: the hardcover book will cost $29.90 USD (like the first one), but it will have more pages and much better binding and will be more comprehensive and of higher quality.

As you read this, the Smashing Book 2 is already in the final stage of production: printing started in late December. This means we will start shipping the books by February at the latest, and the pre-order period will be much shorter than the one with Smashing Book 1. You can pre-order your copy today and get a huge discount: 20% off the regular price.

What’s in the Book?

Like its predecessor, the Smashing Book 2 is a printed book about best practices in modern Web design. This book shares valuable practical insight into design, usability and coding. It provides professional advice for designing mobile applications and building successful e-commerce websites, and it explains common coding mistakes and how to avoid them.

You’ll explore the principles of professional design thinking and graphic design and learn how to apply psychology and game theory to create engaging user experiences. We also feature interviews from experts on the future of Web typography and describe how you can publish a book on your own.

Well-respected professionals have worked with us to provide exciting and comprehensive chapters:

• “The Principles of Great Graphic Design,â€� Matt Ward and Alexander Charchar,
• “Visible vs. Invisible Design,â€� Francisco Inchauste,
• “Designing Mobile User Experiences,â€� Mike Rundle,
• “Sketching, Wireframing and Prototyping,â€� Janko Jovanovic,
• “Red Flags in Web Development,â€� Christian Heilmann,
• “The Future of Web Typography,â€� Vivien Anayian,
• “Game Design Techniques Applied to UX Design,â€� Christoph Kolb,
• “When They Click: Psychology of Web Design,â€� Susan Weinschenk,
• “Design Patterns on E-Commerce Websites (A Study),â€� Steven Bradley,
• “How to Make a Book (Like This One),â€� The Smashing Magazine Team.

Free Sample (PDF)

You will find more information below, and you can read a sample chapter — “Visible vs. Invisible Design� (PDF, 5.6 MB) by Francisco Inchauste — for free.

Exclusive Artwork for the Book

The Smashing Book 2 features exclusive full-page illustrations for each chapter. And here we’ve got something special for you. The illustrations were created by the talented Australian illustrator and our dear friend Yiying Lu, who is well known as the designer of Twitter’s famous “Fail Whale.â€� She has designed an exclusive new series called “Smashing Animalsâ€� for this book, and (by the way) you can purchase it as wall art on Yiying’s website.

Yiying lovingly cares for her cat on the wall. You can see this illustration in the chapter “Visible vs. Invisible Design,� written by Francisco Inchauste.

Names of Our Readers in the Book

In November 2010, our readers and fans had the opportunity to add their names to the book. We sorted all of the participants alphabetically and created an exclusive double-page feature on pages 6 and 7. Overall, 2970 names form the “S� in Smashing — ASCII art at its best.

The Smashing Book 2 is Available Only in the Smashing Shop… and Nowhere Else

The Smashing Book 2 will be a hardcover book with quality stitched binding, 360 pages and a bit larger of a size than its predecessor. The price is again just $29.90, but there is more. We want to make the book affordable to everyone, so Smashing Magazine will pay a large part of the shipping costs and ship the books at a fixed price of $3.50/€3.50 per copy, no matter where you live in the world.

And it gets even better: books will be sent only via air mail (except within Germany). The delivery will take between 3 and 15 working days at most (you can check delivery times for your country). The books will be shipped from Berlin, Germany. And of course, if you are not satisfied or have questions, there is a 100-day money-back guarantee and a live chat in our recently redesigned Smashing Shop.

But That’s Not All, Right?

Right! Initially, the book was supposed to contain more chapters, but because most of our contributors delivered (much) more content than the book’s size could accommodate, we couldn’t include them all. (We could have added more pages, but then shipping costs would have increased significantly.) So, we will release four chapters as a free bonus eBook, called “The Lost Files.â€� This eBook will be available in PDF, ePUB and Mobipocket formats. In February, every registered customer will be able to download the book, even if they haven’t bought the Smashing Book 2. So, make sure to check out the Smashing Shop in February.

Here are the pieces that will be presented in the free bonus eBook:

• “The Ultimate Web Design Questionnaire and Checklist,â€� Kat Neville,
• “Plagues in Web Design and How to Deal With Them,â€� Speider Schneider,
• “Interviews: Expert Tips From Renowned Designers,â€� Steven Snell,
• “Web Design Community: Where Are We Going?,â€� Paul Scrivens (Drawar).

Features of the Book

If you pre-order the Smashing Book 2 now, you will get a huge discount: 20% off the regular price. You’ll pay just $23.90 USD and will get:

• A solid printed hardcover book,
• Quality stitched binding with a bookmark,
• 360 pages with full-color images on coated paper,
• Worldwide availability,
• Reduced air mail shipping — just $3.50/€3.50 per copy,
• Risk-free purchase with a 100-day money-back guarantee,
• Free bonus eBook with four chapters,
• Pre-order your Smashing Book 2 now and save 20% off the regular price!

A Closer Look at the Book’s Chapters

The Principles of Good Graphic Design, Matt Ward and Alexander Charchar
This chapter looks at some key concepts of graphic design as they relate to modern Web design. It looks at a number of the central elements and methodologies that drive the act of designing itself, and it discusses the sometimes subtle but always significant divide between the merely good and truly great.

This chapter is about: The meaning of graphic design. The difference between good and great design. Timeless design. Relational minimalism. Importance of contrast, space and tension. Typography. Visual voice.

Visible vs. Invisible Design, Francisco Inchauste
Basic principles and techniques of producing the visible layer of design in tools such as Photoshop are widely covered in books and online. Design is generally understood to be only what we see: a visual and primarily artistic medium of communication. However, the invisible part of design takes on several forms. When we design a website or application, we don’t (and shouldn’t) start from scratch. We start with certain patterns, and we need to understand their limitations in order to create effective solutions and experiences. Balancing invisible and visible designs enables us to create effective and meaningful interfaces for websites and applications.

This chapter is about: Seeing the invisible in design. Designing how users think. Mental models. Excise design. Design patterns and interface guidelines.

Designing Mobile User Experiences, Mike Rundle
The best apps work well, but building an app that looks good and works well isn’t easy. Designing a mobile app’s user experience is particularly challenging because it requires skill in a variety of disciplines: interaction design, graphic design, information architecture and ergonomics, to name a few. User experience design is a combination of disciplines, and so designing a fantastic mobile app calls for a combination of perspectives and skills.

This chapter is about: Building and selling apps. Peculiarities of mobile software. Principles of good app design. User interface design patterns for mobile apps. Visual design of mobile apps.

Sketching, Wireframing and Prototyping, Janko Jovanovic
Every design process starts with an idea. Many ideas, actually. The truth is, only a few of them prove to be good, and the others are just bad. Many people believe that they have an excellent idea and know the path to realizing it, yet most fail. And that’s not surprising, because having an idea is not enough. Knowing how to choose an idea, shape it and develop it is crucial to success. This chapter describes the process of moving from abstract ideas to concrete solutions and explains the workflow, tools and techniques available when designing websites and user interfaces.

This chapter is about: Design process. Ideation through sketching. Storyboards. Techniques and tools. Wireframing. Prototyping. Testing and refining.

Red Flags (Warning Signs) in Web Development, Christian Heilmann
We spend a big part of our lives working hard to clean up and maintain products, rather than building great things to make the lives of our users easier. That’s just the way it is. If your code is hard to clean up, then you’ll be eating up even more time in the already short development process. Discovering that the product you’re having trouble extending or fixing is your own from some time ago is all the more aggravating. That’s when you start thinking that something must have gone wrong along the way. Well, something has. A few things will make good solutions go bad and start to smell, and this chapter goes over them.

This chapter is about: Building for maintenance, not the moment. Why HTML and CSS code go bad. HTML painting and convoluted CSS syntax. Issues with JavaScript and back-end code.

The Future of Web Typography, Vivien Anayian
In the foreword to The Elements of Typographic Style, Robert Bringhurst points out that the underlying principles of typography are independent of any particular typesetting medium. Yet it is only after almost 20 painful years of setting type on the Web that designers can finally breathe better and apply the essential elements of style without compromising on detail or execution. Recent years have been pivotal in shaping the future of typography on the Web; what was unthinkable only a few years ago has become possible today, and it will get even better tomorrow.

This chapter is about: Evolution of Web typography. @font-face. WOFF. The open-source type movement. Font licensing. Web font services. Current problems in Web typography. Fonts Module and CSS3. Exclusive interviews.

Applying Game Design Principles to User Experience Design, Christoph Kolb
The ultimate goal of a business is simple: to engage as many people as possible in favorable interactions. These interactions could include buying a product, spreading the word, advertising or just generally becoming a fan. Such objectives clearly require us to explore paradigms and perspectives that go far beyond aesthetics and traditional user interaction. This is where game design theory comes in handy. We can apply game design to certain areas of interaction to create user experiences that engage people and bind them to the company. In this chapter, we will learn how to apply some of techniques and theory of game design to website design, user experience and business.

This chapter is about: Combining social psychology, game design theory and economics. Game mechanics: world, players and rules. Winning strategies for users and companies. Playbook and strategy for interaction designers. Game design techniques and real-life examples.

When They Click: Psychology of Web Design and User Behavior, Susan Weinschenk
From the chapter: “I’m a psychologist by training and education. This means that I consider design in the context of the mental model of the user. Whether the design is of software, a website, a medical device, online instructions or product packaging, I can’t help but see it from a psychologist’s point of view. I enjoy applying what psychology research tells us about how people think, learn, play and work to design challenges. I take research and insight into the brain, the visual system, memory and motivation and extrapolate design principles from them.�

This chapter is about: Different views on design. The importance of social interactions. Unconscious decision-making. Social validation. Goal-gradient effect. Using distractions to grab attention. “Satisficing.� Mental models. Error handling. Inattentional blindness.

Design Patterns in E-Commerce Websites (Study), Steven Bradley
Designers of e-commerce websites have to take into account many things that designers of informational websites don’t. How to design the check-out process? How will the website establish trust so that visitors are willing to hand over sensitive credit card data? Common design patterns have evolved over time, and this chapter explores how well e-commerce websites match up with theory and best practices. What’s the average number of check-out pages for an e-commerce website? Do certain patterns emerge from the data to show how different websites approach such issues? Shopping websites were chosen and surveyed each based on a set of elements in several categories.

This chapter is about: Layout. Information architecture. Navigation. Color. Product, check-out and shopping cart pages. Wording and design of call-to-action buttons. Contact and support pages. On-site marketing.

How to Make a Book (Like This One), The Smashing Editorial Team
Holding your very own book in your hands for the first time is a truly remarkable experience. You suddenly realize that you’ve given your ideas — ideas conceived in some abstract state in your mind — a certain shape, a physical reality, making them tangible, visible and enduring. The feeling is overwhelming: it fills your heart with pride, in the way that a painter admires their creation. The feeling has not been alien to those who have participated in book manufacturing over the centuries, and yet experiencing it has never been so affordable and accessible as it is now.

This chapter is about: Printing a book on your own or with a publishing house. Writing, editing and preparing the book for printing. Pricing, marketing and fulfillment. eBook production: PDF, ePUB, Mobipocket. Print on demand.

FAQ

Here are some frequently asked questions and answers related to Smashing Book 2.

Contents and Format of SM Book 2

• What’s the difference between Smashing Books 1 and 2?
  Both books cover best practices in Web design and Web development, and they have similarities, but on a broad scale they cover different areas of design. Book 1 presents coding and layout techniques, color theory und UI design, while Book 2 covers psychology, designing for mobile devices, graphic design, wireframing and book production. They complement each other very well but are also distinct enough for standalone reading.
• Is Smashing Book 2 an update, a new edition or a completely new book?
  The content was written from scratch, specifically for the book. It’s a completely new book.
• Is Smashing Book 2 available as eBook?
  No. We don’t want it to be just one of the many books available everywhere, but rather be an exclusive annual event. Our goal was to print a large, unique, comprehensive and extremely valuable physical book. We don’t have any plans to release it as an eBook yet.
• What’s with the extra eBook (the “Lost Filesâ€�)?
  Initially, the book was supposed to contain more chapters, but because most of our contributors delivered (much) more content than the book could accommodate, we couldn’t include them all in the book. (We could have added more pages, but then shipping costs would have increased significantly.) Therefore, we will release four chapters as a free bonus eBook called “The Lost Files.� The eBook will be available in PDF, ePUB and Mobipocket formats. In February, every registered customer will be able to download the book, even if they haven’t bought the Smashing Book 2. So, make sure to check out the Smashing Shop in February.
• Will the book be available in other languages?
  Not yet.

Payment, Costs, Shipping

• Can I get a bulk discount?
  Yes, of course! Please contact our book sales manager, Michael Dobler. He will be glad to answer all of your questions!
• What are the shipping costs for my country?
  The shipping cost per book is €3,50 (for Europe) and $3.50 (for the rest of the world). We’re paying part of the shipping cost ourselves to make it possible for anyone to purchase the book, wherever they are in the world. We don’t have any hidden costs and haven’t made any tricky calculations.
• What are the delivery times for my country?
  All books will be shipped via air mail to keep the delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview.
• What payment methods are accepted?
  We support primarily PayPal, VISA, MasterCard and American Express. In Germany Lastschriftverfahren and EC-cards are supported, too. We use a secure connection, with 256-bit AES encryption and a GeoTrust Extended Validation SSL CA certificate.
• Is there a money-back guarantee?
  Yes, absolutely! There is no risk involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back; no ifs, ands or buts about it.
• I’m experiencing problems with the check-out?
  You can either check our Smashing Shop FAQ page or contact our live support team by clicking the “Chat� button in the upper right of any Smashing Shop page.
• I have a problem not discussed here.
  Please leave a comment below, or contact our live support team by clicking on the “Chat� button in the upper right of any Smashing Shop page. We would love to help you in any way we can!

Please Spread The Word

We’ve tried our best to make the book affordable and useful to every designer and Web developer worldwide. Please spread the word about the Smashing Book 2 in your blog posts and tweets. We really appreciate your support.
(sl)(vf)(ik)

What’s the best way to start a new year? Not just with resolutions and good intentions, but with good deeds! Therefore, today we have the pleasure of announcing that a new Smashing Book is on its way. And not only that: it’s not just a book but an annual event.

Is the book really coming? In all honesty, the Smashing Book 1 could have been better in several ways: the overly long shipping times and poor quality of the binding were critical mistakes we made with that first book. But we did our homework and learned from our mistakes. We wanted to make the Smashing Book 2 better than its predecessor in every respect: the hardcover book will cost $29.90 USD (like the first one), but it will have more pages and much better binding and will be more comprehensive and of higher quality.

As you read this, the Smashing Book 2 is already in the final stage of production: printing started in late December. This means we will start shipping the books by February at the latest, and the pre-order period will be much shorter than the one with Smashing Book 1. You can pre-order your copy today and get a huge discount: 20% off the regular price.

What’s In The Book?

Like its predecessor, the Smashing Book 2 is a printed book about best practices in modern Web design. This book shares valuable practical insight into design, usability and coding. It provides professional advice for designing mobile applications and building successful e-commerce websites, and it explains common coding mistakes and how to avoid them.

You’ll explore the principles of professional design thinking and graphic design and learn how to apply psychology and game theory to create engaging user experiences. We also feature interviews from experts on the future of Web typography and describe how you can publish a book on your own.

Well-respected professionals have worked with us to provide exciting and comprehensive chapters:

• “The Principles of Great Graphic Design,â€� Matt Ward and Alexander Charchar,
• “Visible vs. Invisible Design,â€� Francisco Inchauste,
• “Designing Mobile User Experiences,â€� Mike Rundle,
• “Sketching, Wireframing and Prototyping,â€� Janko Jovanovic,
• “Red Flags in Web Development,â€� Christian Heilmann,
• “The Future of Web Typography,â€� Vivien Anayian,
• “Game Design Techniques Applied to UX Design,â€� Christoph Kolb,
• “When They Click: Psychology of Web Design,â€� Susan Weinschenk,
• “Design Patterns on E-Commerce Websites (A Study),â€� Steven Bradley,
• “How to Make a Book (Like This One),â€� The Smashing Magazine Team.

Free Sample (PDF)

You will find more information below, and you can read a sample chapter — “Visible vs. Invisible Design� (PDF, 5.6 MB) by Francisco Inchauste — for free.

Exclusive Artwork for the Book

The Smashing Book 2 features exclusive full-page illustrations for each chapter. And here we’ve got something special for you. The illustrations were created by the talented Australian illustrator and our dear friend Yiying Lu, who is well known as the designer of Twitter’s famous “Fail Whale.â€� She has designed an exclusive new series called “Smashing Animalsâ€� for this book, and (by the way) you can purchase it as wall art on Yiying’s website.

Yiying lovingly cares for her cat on the wall. You can see this illustration in the chapter “Visible vs. Invisible Design,� written by Francisco Inchauste.

Names of Our Readers in the Book

In November 2010, our readers and fans had the opportunity to add their names to the book. We sorted all of the participants alphabetically and created an exclusive double-page feature on pages 6 and 7. Overall, 2970 names form the “S� in Smashing — ASCII art at its best.

The Smashing Book 2 Is Available Only In The Smashing Shop… And Nowhere Else

The Smashing Book 2 will be a hardcover book with quality stitched binding, 360 pages and a bit larger of a size than its predecessor. The price is again just $29.90, but there is more. We want to make the book affordable to everyone, so Smashing Magazine will pay a large part of the shipping costs and ship the books at a fixed price of $3.50/€3.50 per copy, no matter where you live in the world.

And it gets even better: books will be sent only via air mail (except within Germany). The delivery will take between 3 and 15 working days at most (you can check delivery times for your country). The books will be shipped from Berlin, Germany. And of course, if you are not satisfied or have questions, there is a 100-day money-back guarantee and a live chat in our recently redesigned Smashing Shop.

But That’s Not All, Right?

Right! Initially, the book was supposed to contain more chapters, but because most of our contributors delivered (much) more content than the book’s size could accommodate, we couldn’t include them all. (We could have added more pages, but then shipping costs would have increased significantly.) So, we will release four chapters as a free bonus eBook, called “The Lost Files.â€� This eBook will be available in PDF, ePUB and Mobipocket formats. In February, every registered customer will be able to download the book, even if they haven’t bought the Smashing Book 2. So, make sure to check out the Smashing Shop in February.

Here are the pieces that will be presented in the free bonus eBook:

• “The Ultimate Web Design Questionnaire and Checklist,â€� Kat Neville,
• “Plagues in Web Design and How to Deal With Them,â€� Speider Schneider,
• “Interviews: Expert Tips From Renowned Designers,â€� Steven Snell,
• “Web Design Community: Where Are We Going?,â€� Paul Scrivens (Drawar).

Features Of The Book

If you pre-order the Smashing Book 2 now, you will get a huge discount: 20% off the regular price. You’ll pay just $23.90 USD and will get:

• A solid printed hardcover book,
• Quality stitched binding with a bookmark,
• 360 pages with full-color images on coated paper,
• Worldwide availability,
• Reduced air mail shipping — just $3.50/€3.50 per copy,
• Risk-free purchase with a 100-day money-back guarantee,
• Free bonus eBook with four chapters,
• Pre-order your Smashing Book 2 now and save 20% off the regular price!

A Closer Look At The Book’s Chapters

The Principles of Good Graphic Design, Matt Ward and Alexander Charchar
This chapter looks at some key concepts of graphic design as they relate to modern Web design. It looks at a number of the central elements and methodologies that drive the act of designing itself, and it discusses the sometimes subtle but always significant divide between the merely good and truly great.

This chapter is about: The meaning of graphic design. The difference between good and great design. Timeless design. Relational minimalism. Importance of contrast, space and tension. Typography. Visual voice.

Visible vs. Invisible Design, Francisco Inchauste
Basic principles and techniques of producing the visible layer of design in tools such as Photoshop are widely covered in books and online. Design is generally understood to be only what we see: a visual and primarily artistic medium of communication. However, the invisible part of design takes on several forms. When we design a website or application, we don’t (and shouldn’t) start from scratch. We start with certain patterns, and we need to understand their limitations in order to create effective solutions and experiences. Balancing invisible and visible designs enables us to create effective and meaningful interfaces for websites and applications.

This chapter is about: Seeing the invisible in design. Designing how users think. Mental models. Excise design. Design patterns and interface guidelines.

Designing Mobile User Experiences, Mike Rundle
The best apps work well, but building an app that looks good and works well isn’t easy. Designing a mobile app’s user experience is particularly challenging because it requires skill in a variety of disciplines: interaction design, graphic design, information architecture and ergonomics, to name a few. User experience design is a combination of disciplines, and so designing a fantastic mobile app calls for a combination of perspectives and skills.

This chapter is about: Building and selling apps. Peculiarities of mobile software. Principles of good app design. User interface design patterns for mobile apps. Visual design of mobile apps.

Sketching, Wireframing and Prototyping, Janko Jovanovic
Every design process starts with an idea. Many ideas, actually. The truth is, only a few of them prove to be good, and the others are just bad. Many people believe that they have an excellent idea and know the path to realizing it, yet most fail. And that’s not surprising, because having an idea is not enough. Knowing how to choose an idea, shape it and develop it is crucial to success. This chapter describes the process of moving from abstract ideas to concrete solutions and explains the workflow, tools and techniques available when designing websites and user interfaces.

This chapter is about: Design process. Ideation through sketching. Storyboards. Techniques and tools. Wireframing. Prototyping. Testing and refining.

Red Flags (Warning Signs) in Web Development, Christian Heilmann
We spend a big part of our lives working hard to clean up and maintain products, rather than building great things to make the lives of our users easier. That’s just the way it is. If your code is hard to clean up, then you’ll be eating up even more time in the already short development process. Discovering that the product you’re having trouble extending or fixing is your own from some time ago is all the more aggravating. That’s when you start thinking that something must have gone wrong along the way. Well, something has. A few things will make good solutions go bad and start to smell, and this chapter goes over them.

This chapter is about: Building for maintenance, not the moment. Why HTML and CSS code go bad. HTML painting and convoluted CSS syntax. Issues with JavaScript and back-end code.

The Future of Web Typography, Vivien Anayian
In the foreword to The Elements of Typographic Style, Robert Bringhurst points out that the underlying principles of typography are independent of any particular typesetting medium. Yet it is only after almost 20 painful years of setting type on the Web that designers can finally breathe better and apply the essential elements of style without compromising on detail or execution. Recent years have been pivotal in shaping the future of typography on the Web; what was unthinkable only a few years ago has become possible today, and it will get even better tomorrow.

This chapter is about: Evolution of Web typography. @font-face. WOFF. The open-source type movement. Font licensing. Web font services. Current problems in Web typography. Fonts Module and CSS3. Exclusive interviews.

Applying Game Design Principles to User Experience Design, Christoph Kolb
The ultimate goal of a business is simple: to engage as many people as possible in favorable interactions. These interactions could include buying a product, spreading the word, advertising or just generally becoming a fan. Such objectives clearly require us to explore paradigms and perspectives that go far beyond aesthetics and traditional user interaction. This is where game design theory comes in handy. We can apply game design to certain areas of interaction to create user experiences that engage people and bind them to the company. In this chapter, we will learn how to apply some of techniques and theory of game design to website design, user experience and business.

This chapter is about: Combining social psychology, game design theory and economics. Game mechanics: world, players and rules. Winning strategies for users and companies. Playbook and strategy for interaction designers. Game design techniques and real-life examples.

When They Click: Psychology of Web Design and User Behavior, Susan Weinschenk
From the chapter: “I’m a psychologist by training and education. This means that I consider design in the context of the mental model of the user. Whether the design is of software, a website, a medical device, online instructions or product packaging, I can’t help but see it from a psychologist’s point of view. I enjoy applying what psychology research tells us about how people think, learn, play and work to design challenges. I take research and insight into the brain, the visual system, memory and motivation and extrapolate design principles from them.�

This chapter is about: Different views on design. The importance of social interactions. Unconscious decision-making. Social validation. Goal-gradient effect. Using distractions to grab attention. “Satisficing.� Mental models. Error handling. Inattentional blindness.

Design Patterns in E-Commerce Websites (Study), Steven Bradley
Designers of e-commerce websites have to take into account many things that designers of informational websites don’t. How to design the check-out process? How will the website establish trust so that visitors are willing to hand over sensitive credit card data? Common design patterns have evolved over time, and this chapter explores how well e-commerce websites match up with theory and best practices. What’s the average number of check-out pages for an e-commerce website? Do certain patterns emerge from the data to show how different websites approach such issues? Shopping websites were chosen and surveyed each based on a set of elements in several categories.

This chapter is about: Layout. Information architecture. Navigation. Color. Product, check-out and shopping cart pages. Wording and design of call-to-action buttons. Contact and support pages. On-site marketing.

How to Make a Book (Like This One), The Smashing Editorial Team
Holding your very own book in your hands for the first time is a truly remarkable experience. You suddenly realize that you’ve given your ideas — ideas conceived in some abstract state in your mind — a certain shape, a physical reality, making them tangible, visible and enduring. The feeling is overwhelming: it fills your heart with pride, in the way that a painter admires their creation. The feeling has not been alien to those who have participated in book manufacturing over the centuries, and yet experiencing it has never been so affordable and accessible as it is now.

This chapter is about: Printing a book on your own or with a publishing house. Writing, editing and preparing the book for printing. Pricing, marketing and fulfillment. eBook production: PDF, ePUB, Mobipocket. Print on demand.

FAQ

Here are some frequently asked questions and answers related to Smashing Book 2.

Contents and Format of SM Book 2

• What’s the difference between Smashing Books 1 and 2?
  Both books cover best practices in Web design and Web development, and they have similarities, but on a broad scale they cover different areas of design. Book 1 presents coding and layout techniques, color theory und UI design, while Book 2 covers psychology, designing for mobile devices, graphic design, wireframing and book production. They complement each other very well but are also distinct enough for standalone reading.
• Is Smashing Book 2 an update, a new edition or a completely new book?
  The content was written from scratch, specifically for the book. It’s a completely new book.
• Is Smashing Book 2 available as eBook?
  No. We don’t want it to be just one of the many books available everywhere, but rather be an exclusive annual event. Our goal was to print a large, unique, comprehensive and extremely valuable physical book. We don’t have any plans to release it as an eBook yet.
• What’s with the extra eBook (the “Lost Filesâ€�)?
  Initially, the book was supposed to contain more chapters, but because most of our contributors delivered (much) more content than the book could accommodate, we couldn’t include them all in the book. (We could have added more pages, but then shipping costs would have increased significantly.) Therefore, we will release four chapters as a free bonus eBook called “The Lost Files.� The eBook will be available in PDF, ePUB and Mobipocket formats. In February, every registered customer will be able to download the book, even if they haven’t bought the Smashing Book 2. So, make sure to check out the Smashing Shop in February.
• Will the book be available in other languages?
  Not yet.

Payment, Costs, Shipping

• Can I get a bulk discount?
  Yes, of course! Please contact our book sales manager, Michael Dobler. He will be glad to answer all of your questions!
• What are the shipping costs for my country?
  The shipping cost per book is €3,50 (for Europe) and $3.50 (for the rest of the world). We’re paying part of the shipping cost ourselves to make it possible for anyone to purchase the book, wherever they are in the world. We don’t have any hidden costs and haven’t made any tricky calculations.
• What are the delivery times for my country?
  All books will be shipped via air mail to keep the delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview.
• What payment methods are accepted?
  We support primarily PayPal, VISA, MasterCard and American Express. In Germany Lastschriftverfahren and EC-cards are supported, too. We use a secure connection, with 256-bit AES encryption and a GeoTrust Extended Validation SSL CA certificate.
• Is there a money-back guarantee?
  Yes, absolutely! There is no risk involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back; no ifs, ands or buts about it.
• I’m experiencing problems with the check-out?
  You can either check our Smashing Shop FAQ page or contact our live support team by clicking the “Chat� button in the upper right of any Smashing Shop page.
• I have a problem not discussed here.
  Please leave a comment below, or contact our live support team by clicking on the “Chat� button in the upper right of any Smashing Shop page. We would love to help you in any way we can!

Please Spread The Word

We’ve tried our best to make the book affordable and useful to every designer and Web developer worldwide. Please spread the word about the Smashing Book 2 in your blog posts and tweets. We really appreciate your support.

© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: books

Having an aesthetic search box on a website is as important as being capable of establishing good content on the website itself. It is true that one could provide categories in order to allow users rummage through content to find what they may be looking for on the site.

Nevertheless, the fact of having a search box on the site will facilitate the process for the user since they will be able to find precisely what they are looking for. Pay attention to just how important it is to implement a well-working search engine on a website.

Even though external search engines e.g., Bing, ASK, Yahoo! and so on, are there to deliver the same function, just in case your visitors may consist of the more Internet savvy users, they will intentionally degrade the quality of your site for not having any on-site. This is because they know just how much this situation influences the overall grade of the site.

In conclusion to our introduction, a number of ways you can impress your audience will be listed, with a fully functioning on-site search engine that also lets users devour its aesthetic pleasure with new examples on existing websites.

Auto Search Suggestion

This feature became popular after Facebook’s launch of auto search suggestion. Not only it became a trend but it is also useful for giving users optimized results when installed properly.

Playlist Now
This search box was created by Alvin Thong. Instant search results lists the results matching your search query as your are typing it in a dynamic form without having the entire page refreshing.

It is truly iconic given the purple and magenta as the background and a translucent border surrounding the search box to provide a great contrast. Notice the approx. 20 pixels left indent on the auto suggestion list — making it very vivid for the user to see. The white background also helps users see clearly that it is a textbox and having a white background on it helps to have a clearer vision.

Nico’s Search Box
Nico added a scroll module for alphabetical order purposes.

Get Satisfaction
Get Satisfaction doesn’t only provide auto suggestion but it categorizes the results into “Companies” and “Products” — helping users refine their search automatically without effort.

Guillermo’s MooTools Textbox List
Mac OS X-like tokens also work well for search for tags. In this case, Guillermo has implemented the same feature but in PHP making it feasible to be used on websites not just desktop applications. Also, notice the “x” button at the right of each token signifying that they can be deleted.

Remember The Milk
When searching for tags in the web app, Remember The Milk, the letters you are typing inside the textfield are emphasized in the auto suggestion list. This serves to let you know which letters in your query matches the results.

WYCTIM

Tutorials on How to Implement Auto Search Suggestion

• AJAX AutoComplete for jQuery
• Guillermo’s MooTools Textbox List
• How to Use the jQuery UI Autocomplete Widget
• How To: jQuery Autocomplete
• JQuery AutoComplete using XML with Key Value pair

Instant Search Results

Authentic Jobs
Before Google’s instant results, there was Authentic Jobs’ instant results.

Google
A couple of months ago, Google released some new features to their products. One of them being Google Instant.

Stuart’s Search Box
It also allows you to display previews of the search results but not all of the search results — as in Stuart’s case.

Tutorials on How to Implement Instant Search

With the use of AJAX, this can easily be done on any website:

• Create Youtube instant search with jQuery and AJAX Tutorial
• Instant Search in 60 Lines
• Youtube Instant Search with Jquery and Ajax
• Instant Search with Coldfusion & jQuery
• How-To Create Your Own Instant Search

Integrating Filters with a Search Box

As an alternate to providing suggestions to optimize results, enabling users to filter their results before searching is also a useful technique.

Flickr

Kontain

New York Magazine

ThemeForest

Brian’s Search Box

CSS Tricks

Further Tutorials

Creating a mega drop down menu is how you can put in check boxes and radio buttons in your search box so here are a few resources teaching you how to do so:

• Mega Drop Down Menus w/ CSS & jQuery
• Mega Drop-Down Navigation Menus Work Well
• How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
• Designing Drop-Down Menus: Examples and Best Practices

Saving Space

Despite the evidence of formal surveys and statistics, many users today (analyzing how you, yourself, press enter to search instead of clicking a button), we can save space by:

• Ommiting separated buttons
• Ommitting buttons entirely
• Putting replaceable text inside the textbox instead of an individual label.

Ommitting Separated Buttons

By putting the buttons as part of the search box, you can save space. Also, if your target demographics are close to being Internet savvy and they know the standard web elements and icons, you can afford putting a magnifying glass icon instead of a long “SEARCH” button.

Scraplr Blog

Deziner Folio

Ommitting Buttons Entirely

Although, this could sometimes give trouble since older generations are not customed to pressing enter to execute the search function. Therefore, you may have to perform a bit of audience demographics study before choosing this method. Otherwise, they’re great for saving space.

One Fused Life
The blog of Lasha Krikheli features a search box that uses replaceable text inside the search box, thus, symbolizing that it is a search box without the need of extra labels.

The Web Squeeze Forum

Putting Replaceable Text Inside the Textbox Instead of an Individual Label

As in Lasha’s case, replaceable text can help you save space without putting in a separate label. Below the showcase lists tutorials on how you can achieve this with the usage a bit of JavaScript.

Tumblr

The Web Squeeze Magazine

Tutorials on How to Implement Replaceable Text Inside Textboxes

This is usually done with the help of JavaScript so look below for such tutorials:

• Tutorial: Clear textbox with onClick & onBlur
• Grooveshark Search with CSS3
• Create a Fancy Search Box using CSS
• Mac OS X style searchbox

Increase Recognition by Keeping it Nice and Clean

Here is a list of examples of making your search box recognizable and unique to the rest of your page:

New York Times
Here, the container of the search box pops out of the rest of the navigation bar — giving it more focus for the user to point out where the search bar is.

Cursebird
Uses a Twitter bird icon and a tiny notification dialog to help the search box gain focus from the user. Designed by Richard Henry.

MenuPages

Go FrenchLabs’ Search Google

Various Search Boxes

Dribbble is an exlusive club for designers whose work is recognized by the community and fellow designers around the block. Overtime, it has become a place for inspiration. You can expect only the best from its members. Check out the designs on there once in a while if you need new ideas.

Kevin’s Search Box

Ben’s Search Box

Jeremy’s Search Box

Thijs’s Search Box

Freshface’s Search Box

Clark’s Search Box

Robbie’s Search Box

Mike’s Search Box

Visual Idiot’s Search Box

Ben Rowe’s Search Box

Nathan’s Search Box

John’s Search Box

John’s Search Box

Adrian’s Search Box

Jason’s Search Box

Alexis’ Search Box

Jonatan’s Search Box

Andrew’s Search Box

Pete’s Search Box

Phil’s Search Box

Joey’s Search Box

Other Resources

You may also be interested in the following articles and related resources:

• Designing The Holy Search Box: Examples And Best Practices
  In this article, you will find a few, but important, guidelines to keep in mind when creating search box designs.
• 10 Useful Usability Findings and Guidelines
  Here are 10 useful usability findings and guidelines that may help you improve the user experience on your websites.
• 10 Principles Of Effective Web Design
  In this article, we focus on the main principles, heuristics and approaches for effective web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information.
• Search Box Design
  A search tool is an important technique for giving the user efficient access to required information. Users often do not know the identifiers used for the content of your website.
• Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach
  This article analyzed the resulting data to better understand what makes Web forms usable—or unusable.
• Where’s the Search? Re-examining User Expectations of Web Objects
  Provides survey results on the placement of web elements expected by users. The PDF is also available!
• Search: Visible and Simple
  Search lets users control their own destiny and assert independence from websites’ attempt to direct how they use the Web.
• UX Pattern: Search
  Users also in many cases are thinking of what they are looking for in ways that do not match with the way you have organized your content. Therefore, rather than forcing users to get to know your navigational categorizations, just let them search based on what they are able to articulate, in their own terms.
• Mental Models For Search Are Getting Firmer
  Users now have precise expectations for the behavior of search. Designs that invoke this mental model but work differently are confusing. Advice on when to use the label “Search” and when to use “Find” or “Retrieve”.
• 25 Rounded Corners Techniques with CSS
  Quality and usable rounded corners with CSS techniques for you to have the best choices. Regularly updated.
• Is a search box significant for web design?
  Quality and usable rounded corners with CSS techniques for you to have the best choices. Regularly updated.
• Search Box: How It Helps in Determining Visitors’ Mind
  This simple feature that is found in almost all websites these days can unveil a lot of information about your customers.
• Bad UI design … Facebook search box
  “Why is not having a search button a problem?� The problems is, if you’re on a mobile device, you can’t just hit enter to submit the page.

(ik)

I’ll be giving a talk about documentation (no, not just code comments and RDoc) at Magic Ruby February 4th-5th. Oh, did I mention it’s in Disneyworld? And it’s free?