First, I have a confession to make: I have a hard time finishing a book. I'm always very keen to start, and if it's a really good book I always get far, but after having read about two thirds, there comes the tricky point… This has nothing to do with the book itself. I believe it's just something in my nature, because I'm usually reading more than one book at the same time, and I like to take my time. So after each chapter I let it sink in before I continue on the next one, while also randomly switching between books. Usually I read a book in bits and pieces, now 15 minutes then another 20 minutes, so whenever I find a moment. I never find the time to read a couple of hours at once.
The book has 336 pages to read. Each chapter has its own color scheme and beautiful illustration. The book is very well designed which makes it, at least for me as a designer, more enjoyable to read. The hard glossy cover, the stitched binding with headband and bookmark gives the book this extra quality look. The book is also flexible and very practical as it folds open and remains open like a fine quality book.
Every chapter of the book is written by another author, specialists within their own field, and thoroughly reviewed by experts in the industry such as Jon Hicks, Tab Atkins, Paul Irish, Russ Weakley, Peter-Paul Koch, Bryan Rieger, Joshua Porter, Ryan Carson, Collis Ta’eed, Elliot Jay Stocks…
The book covers innovative coding, design and UX techniques and discusses the peculiarities of the mobile context and emotional design.
— The Smashing Editorial
Redesign The Web
Table of Contents
- Preface: The New Era in Web Design by Elliot Jay Stocks
- The Business Side of Redesign by Paul Boag
- Selecting a Platform: Technical Considerations for Your Redesign by Rachel Andrew
- Jumping Into HTML5 by Ben Schwartz
- Restyle, Recode, Reimagine With CSS3 by Lea Verou, David Storey
- Techniques for Building Better User Experiences by Dmitry Fadeyev
- Designing for The Future, Using Photoshop by Marc Edwards
- Redesigning With Personality by Aarron Walter
- Mobile Considerations in UX Design: Web or Native? by Aral Balkan
- Workflow Redesigned: A Future-Friendly Approach by Stephen Hay
- Becoming Fabulously Flexible: Designing Atoms and Elements by Andy Clarke
The book challenges you to think differently about your work, your code and your designs.
— The Smashing Editorial
The Business Side of Redesign by Paul Boag
This first chapter of the book is full of practical advice about how to handle the business side of a web site project, thinking beyond technology and design and focussing on the challenges faced by clients. Paul starts with the valuable question "when is it time to redesign?" and explains why a complete redesign might not always be the right answer. Other meaningful topics are: "how to deal with client feedback", tips on how you can plan for a mobile future, how you can avoid project pitfalls & scope creep, and "falling victim to fashion and trends", just to mention a few.
Selecting a Platform: Technical Considerations for Your Redesign by Rachel Andrew
The next chapter deals with the topic of choosing the right platform or CMS. Which criteria defines this choice? Topics such as A/B testing, e-commerce related subjects such as accounts and tracking orders, payment gateway, and PCI DSS are all discussed in this chapter, together with integration with other systems and the constrains that influence the choice of the decision. Go for custom or an off the shelf software? Or maybe a hosted software-as-a-service solution? How to choose a host?... These are just some of the topics where Rachel gives you good advice in helping you make the right choices.
Jumping Into HTML5 by Ben Schwartz
Restyle, Recode, Reimagine With CSS3 by David Storey and Lea Verou
In this chapter David and Lea show us some neat CSS3 techniques. While they are all very new, they also show us smart fallback methods. They show techniques on web typography, demonstrate us some cool magazine-like layouts, layout techniques using flexbox, and everything there is to know when working with images, such as: multiple backgrounds and gradients, background-origin, background-size, and background clipping. Furthermore they explain CSS transforms, selectors such as 'target' and CSS transitions.
Christian shows us some cool jQuery techniques that embraces the new opportunities of today's browser features by showing us flexible techniques that makes it easy to maintain our code. You'll get to learn how to create a to-do list using proper event delegation and generated content, then progress to a brochure Web site that uses transitions, and at the end you'll also learn about HTML5 canvas to create thumbnails in a browser. While this was a very technical chapter for me as a designer, I was able to fully understand most of it as Christain explains things in the best possible way.
Techniques for Building Better User Experiences by Dmitry Fadeyev
In this chapter Dmitry shows us how we can improve our web site or app using some smart an powerful UX techniques. He starts by showing us useful techniques that help gathering initial product interest and building a solid sign-up process after launch. He also shows us a few experimental UX techniques on how you can push your designs to the next level. You'll also read about how customer service is UX, and also about anti-UX or so called "dark patterns".
Designing for The Future, Using Photoshop by Marc Edwards
Marc gives you a whole range of practical Photoshop tips and advice starting off with valuable information such as screens sizes, and pixel density. He shows us simple techniques we can use to keep our mobile app designs scalable, and flexible. Then he also explains how you can prepare your workspace in terms of color management. Furthermore you'll learn some cool techniques on how you can use Photoshop styles to achieve realistic effects, how to make sure everything looks pixel sharp,... but Marc also shares advice and a bunch of practical tips on how to hand over the design to the developer, and techniques for exporting images from Photoshop.
Redesigning With Personality by Aarron Walter
Aaron shows how you can give your design the right personality and how it can set your brand apart, and help you connect with a passionate audience. By asking questions such as "who are we?", "who are "they?"... it can become a powerful tool in our design. Aaron shows a practical technique on how you can define your personality using a "design persona" all explained through the example of MailChimp.
Mobile Considerations in UX Design: Web or Native? by Aral Balkan
In this chapter Aral helps us to find the answers to the core decisions that need to be made during the design process of an application: make the product cross-platform, and whether it should be native. To be able to make the right decision, we need to fully understand the meaning of a "native" application, but we first need to be aware of the difference between designing interactive documents for the web, versus designing interactive products or applications. The answers to these questions are all fully explained to help you make the right decision on platform and technologies for your product.
Workflow Redesigned: A Future-Friendly Approach by Stephen Hay
Stephen makes us re-think our workflow by using a platform- and device-agnostic thinking technique. Structuring the content first before we think about the look and feel of a web site design is the base of this chapter. He leads us through the different steps of a new way of thinking and designing, using breakpoint graphing and designing in the browser, explaining the benefits and its effectiveness.
Becoming Fabulously Flexible: Designing Atoms and Elements by Andy Clarke
In the last chapter, Andy writes about how we can adapt our current way of designing into a more flexible way by designing components first. The web has no edges and so we can't predict the size or format that our content will be viewed in. Flexibility can be achieved by thinking outside the fixed boundaries of our canvas. By designing an atmosphere first, we give our workflow more flexibility.
The Smashing Book #3⅓ 'The Extension'
There is also a second book that comes with this one. It's called "The Extension" which is literally what this book is. The Smashing Book #3 had a specific size, format, binding constrains etc. and it was simply impossible to include these chapters in the same book without compromising the quality and integrity. I remember that the idea to create a separate book came to live when I was designing the cover and it actually solved the problem of having to choose between 2 designs. The book contains 160 pages, and has the same quality look and finishing.
Table of Contents
- The Missing Element of Redesign: Story by Denise Jacobs
- Rethinking Navigation: Techniques and Design Patterns by Christian Holst and Jamie Appleseed
- Rework Your Content So It Works for You by Colleen Jones
- Responsive Smashing Redesign, a Case-Study by Vitaly Friedman and Elliot Jay Stocks
I must say at this moment of writing, I haven't completely finished this one yet, but so far I've been enjoying this one very much too. This review is just overdue and so that's why I couldn't wait anymore to write it. Here is what the editor says about the book:
With Web design, we can do much more than inform the audience. The power of storytelling and content strategy is in creating engaging, emotional connections that transcend their platforms. In this book, we will review emerging navigation design patterns and understand how to employ a content strategy — which is an important process, often underestimated and dependent on many factors. A case study of Smashing Magazine’s responsive redesign beautifully illustrates what this approach could look like in practice.
In the first chapter of the book Denise guides us through how we can add a clear, coherent and meaningful story to our projects, leveraging emotional and experience design principles which will motivate users to tell share their story of love for what you offer. In the second chapter Christian gives you a full insight of a site's navigation, analysing all aspects there is to know about this fundamental element. In the chapter that follows Colleen explains how you can take your content to the next level, giving advice on the topic of content strategy. In the last chapter Vitaly gives you the full story behind The Smashing Magazine's redesign, from the very beginning of the design process to the launch.
Small note on the topic of Color Management
In one of the topics in the chapter about "Designing for The Future", the author suggests to turn off Photoshops and/or Illustrator's RGB color management. While this might seem a good solution at first sight to avoid the color shifting which happens when you export your files using the 'convert to sRGB' option in Photoshop (which is checked by default), I still want to mention another option that might work better for you. Because if you are like me, and you work both in web and print, than I believe this option is not really ideal. For print I really need to work in a Color Synced environment to achieve the best results. I have my Adobe environment set up as shown in the screenshot, done via Bridge so all Adobe apps are using the same 'duoh' color settings. My screen has been calibrated with a ColorMunki (Design).
When working on a web site or iPhone/iPad app design I assign the sRGB IEC61966-2.1 color profile. This way I work in the web's color environment. When I export, the option 'Convert to sRGB' that you suppose to check off can stay checked on and things will look exactly the same, since what I'm working in is already sRGB. Since I assign a profile to my Photoshop source file, and don't convert it to this color profile, I always work in a non-destructive manner. If I want to remove this profile, I can at all times. To me this setup and its way of working has always served me well, and I never had any trouble of color mismatches either. I can safely copy and paste hexadecimal values or pick them with my color picker. Something I regularly do with images used in my Inspiration Stream.