Learn How to Design Web & Mobile Products from the Pros

700X100-down-free-pixel

People tend to think of the web as a way to get information or perhaps a place to carry out ecommerce. But really, the web is about accessing applications. Think of each website as an application and every single click, every single interaction with that site, is an opportunity to be on the very latest version of that application.
-Marc Andreessen

Web & mobile design is definitely one of the biggest and most growing sectors of the design industry. It’s a great field where you really get to shine and flex those creative muscles. But what makes a good design for a mobile app or a website? Well, as is the case in many other fields, the end product is completely dependent on the process you use to get to it.

That is to say, the way you work influences what your work will look like. If you work haphazardly and don’t have a systematic approach to it, then your end design will probably wind up missing something. That is to say, unless you’re absolutely brilliant and prodigious, of course.

Well, thanks to the Internet, you have the chance to learn about web design and the design process straight from the biggest names in the industry. We’ve put together a list of 15 great books, websites and articles that teach you how to design properly. But first..

The Design Process

Learn How to Design Web Mobile Products from the Pros 1 Learn How to Design Web & Mobile Products from the Pros

Image source

Now, like we already said, the design you create is always dependent on your process. This is even more true of Responsive Web Design (RWD). The thing is that, when it comes to RWD, the tried and tested design process web designers have been using successfully for years now just doesn’t cut it anymore.

This is because RWD is fluid, like the web. Before RWD came into play, most websites were static, all fixed-length layouts, tables and boxes that generated a completely rigid internet, for the most part.

RWD, the preoccupation for creating websites with flexible layouts, that work well on different devices of different sizes and different input methods. This means that designers need to adapt their process.

An adaptive design requires, by definitions, an adaptive and not-too-rigid, development process. This new process might look like this.

1. Developing a design system

In order to focus on the separate components of RWD, designer Laura Kalbag suggests the creation of a design system. That is to say, focus on separate elements of the design, seeing as their positions are fluid. Instead of focusing on outdated notions of layout, designers should focus on the “feel” of the website as it translates from desktops & laptops to tablets & smartphones.

So don’t focus on the layout. Instead, focus on typography, color, shapes and other imagery. Use these elements consistently and your site will look cohesive even if the width of the device changes their positioning.

2. Content hierarchy instead of a mockup

The internet surely still has a place for static mockups and wire frames, but that place is definitely not RWD. Mockups should no longer focus on the layout, choosing rather to highlight the content. Since mobile devices have narrow screens, usually content will be forced to be displayed on one column. This means that a mockup should focus more on the hierarchy of the elements and decide the order in which to display them.

And now that we’ve spoken about what your work process should look like in the age of responsive web design, without further ado, we give you…

The 15 Greatest Books, Websites & Articles for Learning Web & Mobile Design

1. Mike Monterio, Design Is a Job

Learn How to Design Web Mobile Products from the Pros 2 Learn How to Design Web & Mobile Products from the Pros

Image source

This book is a wonderful and all-encompassing resource. It covers everything from contracts to selling your designs and from working with clients to working with other designers. It’s a short, but knowledgeable book that you can’t afford to skip out on.

2. Megan Burns, 6 Disciplines for Reaching Customer Experience Maturity

Learn How to Design Web Mobile Products from the Pros 3 Learn How to Design Web & Mobile Products from the Pros

Image source

This short 2011 article outlines the 6 necessary disciplines for a company to excel in creating good products and user experiences: Customer Understanding, Measurement, Governance, Strategy, Design and Culture. We’ll let you see for yourself what she has to say about each of them. In any case, it’s great, enlightening article and it won’t take up too much of your precious time, so go ahead and click the link to it.

3. Kevin Charles Redmon, Put Down the iPad, Lace Up the Hiking Boots

Learn How to Design Web Mobile Products from the Pros 4 Learn How to Design Web & Mobile Products from the Pros

Image source

This is a great reminder that, in order to be a relevant designer and to keep ahead of the game and at the peak of your skills, you need to get away from technology once in a while. It’s a well-researched article that comes with hard evidence to support its central thesis. So go ahead and read it and, after you’re done, go camping for a weekend!

4. Alex Feyerke, Designing Offline-First Web Apps

Learn How to Design Web Mobile Products from the Pros 5 Learn How to Design Web & Mobile Products from the Pros

Image source

This well-documented and well-argued article presents a strong case in favor of the native, offline app and talks you through a great deal of arguments that have persuaded us that, while most apps assume the user is online and will constantly be so whenever using them, we need to focus more on offline-first apps. A strong, well-argued article that you should definitely check out.

5. Henry Dreyfuss, Designing for the People

Learn How to Design Web Mobile Products from the Pros 6 Learn How to Design Web & Mobile Products from the Pros

