The Smashing Library (59 eBooks)
PDF, ePUB, Kindle
About The ebook Bundle
Since over 12 years, Smashing Magazine is where thousands of designers and developers go to learn about design trends and advanced coding techniques.
That is why we have developed the Smashing Library, a comprehensive access to 59 valuable eBooks. The Library includes our latest releases Smashing Book 6, Form Design Patterns, Design Systems, Inclusive Design Patterns, and The WebP Manual, too!
This eBook bundle contains all of the following eBooks, each of which are downloadable in all formats: ePub, Kindle, and PDF:
- Design Systems (eBook) +
As the web continues to become more complex, designing static pages has become untenable, so that many of us have started to approach design in a more systematic way. In this book, Alla Kholmatova sets out to identify what makes an effective design system that can empower teams to create great digital products.
- Design Systems — There isn’t a standard definition of “design system” within the web community and people use the term in different ways. In this chapter, we’ll define what a design system is and what it consists of.
- Design Principles — Solid principles are the foundation for any well-functioning system. In this chapter we’ll discuss the qualities of effective design principles and look at some of the ways of defining them.
- Functional Patterns — In this chapter we’ll discuss the role of functional patterns and why they should be defined early in the design process.
- Perceptual Patterns — In this chapter we’ll discuss how perceptual patterns work and their role in a design system.
- Shared Language — This chapter describes how to establish a shared language, which allows a group of people to create and use patterns cohesively for a particular product.
- Parameters of Your System — This chapter introduces some of the qualities a design system can have, and the ways in which risks and downsides can be managed.
- Planning And Practicalities — In this chapter we’ll look at finding support for establishing a design system in your organization, and planning and starting the work.
- Systemizing Functional Patterns — The exercise in this chapter describes an approach to systemizing functional patterns, starting with a product’s purpose.
- Systemizing Perceptual Patterns — The exercise in this chapter describes how to conduct an inventory of styles, define perceptual patterns, and integrate them into the system.
- Pattern Libraries — In this chapter we’ll look at some of the practical techniques to set up a simple, useful, and multidisciplinary pattern library.
- Smashing Book 6: New Frontiers In Web Design (eBook) +
Meet Smashing Book 6 with everything from accessibility to CSS Custom Properties, Grid, Service Workers, performance patterns, AR/VR, conversational UIs and responsive art direction.
- Making Design Systems Work in the Real World
- Accessibility in Times of Single-Page Apps
- Production-Ready CSS Grid Layouts
- A Strategy Guide to CSS Custom Properties
- Building an Advanced Service Worker
- Loading Assets on the Web
- On Designing Conversations
- UX Design of Chatbots and Virtual Assistants
- Crafting Experiences for AR/VR/XR
- Bringing Personality Back to the Web
- User Experience Revolution (eBook) +
Many companies try to create a great experience for customers. But few are willing to make the changes required to deliver on that promise. In fact most don’t even realize just how bad their experience can be.
- Getting Real About User Experience Design
- How To Sell The Benefits Of User Experience Design
- Create Customer Experience Evangelists
- Raise The Profile Of The Customer
- Get Managerial Support
- Develop A Proof Of Concept
- Establish Better Working Practices
- Apps For All: Coding Accessible Web Applications +
Accessibility is not just about addressing specific disabilities, but making sure as many people as possible have access to the same information.
Written by Heydon Pickering and reviewed by Steve Faulkner.
- This Is For Everyone — Though we shall encounter visual design challenges, deal with performance issues, and adopt progressive enhancement — all of which are accessibility concerns — the underlying theme of this book is about making the interactivity of web applications include keyboard and screen reader users.
- It’s All About Buttons — For many years, the World Wide Web was defined almost entirely by a peculiar type of button called a hyperlink which, when pressed, would take a reader from one location to another in a continuum of in- terconnected documents. First alphabetically and first in importance, only the <a> element could be said to truly define the web: it’s the glue which holds all our shared knowledge together.
- The WAI Forward — Even when we branched out to do something a little more radical with CSS transitions, we made sure our technique was a progressive enhancement, built on robust foundations. This way, older browsers and other technologies still had something to fall back on.
- Getting Around — The structure of webpages which many people consume visually, set to a grid, is no structure at all to those who are not looking. To screen reader users, grids do not exist. The extra time it takes the page to load your perfect golden ratio grid system framework is all for nothing to them. Even keyboard users (who can at least adjust their gaze to a new item) are not really helped by a multiple column layout. They still have to cover the same distance, just sideways.
- It’s Alive! — To ensure users get the message, ARIA provides live regions. As their name suggests, live regions are elements whose contents may change in the course of the application’s use. They are living things, so don’t always stand still. By adorning them with the appropriate ARIA attributes, these regions will interrupt the user to announce their changes as they happen.
- Welcome To The Community — To conclude this introduction to web application accessibility, I’d like to introduce you to the accessibility community and many of the fantastic free tools and resources available to help you build accessible applications.
- Digital Adaptation (eBook) +
Nothing is more frustrating than stubborn management entangled in dated workflows and inefficient processes. That’s why we created “Digital Adaptation”, a new practical book on how to help senior management understand the Web and adapt the business, culture, team structure and workflows accordingly.
- A Message for Web Professionals
- The Digital Divide
- Setting Your Digital Direction
- Adopting A Digital Culture
- Digital Teams: Agents Of Change
- Digital Demands A Different Way Of Working
- Grassroots Change
- Inclusive Design Patterns (eBook) +
We make inaccessible and unusable websites and apps all the time, but it’s not for lack of skill or talent. It’s just a case of doing things the wrong way. We try to build the best experiences we can, but we only make them for ourselves and for people like us.
- 0. Introduction — We will look at an interactive element, a button, from the perspective of three types of designers. The purpose of this example is to show you how a little bit of knowledge about the medium can lead to a simpler and (therefore) more inclusive solution.
- 1. The Document — We will look into discrete interface patterns; modules, components, widgets, conventions, whatever-you-want-to-call-thems. It would be foolhardy not to first acknowledge that each will ultimately belong to a web document. HTML pages vary dramatically in shape and size and can include any combination of patterns, but there are a handful of 'document level' best practices to which we should adhere. The aim here is not to go in search of the ultimate 'boilerplate' but to configure a parent web page to support inclusive design.
- 2. A Paragraph — We'll be looking at typefaces, leading, measure, justification, contrast, focus indication and more, to help you design paragraphs suited for a hugely diverse audience. We'll also tackle specific issues for folks with limited vision, dyslexia, Irlen syndrome, low literacy and limited technical knowledge.
- 3. A Blog Post — We'll show how to incorporate accessible landmarks and a sound section structure to make the content more navigable and interoperable to a diversity of users and parsers. This will be bolstered by giving well-written and context independent structural as well asand context independent structural and navigational cues.
- 5. A Menu Button — In this chapter, we'll ensure our menu button and the content it reveals are inclusive of differing user settings, circumstances, devices, and assistive technology software.
- 6. Inclusive Prototyping — By going straight from paper to HTML, we lay the foundations for efficient code and inclusive experiences.
- 7. A List Of Products — In this chapter, we'll practice our inclusive design chops. As in previous patterns, the organization and structure of content is paramount. We'll look deeply into image accessibility, from both the perspectives of alternative text composition and performance. In catering to blind consumers, to those who cannot afford generous data contracts, and anyone accessing your content from outside your interface, this is a chance to really push the limits of inclusive design.
- 8. A Filter Widget — We'll explore the importance of giving users choice and control over how their content is arranged. We'll also use some techniques to make sure our design was tolerant of dynamic and fluctuating content. Inclusive design also means a visual design which is not too strict about the nature of the content imparted to it.
- 9. A Registration Form — This chapter will give you everything you need to develop inclusive forms. By using standard form elements, effective labeling and facilitating the correction of errors, users of all walks are able to access and contribute to your websites and apps. By keeping the form simple and avoiding irritating experiences like disappearing labels and passwords that you cannot check, we've made sure using the form isn't just possible but pleasurable.
- 10. Test-driven Markup — Test-driven development allows developers working with frequent iterations to move forward with confidence. By writing tests first, to prescribe outcomes, then creating the functionality to achieve them, you can ensure successful builds behave in a predictable and reliable fashion.
- Making It Right: Product Management For A Startup World +
This eBook will empower product managers who work in digital and help them to build better products that make their companies and users more successful.
- Roles And Responsibilities Of The Product Manager
- Uncovering Needs
- Product Discovery
- The User Experience Of kalahari.com
- Product Roadmaps
- Defining A Product
- User-Centered Design And Workflows
- What About Responsive Design?
- Build And Release
- Assess And Iterate
- Product Management In Agile Methodologies
- Getting Started
- The New Hardboiled Web Design +
If you’re hungry to learn about how the latest techniques will make your websites more creative, flexible and adaptable, then “Harboiled Web Design” is for you.
- What The Hell Is Hardboiled? — You’ll discover what it means to be hardboiled for you, your designs and your workflow. Think again about what we can do instead of what we couldn’t. Embrace the possible, instead of complaining about limitations.
- (Give Me That) Ol’ Time Religion — You’ll discover why it’s important to constantly re-evaluate concepts such as progressive enhancement and graceful degradation. Learn about the basics of how a page should work in first place, not necessarily how a design should look. Get away from limiting your creativity to the capabilities of a lowest common denominator browser.
- The Way Standards Develop — You’ll find out the cold, hard truth about how standards are really developed. Learn about ten CSS modules that are most relevant to the work we do, its vendor-specific prefixes, and how to manage them with your favorite tools effectively.
- It Doesn’t Have To Look The Same — You’ll learn that responsive web design is an opportunity to make fabulous creative work, an opportunity that you should grab with both mitts. Embrace that not all browsers should render websites in the same way and focus on providing the most appropriate experience for the capabilities of a browser or device. All that without anyone being left unable to access content or features.
- Atoms And Elements — You’ll learn about designing atoms and elements and how web design style guides help you presenting designs in a more effective way. Learn how to present the atmosphere of a design while designing components separate from layout with Style Guides.
- Designing Atmosphere — You’ll find out how to design a great atmosphere by starting with typographic elements, how to select the right typeface, weight, line-height, and more. Learn how to use type proofs for presentation, how to balance them the right way and how to make them legible and readable on many different screens. Last but not least, you’ll dig into color accessibility and add decorative aspects that help give a design its personality.
- Destination HTML5 — You’ll learn how to use HTML’s semantic elements alongside the BEM naming system. You’ll repeat the widely supported contemporary HTML5 standards such as section, article, aside, header, footer, and nav. You’ll learn how to make your markup faster, more responsive and, of course, hardboiled.
- Hardboiled Microformats2 — Because your SEO ranking matters, you’ll discover the updated microformats2 — simple markup patterns for making your data machine-readable and therefore search engine friendly.
- WAI-ARIA Roles — While microformats2 are dedicated to make you website machine-readable, WAI-ARIA roles have different but complementary goals. You’ll learn how to make your web content easier to use by people who use assistive technologies such as navigation menus, sliders, progress meters, properties that define dynamically updated sections of a page, ways to enable keyboard navigation and roles to describe the structure of a page, including headings, regions, and tables (grids).
- Hardboiled Foundations — In this chapter, you’ll dive deep into CSS Media Queries. By organizing it into six groups of elements that consider site-wide page styles, typography, form elements, tables, and images, you’ll learn how to style small screens first and how to choose breakpoints that are based on content rather than devices.
- Flexible Box Layout — You’ll investigate new Flexible Box layouts and how to visually reorder content without laying a hand on your markup, how to overcome common frustrations such as equal height backgrounds on unequal height columns, and more.
- Responsive Typography — Much of the web content we consume every day consists of the written word. Learn about the different web font formats and how to implement them properly, with fallback fonts and website performance in mind. You’ll learn how to specify the web fonts to low-resolution and high-resolution display, and how to test them on different resolution screens.
- RGBa And Opacity — With your hardboiled HTML all set and your smaller screen styling in place, you’ll now give your design an extra level of fidelity and interaction that makes the most of the space available on larger screens. You’ll redevelop our vertical list into a grid of eight magazine covers that reveal their descriptions when we press on them. You’ll do this by applying relative positioning but without any horizontal or vertical offsets.
- Borders — CSS borders can be exciting because they include properties that open up a wealth of creative opportunities. You’ll investigate new design possibilites with properties such as border-radius (that our clients love so much) and border-image for using images inside those borders.
- Background Images — Since we’re also able use multiple background images and to change their origin point and size, there’s a vast variety new creative opportunities. You’ll get started by making a design using multiple background images. Background properties give us precise control over the size of our background images and how they’re rendered behind our elements.
- Gradients — Flat design aesthetic has become the norm. Almost every site you see these days include large, flat areas of colour, often laid out across horizontal bands, almost always the full width of our screens, with flat or outlined buttons, and icon graphics that are also flat. You’ll learn how to move on from the mediocrity this flat aesthetic epitomises and you’ll see web design that’s rich and full of life. Whether you like linear gradients, radial, repeating or with multiple background images — you’ll need to know how to handle them.
- Background Blends And Filters — The rapidly increasing pace of change is a good thing for designers and developers, businesses and brands, and the internet in general. New technologies like CSS filters and background blends are not only being introduced faster, but they’re being implemented in browsers and turned into standards faster, too. Now’s not a time to kick back — it’s a time to use these exciting new tools to make creative work with depth and subtlety, work that’s hardboiled.
- Transforms — CSS layouts can sometimes be a little strait-laced. You’ll learn how two-dimensional and three-dimensional transforms can help your designs break out of the box.
- Transitions — In web pages and applications, changes in state can have a huge impact on how it feels to use an interface. Make a change too fast and an interaction can feel unnatural. Make it too slow, even by a few milliseconds, and an interface will feel sluggish. You’ll learn how to make state changes smoother with a host of CSS transitions.
- Multi-column Layout — You might be surprised how unimaginative most website layouts are today, particularly since the responsive web design came up. But there’s so much to learn from print design that should inspire your work on the web. The different ways that magazine designers use columns of text to make their publications individual are an enormous inspiration. In this chapter, we’ll learn how to use CSS multicolumn layout and how to use it for today’s responsive designs.
- The Sketch Handbook (eBook) +
If you’re designing for the web today, you are probably using Sketch. We do, too, so we created “The Sketch Handbook”, filled with many practical examples and tutorials in 12 jam-packed chapters.
- An Introduction To Sketch
- Designing An App
- The Power Of Iterations And Artboards
- Creating A Logo For The App
- Creating The Overview Page
- Design The Article Page
- Going Responsive
- The Final Breakpoint: Desktop Widescreen
- Designing The Category Icons
- Export The Category Icons
- Mini Projects
- The WebP Manual +
In this ebook, you’ll learn all about WebP: what it’s capable of, how it performs, how to convert images to the format in a variety of ways, and most importantly, how to use it.
- WebP Basics — Depending on your site’s audience and the browsers they use, using WebP images is an opportunity to deliver less data-intensive user experiences for a significant segment of your audience.
- Performance — We’ll cover how both lossy and lossless WebP compare to JPEGs and PNGs exported by a number of image encoders.
- Converting Images To WebP — This can be done in a myriad of ways, from something as simple as exporting from your preferred design program, by using Cloudinary and similar services, and even in Node.js-based build systems. Here, we’ll cover all avenues.
- Using WebP Images — Because WebP isn’t supported in all browsers, you’ll need to learn how to use it that sites and applications gracefully fall back to established formats when WebP support is lacking.
- In Closing — WebP does offer potential benefits to a large portion of internet users. In my experience, WebP has substantially improved loading performance for many of my clients, and continues to be a tool I reach for when I want to make pages as lean as possible.
- A Career On The Web: Assuming Leadership +
Fresh ideas and practical advice to help you improve your leadership skills and foster a passionate and agile team.
Taking the step from being a member of a digital team to becoming a leader can be quite overwhelming. Having proven that you excel in the technical aspects of your job is most probably beyond question, but a leadership position will naturally confront you with entirely new challenges which also call for new skills. After all, a team is as good as its leader, right?
- Assuming Leadership In Your Design Agency
- Lessons Learned From Leading New Web Professionals
- How And Why To Make Side Projects Work At A Digital Agency
- Internal Developer Training: Doing It Right
- How To Build An Agile UX Team: The Culture
- How To Build An Agile UX Team: Hiring
- How To Build An Agile UX Team: Integration
- How To Recruit A UX Designer
- A Career On The Web: On The Road To Success +
There comes a time in everyone’s career when changing jobs is the natural next step. But how can you make the most of this situation and find a job you’ll love?
There comes a time in everyone’s career when changing jobs is the natural next step. Perhaps you’re looking for a new challenge or you feel like you’ve hit a wall in your current company? Either way, you’re standing at a crossroad, with an overwhelming amount of possibilities in front of you. But how can you make the most of this situation? How can you find a job you will truly love?
- How A Designer Can Find A Job They Will Truly Love
- The Difference Between Good And Bad Job Requirements
- Preparing For A Front-End Job Interview
- Land Your Next Web Development Job: The Interview Process
- Career Advice For Graduating Web Design Students
- The Habits Of Successful New Web Professionals
- How To Maintain Your Brand As A Corporate Employee
- A Field Guide To Usability Testing +
Testing usability is vital to creating a successful website — even more so if it’s an e-commerce website, a complex app or any other complicated project.
Testing usability is vital to creating a successful website — even more so if it’s an e-commerce website, a complex app or any other complicated project. Unlike interviews and focus groups, a well-designed user test measures actual performance.
- The Ultimate Guide to A/B Testing
- Multivariate Testing in Action: Five Simple Steps To Increase Conversion Rates
- 15 Essential Checks Before Launching Your Website
- Test Usability By Embracing Other Viewpoints
- Multivariate Testing 101: A Scientific Method Of Optimizing Design
- Comprehensive Review Of Usability And User Experience Testing Tools
- A Field Guide To User Research +
With this eBook, you will learn to take the guesswork out of your design decisions and base them on real-life experiences and user needs instead.
User research is an effective strategy to gain a deeper understanding of your target audience — a crucial step in order to choose efficient design solutions and build smart products. But what has to be considered when conducting user research? What methods have proven themselves in practice? And how do you finally integrate your findings into the design process? With this eBook, you will learn to take the guesswork out of your design decisions and base them on real-life experiences and user needs instead.
- A Five-Step Process For Conducting User Research
- A Closer Look At Personas: What They Are And How They Work
- A Closer Look At Personas: A Guide To Developing The Right Ones
- All You Need To Know About Customer Journey Mapping
- Facing Your Fears: Approaching People For Research
- Considerations When Conducting User Research In Other Countries: A Brazilian Case Study
- How To Run User Tests At A Conference
- Behind The Scenes Of Real-Life Projects +
The eBook “Behind the Scenes of Real-Life Projects” takes a closer look at the techniques and stories of some folks behind real-life Web projects.
- Building The New Financial Times Web App
- Bringing Angry Birds To Facebook
- Behind The Scenes Of Nike Better World
- Behind The Scenes Of Tourism New Zealand
- Tale Of A Top-10 App, Part 1: Idea And Design
- Tale Of A Top-10 App, Part 2: Marketing And Launch
- Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study
- Inside Google’s User Experience Lab: An Interview With Google’s Marcin Wichary
- Mistakes I’ve Made (And Lessons Learned Along The Way)
- Clients: Friends You Never Had +
The eBook “Clients: Friends You Never Had” provides valuable advice to foster stable relationships and a fruitful cooperation with your clients.
- Getting Engaged
- How To Build Long-Term Client Relationships
- Keys To Better Communication With Clients
- Guidelines For Successful Communication With Clients
- Effective User Research And Transforming The Minds Of Clients
- Why Account Managers Shouldn't Prevent Designers From Speaking To Clients
- How Do You Deal With Overstressed, Irrational Clients? An Entrepreneur's View
- How To Sell The Value Of Mobile To Clients
- Encouraging Better Client Participation In Responsive Design Projects
- Content Strategy +
This eBook delves into the world of content, providing beginners as well as communications pros with a fundamental understanding of how content strategy works.
- The Immersive Web And Design Writing
- Content: A Blessing, A Bubble, A Burden
- Make Your Content Make a Difference
- Content Strategy Within The Design Process
- Content Strategy: Optimizing Your Efforts For Success
- Finding Your Tone Of Voice
- Fluidity Of Content And Design: Learning From Where The Wild Things Are
- The Role Of Design In The Kingdom Of Content
- How Disregarding Design Limits The Power Of Content
- Content Strategy, Vol. 2: Planning, Producing And Maintaining Quality … +
This eBook is your guide through the critical phases of content planning, production and maintenance, your partner in crime to develop a sound content strategy.
- Editing Tips For Business Web Content
- Framing Effective Messages To Motivate Your Users
- Ways To Avoid Overwhelming Users: Lessons Learned From My High-School Teachers
- How To Run A Content-Planning Workshop
- Help Your Content Go Anywhere With A Mobile Content Strategy
- Improving Your Information Architecture With Card-Sorting: A Beginner’s Guide
- Content Knowledge Is Power
- Dealing With Redundant, Out-Of-Date And Trivial (ROT) Content
- Creating Meaningful Websites +
What is it that makes a website stand out from the crowd? What makes it memorable and meaningful? This eBook wants to explore these questions.
- A Comprehensive Website Planning Guide
- A Fun Approach To Creating More Successful Websites
- Defending The Generalists In The Web Design Industry
- Breaking Down Silos: The Consequences Of Working In Isolation
- MUD: Minimum Usable Design
- A Craft Of Consequences: Reader, Writer And Emotional Design
- Easier Is Better Than Better
- Designing Engaging And Enjoyable Long-Form Reading Experiences
- Symptoms Of An Epidemic: Web Design Trends
- Creativity Lessons For Web Designers +
The infamous creative spark isn’t as random as we might think. The creativity lessons in this eBook may help you overcome a creative trough.
- The Process Of Creativity
- Work, Life And Side Projects
- “I Draw Pictures All Day”
- Ignorance Is Bliss For A Creative Mind
- The Big Think: Breaking The Deliverables Habit
- Changing Perspective: A New Look At Old Problems
- Collaging: Getting Answers To The Questions You Don't Know To Ask
- Creating A Lasting Impression
- Customizing WordPress +
If WordPress got you hooked, and you want to tailor your site more to your needs and ideas, then this eBook is for you.
- A Detailed Guide To WordPress Custom Page Templates
- Extending WordPress With Custom Content Types
- Building A Custom Archive Page For WordPress
- Customizing Tree-Like Data Structures In WordPress With The Walker Class
- Extending Advanced Custom Fields With Your Own Controls
- Building An Advanced Notification System For WordPress
- How To Use Autoloading And A Plugin Container In WordPress Plugins
- How To Deploy WordPress Plugins With GitHub Using Transients
- Designing Better UX +
“Designing Better UX” raises awareness for those little things that add up to an ideal user experience. A valuable resource for your daily UX routine.
- When You Shouldn’t Use Fitt’s Law To Measure User Experience
- Five Ways To Prevent Bad Microcopy
- Infinite Scrolling: Let's Get To The Bottom Of This
- Designing Great Feedback Loops
- Sketching For Better Mobile Experiences
- Converting Our Stories Into Multi-Screen Experiences
- Creating An Adaptive System To Enhance UX
- Designing For Email +
“Designing For Email” offers practical advice to cater for a flawless and engaging experience on web, desktop, and mobile email clients.
- What 22 Billion Email Newsletters Tell Us About Designing For Email
- From Monitor To Mobile: Optimizing Email Newsletters With CSS
- Improve Your Email Workflow With Modular Design
- Size Matters: Balancing Line Length And Font Size In Responsive Web Design
- How To Raise Your Email Above Inbox Noise
- Designing The Words: Why Copy Is A Design Issue
- How To Use Email To Alienate Your Users
- Email Marketing For Mobile App Creators
- How To Create A Self-Paced Email Course
- Effective Copywriting +
From avoiding pitfalls to optimizing content and turning words into marketing tools, this eBook highlights the real-word copywriting experiences of Smashing’s authors.
- Quick Course On Effective Website Copywriting
- Five Copywriting Errors That Can Ruin A Company’s Website
- Design With Dissonance
- How Content Creators Benefit From The New SEO
- How To Improve Your Branding With Your Content
- The Art Of Content Marketing
- Content Meaning
- 10 Ways To Put Your Content In Front Of More People
- Emotional Design Elements +
Find out how to integrate emotional appeal into your website — a personal touch can make all the difference, if you know how to design it.
- Inclusive Design
- The Personality Layer
- Give Your Website Soul With Emotionally Intelligent Interactions
- Not Just Pretty: Building Emotion Into Your Websites
- Playful UX Design: Building A Better Game
- Gamification And UX: Where Users Win Or Lose
- Adding A Personal Touch To Your Web Design
- Form Design Patterns (eBook) +
Without forms, the web is a passive experience where content is just consumed. But with forms the web can be collaborative, creative and productive. Forms are at the center of every meaningful interaction, so they’re worth getting a firm handle on. Jump to table of contents.
On first glance, forms are simple to learn. Made up of just a handful of inputs, you can create a form in little time. But when we consider the journeys we need to design, the users we need to design for, the browsers and devices of varying sizes, capabilities and bugs being used; and ensuring that the result is simple and inclusive, form design becomes a far more interesting and bigger challenge.
- A Registration Form — We’ll start with a basic registration form and take a look at the foundational qualities of a well-designed form and how to think about them. By applying something called a question protocol, we’ll look at how to reduce friction without even touching the interface. Then we’ll look at some crucial patterns, including validation, that we’ll want to use for every form.
- A Checkout Form — The one thing per page design pattern is a cornerstone of creating well-designed forms. We’ll look at why that is before applying it to a checkout flow. After that, we’ll consider flow and order with a view to breaking down each step of the checkout flow. Then we’ll look at several input types and how they affect the user experience on mobile and desktop browsers, all the while looking at ways to help both first-time and returning customers order quickly and simply.
- A Flight Booking Form — We’ll dive into the world of progressively enhanced, custom form components using ARIA. We’ll do this by exploring the best way to let users select destinations, pick dates, add passengers, and choose seats. We’ll analyze native form controls at length, and look at breaking away from convention when it becomes necessary.
- A Login Form — We’ll look at the ubiquitous login form. Despite its simple appearance, there’s a bunch of usability failures that so many sites suffer from. Social media login hasn’t necessarily helped matters so we’ll cover that too.
- An Inbox — We’ll design ways to manage and action email in bulk, our first look at administrative interfaces. As such, this comes with its own set of challenges and patterns, including a responsive ARIA-described action menu, multiple selection, and same-page messaging.
- A Search Form — We’ll create a responsive search form that is readily available to users on all pages, and we’ll also consider the importance of the search mechanism that powers it. Together, they can make search discoverable, simple, and useful.
- A Filter Form — Users often need to filter a large set of unwieldy search results. Without a well-designed filter, users are bound to give up. Filters pose a number of interesting and unique design problems that may force us to challenge best practice to give users a better experience.
- An Upload Form — Many services, like photo sharing, messaging, and many back-office applications, let users upload images and documents. We’ll study the file input and how we can use it to upload multiple files at once. Then we’ll look at the intricacies of a drag-and-drop, Ajax-enhanced interface that is inclusive of keyboard and screen reader users.
- An Expense Form — We’ll investigate the special problem of needing to create and add lots of expenses (or anything else) into a system. This is really an excuse to cover the add another pattern, which is often useful in administrative interfaces.
- A Really Long And Complicated Form — Some forms are very long and take hours to complete. We’ll look at some of the patterns we can use to make long forms easier to manage.
- HTML Semantics +
You won’t get far without the foundational understanding of HTML semantics. This eBook addresses the importance of semantics in our code.
- HTML5 Semantics
- When One Word Is More Meaningful Than A Thousand
- HTML5 And The Document Outlining Algorithm
- Our Pointless Pursuit Of Semantic Value
- Pursuing Semantic Value
- The Semantic Grid System: Page Layout For Tomorrow
- How To Create Selling E-Commerce Websites, Vol. 2 +
This eBook takes a look at the challenges that crafting online shopping experiences bring along, and equips you with the necessary know-how on how to deal with them effectively.
- How To Plan Your Next Mobile E-Commerce Website
- Exploring Ten Fundamental Aspects Of M-Commerce Usability
- An E-Commerce Study: Guidelines For Better Navigation And Categories
- The Current State Of E-Commerce Search
- Better Product Pages: Turn Visitors Into Customers
- Designing A Better Mobile Checkout Process
- Creating A Client-Side Shopping Cart
- Reducing Abandoned Shopping Carts In E-Commerce
- Inside Creative Minds: Workflows, Habits And Strategies +
In “Inside Creative Minds” experienced influencers and successful designers provide first-hand insights into their workflows, habits and strategies.
- How I Work: IDEO's Duane Bray On Creating Great Digital Experiences
- How I Work: Meetup's Andres Glusman On The Power Of UX And Lean Startup Methods
- Copying Others Is Not The Answer
- “Be Careful: Trends Come And Go”
- “Be Humble, Be Honest, Don't Be Afraid To Fail”
- WordPress: How It Came To Be And Where It’s Heading
- Interview With Nadine Chahine: The Art And Craft Of Arabic Type Design
- Ask The Expert — A Chat About Art, Design, Computers And Education With Milton Glaser
- Legacy Of Typography +
Typography is everywhere. This eBook introduces historical and cultural aspects of type and how they relate to the web industry.
- Japanese, A Beautifully Complex Writing System
- Respect Thy Typography
- Typography Carved In Stone
- Industrial-Strength Types
- Legitima Typeface: An Experience Of Fossils And Revivals
- When Typography Speaks Louder Than Words
- Weird And Wonderful, Yet Still Illegible
- Font Wars: A Story On Rivalry Between Type Foundries
- Hands-On Experience: The Rehabilitation Of The Script
- Marketing Secrets For Web Designers +
Marketing is an essential part of web design and knowing its 101 helps you see your design decisions in a broader context.
- Stop Shouting. Start Teaching
- If You Love Your Brand, Set It Free
- What Successful Products Teach Us About Web Design
- Social Media Is A Part Of The User Experience
- How To Use Email To Alienate Your Users
- How Metrics Can Make You A Better Designer
- Keep Your Analytics Data Safe And Clean
- It Works For “You”: A User-Centric Guideline To Product Pages
- How To Launch Anything
- Navigation & Interaction +
The foundations of good UX design lie in transparent navigation and interaction patterns and systems. A solid understanding of the rules is as important as knowing when to break them.
- The Elements Of Navigation
- Sticky Menus Are Quicker To Navigate
- Design Patterns: When Breaking The Rules Is OK
- Navigation Patterns: Exploration Of Single-Page Websites
- Redefining Hick’s Law
- What Web Designers Can Learn From Video Games
- Motion & Animation: A New Mobile UX Design Material
- Mission Transition
- Designing With Audio: What Is Sound Good For?
- Navigation & Interaction, Vol. 2 +
The foundation of a solid, frustration-free user experience lies in a well-considered navigation system. But which design decisions have proven themselves in practice?
- The Line Of Least Resistance
- Efficiently Simplifying Navigation, Part 1: Information Architecture
- Efficiently Simplifying Navigation, Part 2: Navigation Systems
- Navigation For Mega-Sites
- Responsive Navigation On Complex Websites
- Off The Beaten Canvas: Exploring The Potential Of The Off-Canvas Pattern
- Smart Transitions In User Experience Design
- How Do You Design Interaction?
- Performance Optimization: Techniques And Strategies +
Tracking down performance bottlenecks does not only improve loading times but also results in a much snappier experience and a higher user engagement.
- Improving Smashing Magazine’s Performance: A Case Study
- How To Speed Up Your WordPress Website
- You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy
- How To Make Your Websites Faster On Mobile Devices
- Creating High-Performance Mobile Websites
- Don’t Get Crushed By The Load: Optimization Techniques And Strategies
- Speed Up Your Mobile Website With Varnish
- Cache Invalidation Strategies With Varnish Cache
- Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study
- Practical Approaches For Designing Accessible Websites +
With the help of this eBook, you will gain a deeper understanding of common accessibility pitfalls and learn to circumvent them to create a better experience for everyone.
- Accessibility APIs: A Key To Web Accessibility
- Accessibility Originates With UX: A BBC iPlayer Case Study
- Mobile And Accessibility: Why You Should Care And What You Can Do About It
- Making Modal Windows Better For Everyone
- Notes On Client-Rendered Accessibility
- Design Accessibly, See Differently: Color Contrast Tips And Tools
- Designing For The Elderly: Ways Older People Use Digital Technology Differently
- Practical Approaches For Designing Usable Websites +
Put your users in the focus and learn about designing flows, optimizing emotional engagement and performing heuristic website reviews.
- Evolve Your User Interface To Educate Your Users
- Optimizing Emotional Engagement In Web Design Through Metrics
- Enhancing User Interaction With First Person User Interface
- A Guide To Heuristic Website Reviews
- Stop Designing Pages And Start Designing Flows
- The Data-Pixel Approach To Improving User Experience
- Psychology Of Web Design +
“Psychology Of Web Design” gives you insights on how the human brain deals with different elements, colors, contrast, symmetry and balance.
- Designing For The Mind
- Persuasion Triggers In Web Design
- Designing For A Hierarchy Of Needs
- 10 Useful Usability Findings And Guidelines
- 30 Usability Issues To Be Aware Of
- Designing For Start-Ups: How To Deliver The Message Across
- Color Teory For Designers, Part 1: The Meaning Of Color
- Color Theory For Designers, Part 2: Understanding Concepts And Terminology
- Color Theory For Designer, Part 3: Creating Your Own Color Palettes
- Rethinking UX +
Rethinking UX is a springboard for developing a new perspective and for creating future-proof user experiences.
- Thirteen Tenets Of User Experience Design
- Improving Your Website Usability Test
- Designing For The Multifaceted User
- 50 Design Problems In 50 Days: Real Empathy For Innovation
- Beyond The Button: Embracing The Gesture-Driven Interface
- What Leap Motion And Google Glass Mean For Future User Experience
- Smashing Book #5: Real-Life Responsive Web Design (eBook) +
Responsive design is a default these days, but we are all still figuring out just the right process and techniques to better craft responsive websites. That’s why we created a new book — to gather practical techniques and strategies from people who have learned how to get things done right, in actual projects with actual real-world challenges.
- Preface — Front-end techniques. Scalability. Design systems. Bullet-proof solutions. Real-world challenges.
- Responsive Designer's Workflow — Responsive workflow. Element collage. Style tiles. Tools. Deliverables. Performance budget. Interface inventory. Sketching. Planning. Manifestos. Hypothesis. Atomic design. Designing in the browser. Photoshop.
- Responsive Design Patterns & Components — Design patterns. Navigation. Smart front-end techniques. Priority+ pattern. Improved off-canvas. Lazy loading. Autocomplete. Filters. Responsive PDF. Portrait/landscape mode. Sliders. Country selector. Responsive iconography.
- Structured Content for RWD — Structured content. Content consistency. Content models. Structural audit. Editorial content. Content types. Content relationships. Data-driven gaps. Feature-driven gaps. Authors and editors. CMS. Content maintenance.
- Mastering SVG For RWD And Beyond — SVG. Syntax. Accessibility. Viewport. ViewBox. Exporting. Embedding. Sprites. Icon systems. Data URIs. Performance. Smart SVG techniques. Responsive iconography. Cross-browser fallbacks.
- Building Responsive Components With Flexbox — Syntax variants. Flex container. Orientation. Wrapping. Sizing boxes. Flex property. Forms with Flexbox. Advanced alignment. Magical margins. Reordering boxes. Order property. Flexbox as progressive enhancement.
- Web Fonts Performance — Font formats. Font loading. Font-rendering. FOIT and FOUT. Font Loading API. Fallback fonts. Inlining fonts. Simulating swapping. Promises. Asynchronous loading and caching. Prioritized loading.
- Using Responsive Images, Today — CSS pixel and DPR. Retina displays. Fixed-width images. Variable-width images. Srcset and sizes. Art direction. <picture> element. Separation of concerns. Image format fallback. Accessibility. Background images. Image optimization. WebP and JPEG-XR. Compressive images. Deployment. Common pitfalls.
- The Dark Side Of Responsive HTML Email — Email landscape. CSS in email. Market share. Navigation and CTA buttons. Foundational markup. Reset and client-specific CSS. Fluid containers. Pattern-based development. Layout techniques. Microsoft Outlook. Windows Live Mail. Apple Mail. Mozilla Thunderbird. Outlook.com. Yahoo! Mail. AOL. iOS Mail. Gmail.
- Testing, Maintaining And Debugging RWD — “Cutting the mustard”. Predictable, simple CSS. Naming conventions. BEM and class names. Sass organization. Debugging media queries. Lazy loading. Content-out media queries. Separation of concerns. Exploratory testing. Functional testing. Visual regression testing. Automated testing. Dealing with false positives. Common dependencies. Troubleshooting bugs on mobile.
- Counting Stars: Creativity Over Predictability In RWD — Advertising. User experience design. Creative hijinks. Allergic to research. Process and predictability. Building blocks of creativity. Intoxicated by process. Platform for creativity. Creative brief. Line between control and chaos. Buying creativity. copywriting. Creative teams. Creative direction
- Beyond Responsive: Optimizing For Offline — navigator.onLine. Online and offline events. HTML5 Application Cache. Cache manifest. Fallbacks. AppCache gotchas. Web Storage. localStorage. Service Workers.
- Efficient Responsive Process With Clients — Collaboration. Estimates. Spiraling. “One-deliverable” workflow. Efficiency. Content priority guide. Style comparisons. Testing the aggregate. Content prototype. Wireframes. Style prototypes. Pattern libraries. Happy teams.
- Successful Freelancing For Web Designers +
Read up on how to pitch like a pro and handle your finances properly and get precious tips on communicating with clients and partners.
- Basic Skills Of Freelance Web Designers
- Communication With Clients & Partners
- Marketing — Convincing Strategies For Freelancers
- Contracts & Pricing
- Typography Best Practices +
Web design is not just about a flamboyant or simply beautiful website appearance. This eBook is about small — but crucial — typographic details.
- The Perfect Paragraph
- Mind Your En And Em Dashes: Typographic Etiquette
- How To Choose The Right Face For A Beautiful Body
- Why Subtle Typographic Choices Make All The Difference
- The Creative Way To Maximize Design Ideas With Type
- Applying Macrotypography For A More Readable Web Page
- Avoiding Faux Weights And Styles With Google Web Fonts
- Setting Weights And Styles With The @font-face Declaration
- Typography: Practical Considerations And Design Patterns +
Learn how to train and sharpen your eyes to recognize specific typographic details which will be sure to guide you in your own projects.
- Understanding The Difference Between Type And Lettering
- Making Sense Of Type Classification, Part 1
- Making Sense Of Type Classification, Part 2
- A Critical Approach To Typefaces
- Taking A Second Look At Free Fonts
- Dear Web Font Providers
- Typographic Design Patterns And Current Practices (2013 Edition)
- Creating Exciting And Unusual Visual Hierarchies
- Type Makes A Difference: An Exploration Of Type-Focused Websites
- UX Design Process +
User Experience design isn’t a new field. But sometimes new approaches lead to new perspectives.
- Interaction Design In The Cloud
- Lean Startup Is Great UX Packaging
- Fitting Big-Picture UX Into Agile Development
- You Already Know How To Use It
- Fixing A Broken User Experience
- Beyond Wireframing: The Real-Life UX Design Process
- Stop Redesigning And Start Tuning Your Site Instead
- Designer Myopia: How To Stop Designing For Ourselves
- The UX Research Plan That Stakeholders Love
- Unlocking Innovation: How To Generate And Realize Great Ideas +
“Unlocking Innovation” goes beyond the mere process of generating ideas and looks at how we can actually bring them to life.
- On Creative Leadership
- Examining The Design Process: Clichés And Idea Generation
- Using Brainwriting For Rapid Ideas Generation
- Up On The Wall: How Working Walls Unlock Creative Insight
- Design Better And Faster With Rapid Prototyping
- The Skeptic’s Guide To Low-Fidelity Prototyping
- Five Tips For Making Ideas Happen
- How To Make Innovative Ideas Happen
- User Experience Design +
“User Experience Design” provides you with insights on how to improve your website based on the most important UX principles.
- A Design Is Only As Deep As It Is Usable
- Why User Experience Cannot Be Designed
- Design Is About Solving Problems
- Designing The Well-Tempered Web
- Better User Experience With Storytelling – Part I
- Better User Experience With Storytelling – Part II
- Taking A Customer From Like To Love: The UX Of Long-Term Relationships
- Idiots, Drama Queens And Scammers: Improving Customer Service With UX
- Relationship Engineering: Designing Attraction – Part I
- Relationship Engineering: Designing The Happily Ever After – Part II
- Work Smart, Live Healthy +
Web design is more than a job. It’s a passion. This eBook focuses on practical tips and strategies to foster a balanced lifestyle so that you can tackle the job you love with more energy.
- Maximize Your Creative Energy
- Feeling Stuck? Design What You Don’t Know
- Be A Better Designer By Eating An Elephant
- Dealing With Workaholism On Web Teams
- When 24/7/365 Fails: Turning Off Work On Weekends
- Fostering Healthy Non-Professional Relationships
- You Are Not A Machine. You Are Not Alone.
- Let’s Talk About It
Latest Additions To The Smashing Library
Form Design Patterns— by Adam Silver
On first glance, forms are simple to learn. Made up of just a handful of inputs, you can create a form in little time. But when we consider the journeys we need to design, the users we need to design for, the browsers and devices of varying sizes, capabilities and bugs being used; and ensuring that the result is simple and inclusive, form design becomes a far more interesting and bigger challenge. Form Design Patterns helps you get a firm handle on them.
Smashing Book 6: New Frontiers In Web Design— by The Web Community
Smashing Book 6 explores how to build accessible single-page apps with React or Angular, how to use CSS Grid Layout, CSS Custom Properties and service workers as well as how to load assets on the web in times of HTTP/2 and bloated third-party scripts.
The WebP Manual— by Jeremy Wagner
Performance matters now more than ever. What we send over the wire, how we send it, and how much of it we send matters. Because users matter. Web performance is a vast subject with many nooks and crannies, and all deserve their due attention. In this ebook, you’ll learn all about WebP: what it’s capable of, how it performs, how to convert images to the format in a variety of ways, and most importantly, how to use it.
Design Systems— by Alla Kholmatova
As the web continues to become more complex, designing static pages has become untenable, so that many of us have started to approach design in a more systematic way. In this book, Alla Kholmatova sets out to identify what makes an effective design system that can empower teams to create great digital products.
User Experience Revolution— by Paul Boag
Many companies try to create a great experience for customers. But few are willing to make the changes required to deliver on that promise. In fact most don’t even realize just how bad their experience can be. This eBook is for anybody passionate about user experience, but who is in a company that needs an extra push.
The Sketch Handbook— by Christian Krammer
If you’re designing for the web today, you are probably using Sketch. We do, too, so we created The Sketch Handbook: our brand new Smashing book, filled with many practical examples and tutorials in 12 jam-packed chapters. This book will help you master all the tricky, advanced facets of Sketch, so that you’ll become more proficient and fast when using the app.
Inclusive Design Patterns— by Heydon Pickering
We might not realize it, but as developers, we build inaccessible websites all the time. It’s not for the lack of care or talent though — it’s a matter of doing things the wrong way. This book explains how we can craft accessible interfaces without extra effort — and what front-end design patterns we can use to create inclusive experiences.
A Few Valuable Library Features:
- The eBook Library contains 59 web design eBooks worth $430,
- You can save 80% off their regular prices,
- You get immediate access to all eBooks,
- Our eBooks work on all eBook readers and each is available in PDF, ePUB and Kindle,
All eBooks are DRM-free so that they’ll never expire.