Image source

This is one of the classic books of design and, if you haven’t read it yet, you should get on that as soon as possible. Henry Dreyfuss is possibly the most respected and most talented American industrial designer and his book is exactly what you may expect from such an important personality in the field. It’s a great meld of professional advice, case studies and design history. A must-read for any designer or aspiring designer!

6. Drew Clemens, Design Process in the Responsive Age

Learn How to Design Web Mobile Products from the Pros 7 Learn How to Design Web & Mobile Products from the Pros

Image source

This beautifully written article discusses in great detail the issues we’ve only touched upon in the previous section, when we were talking about design processes and Responsive Web Design. It’s a great look into the problem RWD raises regarding the web design process and offers a great solution. Do check it out!

7.  LUMA Institute, Innovating for People: Handbook of Human-Centered Design Methods

Learn How to Design Web Mobile Products from the Pros 8 Learn How to Design Web & Mobile Products from the Pros

Image source

This awesome book will help you innovate by teaching you the basics of what the authors call Human-Centered Design. This refers to a way of providing solutions that are in the service of people. It gives you a lot of methods and breaks down each one so that they’re easy to follow. Definitely worth a read.

8. Robert Hoekman Jr., Designing the Obvious: A Common Sense Approach to Web & Mobile Application Design

Learn How to Design Web Mobile Products from the Pros 9 Learn How to Design Web & Mobile Products from the Pros

Image source

No matter how long you’ve been building websites or mobile apps, you’re bound to still be missing some obvious aspect in them. It always looks very clear after you’ve taken a step back, but at the time, somehow it always manages to slip away unnoticed. Well, no more! Robert Hoekman Jr. teaches you how to make sure that this doesn’t happen to you again.

9. Theodore Rosendorf, The Typographic Desk Reference

Learn How to Design Web Mobile Products from the Pros 10 Learn How to Design Web & Mobile Products from the Pros

Image source

This is a wonderfully comprehensive typography book. You just open it and pick the right font and typeface for the job. It’s great to have a physical book that contains all the best fonts and that you can consult quickly and without too much hassle.

10. Jakob Nielsen, Designing Web Usability

Learn How to Design Web Mobile Products from the Pros 11 Learn How to Design Web & Mobile Products from the Pros

Image source

This is the definitive guide to web usability, which is, quite probably, the most important element of any web design. This is one of the most consulted and quoted books on the topic of web usability and one you can’t afford to miss if you design websites for a living.

11. Ethan Marcotte, Responsive Web Design

Learn How to Design Web Mobile Products from the Pros 12 Learn How to Design Web & Mobile Products from the Pros

Image source

And yet another RWD-oriented entry in our list. Well, this time, it’s a book. And it’s definitely the best resource on Responsive Web Design out there. This book has it all, from CSS techniques to design principles. If RWD is the future of web design (and it is), then this book is something you need to read.

12. Luke Wroblewski, Mobile First

Learn How to Design Web Mobile Products from the Pros 13 Learn How to Design Web & Mobile Products from the Pros

Image source

This is a greatly entertaining and information-packed guidebook on everything mobile. Find out all you need to know about data-driven strategies and mobile design in general (as well as quite a few non-mobile design tips).

13. Jason Santa Maria, On Web Typography

Learn How to Design Web Mobile Products from the Pros 14 Learn How to Design Web & Mobile Products from the Pros

Image source

This is a beautiful and comprehensive guide to web typography that focuses on typeface selection and font pairing. It’s a must read if you have trouble with choosing the right font combination for your designs and even if you don’t!

14. Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability

Learn How to Design Web Mobile Products from the Pros 15 Learn How to Design Web & Mobile Products from the Pros

Image source

A very good web usability book that does bring common sense into the foreground. Krug is funny and down-to-earth at the same time. Web usability has never been so accesible!

15. Aaron Walter, Designing for Emotion

Learn How to Design Web Mobile Products from the Pros 16 Learn How to Design Web & Mobile Products from the Pros

Image source

This is a charming book written by the UX design leader for MailChimp, Aaron Walter. It’s a must-read for user experience designers. So don’t hesitate, you’ve seen what a great user experience MailChimp has to offer. Read this book and learn how to create that!

That pretty much wraps up our look into how to design web & mobile products according to the biggest names in the field. Did we miss any reference you love? Make sure to let us know by dropping us a line in the comments section below!

Comments

  1. DamienIMS says

    Thank you for sharing this valuable idea! By this a lot of people will learn from this post. Great job! If you are looking for a great website building software tool then you should grab your free copy of this one here. You can make an unlimited amount of websites with this and it is simple to use. Go here “thefreesoftwaredepot[dot]com/tracker/CashExtractorJoanWF/GetFreeSoftware/”