Archive for year: 2020

Original Source: https://www.webdesignerdepot.com/2020/08/3-essential-design-trends-august-2020/

Do the lazy days have you longing for a new design technique to try? You are in luck.

This month’s collection of essential design trends is packed with functional ideas to spruce up design projects. And all of them are fairly easy to accomplish and will give your project a modern – or intentionally old-school – look.

Here’s what’s trending in design this month:

Angles

There are so many ways to add and use funky angles in design projects.

An angle with a color-block can be a great way to help add a place for a text element on top of an image or video to help ensure readability. Use a color for the angled element that contrasts with the background and text overlay for a striking visual or use a color that matches the background for a more subtle feel.

Another bonus for using angles in the design is that they can help create a distinct eye-tacking pattern from one part of the screen to another to help create visual focus. On a smaller, more vertical screen (such as a mobile device), large angles can even serve a pseudo-split screen purpose and create a way for text and other elements to stack in more vertical orientations.

Angles can come in all different degrees and sizes. There aren’t a lot of rules with how to use them. The common factor is that they make the design easier to understand.

Alternatively, angles can be an independent design element that really has nothing to do with function or adding a text layer. That’s exactly what Aviaja Dance does with their design. The main use of angles comes from the fun “A” in the logo. It’s the main visual on the homepage above the scroll and is rotated in other locations throughout the design.

The next two examples use color-blocked angles.

Dantia uses a small blue angle in the top corner to anchor the logo against video that uses a lot of different colors. This way the logo is always visible. Small triangles are used as bullets throughout the design to further emphasize this shape.

Adige Design uses a large angle in a color that almost fades into the background to almost split the screen in half – part text, part visuals. This is a popular and effective use of an angle to enhance readability and add visual finesse.

Overprint Effects

While overprinting is a print design technique, the visual it creates is popping up in plenty of digital projects. It’s a cool look that creates additional colorways and almost always has a funky vibe.

When a design uses overprint, one color “prints” over another forming a mixed shade from the two hues. It has a certain elegance because as a print technique, it is often reserved for special projects.

That same feel comes through in digital design as well.

Sweet Punk uses a fun overprint with a bright orange circle and black and white image to create a lot of contrast in an interesting color effect. What makes it stand out even more is that the overprint slide is just part of a bigger set of moving images. It stands out because of the color choices and technique.

Kriya Konsulting uses a small overprint feature in a graphic to create a focal point away from text. The effect is subtle and with color and lines inside shapes, it gives you a lot to look at. The overprint graphic is just one of many circles on the screen that come together for a full effect. The interest of the overprint area serves as a starting point for the eye, which moves to other circular elements and text on the screen.

Dystopian Creatives uses an overprint effect in a quick animation as the site loads and then in several locations on the scroll. It’s so subtle that you might miss it if you aren’t looking thanks to a pretty bold overall aesthetic.

Turn of the Last Century Typography

Tall, skinny, modern-style typefaces are in. Bonus points for using this trend in a way that evokes feelings of the roaring 20s (1920s that is).

These font styles seem to mimic media posters from the era. While most of these typefaces fall into the category of modern serif, there are some sans options that create a similar feel.

The primary commonality is the use of extremely tall x-heights, and strokes with distinctly variable thick and thin options. Most of these typefaces are rather condensed as well.

Note how each of these examples takes a different approach.

Better Half uses a modern serif with a dramatic x-height. Note the use of upper and lower-case letters for the headline. It brings attention to the high-drama of the typeface.

Chiara Luzzana takes the opposite approach with an all uppercase character set and mixes outline and filled lettering. The text is somewhat reminiscent of the title credits from “Stranger Things” with dual throwback vibes to the 1920s and 1980s. (Proof that everything that was popular once comes back around again.)

Synchronized Digital Studio goes another way entirely. While the text and design has a similar feel, they do it here with a modern sans serif. Note that the x-height is still quite tall and there are vast differences between thick and thin strokes.

Each of these compact, yet bold typefaces are used to create a dominant visual. That’s the beauty of this style – the typeface is the art thanks to so much visual interest. There’s also the added bonus that these condensed styles allow for higher character counts without getting visually overwhelming. (So, if you need to use a long word at a large size in the main headline, this could be a viable option.)

Conclusion

Design trends that are fun (and functional) are some of the best. Using angles can make it easier to incorporate text elements that are easy to read, overprint effects add flair and a bit of an old-school feel, and turn of the last century typography feels modern and fresh with a hint of 1920s flair.

Any of these design elements can be applied to websites without a complete overhaul and make a great refresh for the dog days of summer and beyond.

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/a1abIzQvgME/new-yorker-say-their-names-cover

The June edition of the New Yorker has been released, with a cover devoted to the history of violence inflicted on black people in the United States. Entitled 'Say Their Names', the powerful illustration features George Floyd, the US citizen recently killed by a police officer in Minneapolis. It shows his body imprinted with images of individual victims, placards, scenes from history and pertinent symbolism. 

Kadir Nelson's cover art is interactive and can be explored on the New Yorker's website, which describes the feature as a "closeup examination of the artist’s latest cover, in which the murder of George Floyd embodies the history of violence inflicted upon black people in America". As you click through the page, you find out the individual stories of the 18 black Americans featured.

The New Yorker cover is a powerful tribute to George Floyd and other victims of police brutality

Prominent activists such as Martin Luther King JR and Malcom X – who were both assassinated in the 1960s – are included in the piece, and other victims include seven-year-old Aiyana Stanley-Jones and twenty-two-year-old Stephon Clark, who were both killed in their own homes in the last decade. The final annotation included in the interactive feature is the story of an escaped slave – known as Gordon – whose image was circulated as a key part of the abolitionist movement because of the shocking lacerations on his back.

Nelson has depicted moments of historical significance too, including the March from Selma, and the Tulsa Race Massacre, while the 'I Am A Man' placard reflects the protest signs carried by sanitation workers during the Memphis strikes. 

The mostly monochrome piece is interlaced with blue Periwinkle, which represents the millions of black people who died as slaves in the USA. Periwinkle was often used as a burial flower, and was often the only sign of a burial plot in the case of the resting place of many slaves.

Nelson is well-known for his work depicting African-American history and culture. His work is often featured on the cover of the New Yorker, and he has also created cover art for National Geographic (see it above), Ebony and Marvel, amongst other publications. Nelson is one of the many creatives standing up in the fight against racism, in response to the killing of George Floyd and support of the protests currently taking place globally.

Read more:

Designers create public document listing black-owned studiosBanksy reveals brilliant plan for Bristol’s toppled Colston StatueBrands show support for Black Lives Matter

Original Source: https://www.webdesignerdepot.com/2020/08/how-to-integrate-ai-into-your-toolset/

Artificial Intelligence is the use of computers or machines that have been created to work and react like humans. Some of the computers that have AI, are designed to include speech recognition, and learn user behaviours so they can predict activities or decisions before they happen.

AI creates a bridge to a new kind of interface, making work processes easier for businesses and customers alike.

Why is AI Important?

There are constant AI technological advances being made, so why not make the most of them and start integrating them into your toolset today? Read on to find out just why AI is important and how you can benefit from it in your work too.

Lower Costs

By integrating Artificial Intelligence into your toolset, you can stand to both save and earn more money. AI will leave you spending less time on various aspects of website management and development, freeing some of your time up and allowing you to finish websites faster. It will also leverage your set of skills and allow you to build greater sites that people will be willing to pay more money for.

Improve Customer Experience

Artificial Intelligence can be used to analyse data in much more depth than the human eye, so will greatly improve the customer experience. It will allow a more personalised and streamlined experience that users will be grateful for. By integrating AI into your toolset, you will soon learn about certain trends and patterns that AI picks up and utilise this with future sites you build, as well as being able to make suggestions to improve the customer journey on the site.

It’s The Future

With so many devices in our everyday lives tuning in to AI, it’s important websites are no different. Just look around many homes and you will likely see a device such as Amazon’s Alexa or Google Home. Phone’s have Siri or Bixby and many laptops have AI systems such as Cortana. As our technology continues to develop, websites need to do this too. Soon we will expect everything to be integrated and be able to control websites in a similar way to our AI devices with voice control and recognition.

How To Integrate AI Into Your Toolset
Chat Bots

One popular example of AI that is integrated into many different websites now, is the chat bot. A feature on a number of major sites, chat bots allow customers to ask and receive answers to questions without an employee having to take time out of their day to answer menial questions that they get asked all the time. The use of AI cuts out the middleman and recognises certain phrases and words to give the most relevant and comprehensive answer.

The first chatbots used to rely on simple, pre-programmed conversational pathways, but these had disappointing and often irrelevant results. More recently they use sophisticated natural language processing (NLP) systems which are a lot more complex and don’t follow just a scripted path, but allow for more meaningful conversations.

Sketch to Code

If you’ve just started in web design, or there are certain elements you are still learning about, AI can help with “sketch to code”. This clever piece of AI can transform a handwritten note, sketch or diagram into a valid HTML mark-up code that maintains itself. This can work from something as simple as a new design for a quote system, to something more complex.

Background Systems

AI can work in the background of a site in the run up to events and collect key aspects such as website analytics. Once this data is complete, the AI can take final instructions from you such as the content, theme and color preference and create a design from scratch that it thinks will perform the best due to the intelligence and knowledge it has been gathering in the background.

Voice Recognition

Back in 2012, the W3C Community introduced the Web Speech API specification with the aim of enabling speech recognition and synthesis in modern browsers. At present, Google Chrome is the only browser that has introduced this, however there is a HTML5 Speech Recognition API will allows JavaScript to have access to a browser’s audio stream and to convert it into text.

It’s important to get up to speed with voice recognition API’s as it’s predicted voice control will be huge in the future. If populating websites, think about how people speak and be sure to include some long-tail keywords that sound more natural. This will help those sites to rank when voice control is adopted more widely.

Adobe Sensei

Adobe Sensei is an AI and machine learning framework that is powering Adobe tools. It is a handy option to add to your toolkit to manage and work on your files.

If you are sourcing images for a website in Adobe Stock, there are over 100 million assets to sift through. Adobe Sensei uses AI and deep learning to understand what exact objects are within an image as well as deeper components such as the aesthetic quality, composition, color palette and even the emotional concept behind the images. This means it can quickly find the image most matched to your needs, saving you hours of time you would have spent sorting through to find the image you want.

Yossarian

Yossarian is a great tool that allows you to craft mood boards. With an aim to generate new ideas faster, it cites itself as “discovery with a twist.” Yossarian uses AI when creating mood boards to return “diverse and unexpected concepts” that share loose associations with what you have searched for, allowing you to be more creative. It will source different ideas and inspiration around what you are searching for, including many you might not have thought of associating with your initial search term.

Brandmark

If you create logos and design templates within your work, Brandmark logo maker is a great AI tool to add to your library. They cite themselves as the most advanced AI logo design tool on the market at the moment. Whether logo creation is something you currently offer, or something you are looking to do, this AI tool can make it easier.

Autodraw

Autodraw is another useful tool you can use for design jobs, where you draw a rough sketch and it will turn it into a neat graphic. This is a handy one to use in association with the concept of sketch to code above. It pairs the magic of machine learning with drawings to help you create professional looking graphics and visuals, quickly.

 

Featured image via Unsplash.

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Original Source: https://www.smashingmagazine.com/2020/08/checklist-cards-release/

Smart Interface Design Patterns In Your Pocket: Checklist Cards PDF

Smart Interface Design Patterns In Your Pocket: Checklist Cards PDF

Vitaly Friedman

2020-08-04T14:00:00+00:00
2020-08-04T19:34:38+00:00

Every UI component, no matter if it’s an accordion, a hamburger navigation, a data table, or a carousel, brings along its unique challenges. Coming up with a new solution for every problem takes time, and often it’s really not necessary. We can rely on smart design patterns and usability tests, and ask the right questions ahead of time to avoid issues down the line.

Meet “Smart Interface Design Checklists”, with questions to ask when designing and building any interface component.

Meet Interface Design Patterns Checklists, a deck of 100 cards with common questions to ask while dealing with any interface challenge — from intricate data tables and web forms to troublesome hamburgers and carousels. Plus, many other components (full list ↓), explored in full detail.

Each checklist has been curated and refined for years by yours truly — all based upon usability sessions, design iterations and A/B tests. Useful for designers & front-end developers to discuss everything a component requires before starting designing or coding.

And if you’d like to dive into design patterns live, attend our upcoming online workshops on Smart Interface Design Patterns, 2020 Edition, where we’ll explore 100s of practical examples over 5×2.5h live sessions.

Print + eBook

eBook

Workshop + Checklists

{
“sku”: “checklist-cards”,
“type”: “Book”,
“price”: “450.00”,
“sales_price”: “375.00”,
“prices”: [{
“amount”: “450.00”,
“currency”: “USD”,
“items”: [
{“amount”: “449.00”, “type”: “Book”},
{“amount”: “1.00”, “type”: “E-Book”}
]
}, {
“amount”: “450.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “449.00”, “type”: “Book”},
{“amount”: “1.00”, “type”: “E-Book”}
]
}, {
“amount”: “375.00”,
“currency”: “USD”,
“items”: [
{“amount”: “374.00”, “type”: “Book”},
{“amount”: “1.00”, “type”: “E-Book”}
]
}, {
“amount”: “375.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “374.00”, “type”: “Book”},
{“amount”: “1.00”, “type”: “E-Book”}
]
}
]
}

$
375.00

$
450.00

Attend Online Workshop

Vitaly’s 5×2.5h online workshop, with the checklists PDF, live sessions and examples.

Checklists PDF Deck

{
“sku”: “checklist-cards”,
“type”: “E-Book”,
“price”: “10.00”,

“prices”: [{
“amount”: “10.00”,
“currency”: “USD”
}, {
“amount”: “10.00”,
“currency”: “EUR”
}
]
}

$
10.00

Free!

Get Checklists PDF

DRM-free, of course.

PDF.
Included with Smashing Membership.

Get the eBook

Download PDF.
Thanks for being smashing! ❤️

About The Checklists

Meet 100 checklist cards with everything you need to tackle any UI challenge — from intricate tables to troublesome carousels. Created to help us all keep track of all the fine little details to design and build better interfaces, faster. Plus, it’s useful to not forget anything critical and avoid costly mistakes down the line. Check the preview.

When working on pretty much any interface problem, we sit down with designers and developers and talk about its design, markup and behavior — using checklists. The deck creates a much-needed sense of alignment, so everyone is one the same page before jumping into design or coding tools.

The deck includes checklists on:

designing for touch (free preview),
hamburger menu and accordions,
carousels and navigation,
filtering, sorting, search,
data tables and feature comparison,
pricing plans and product page,
sliders and video players,
configurators and wizards,
date pickers and calendars,
timelines, maps, seating plans,
privacy and authentication,
onboarding and offboarding,
reviews and testimonials,
video and audio players,
web forms and donation forms.
Plus, 400 practical interface examples (free preview).

Beautifully designed by our dear illustrator Ricardo Gimenes, this deck is always by your side — on your desk or on your phone when you’re on the go.

Additionally, you get practical examples, action points and the checklists in a wide resolution (16×9) for reference and presentations.

A little bonus: 400 practical examples, action points and the checklist in 16×9.

You’ll get:

100 checklists cards on everything from carousels to web forms, carefully curated and designed,
Practical examples and action points for your reference in 16×9,
Editable text file to adjust for your needs,
Life-time access to the deck, updated regularly.
Attend online workshop or get the checklist PDF.

Print + eBook

eBook

Workshop + Checklists

{
“sku”: “checklist-cards”,
“type”: “Book”,
“price”: “450.00”,
“sales_price”: “375.00”,
“prices”: [{
“amount”: “450.00”,
“currency”: “USD”,
“items”: [
{“amount”: “449.00”, “type”: “Book”},
{“amount”: “1.00”, “type”: “E-Book”}
]
}, {
“amount”: “450.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “449.00”, “type”: “Book”},
{“amount”: “1.00”, “type”: “E-Book”}
]
}, {
“amount”: “375.00”,
“currency”: “USD”,
“items”: [
{“amount”: “374.00”, “type”: “Book”},
{“amount”: “1.00”, “type”: “E-Book”}
]
}, {
“amount”: “375.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “374.00”, “type”: “Book”},
{“amount”: “1.00”, “type”: “E-Book”}
]
}
]
}

$
375.00

$
450.00

Attend Online Workshop

Vitaly’s 5×2.5h online workshop, with the checklists PDF, live sessions and examples.

Checklists PDF Deck

{
“sku”: “checklist-cards”,
“type”: “E-Book”,
“price”: “10.00”,

“prices”: [{
“amount”: “10.00”,
“currency”: “USD”
}, {
“amount”: “10.00”,
“currency”: “EUR”
}
]
}

$
10.00

Free!

Get Checklists PDF

DRM-free, of course.

PDF.
Included with Smashing Membership.

Get the eBook

Download PDF.
Thanks for being smashing! ❤️

Table of Contents

Designing For Touch Checklist

+

Overall, 26 questions, including:

Input is never precise: are hit targets at least 48×48px? Can users tap on the same spot to undo actions? Do we expose critical navigation at the bottom on mobile?

Accordion Checklist

+

Overall, 14 questions, including:

What icon do we choose to indicate expansion? Should expanded sections collapse automatically? Should the user be scrolled automatically when expanded?

Navigation Checklist

+

Overall, 30 questions, including:

Do drop-downs appear/disappear on hover, tap/click, or both? Do nav items appear in a full page/partial overlay or slide-in? Can we split the nav vertically for sub-menus on mobile?

Hamburger Menu Checklist

+

Overall, 23 questions, including:

Can we avoid a hamburger icon and show navigation as is? What happens when the user opens both search and hamburger? Do we expose critical navigation by default on desktop/mobile?

Filtering Checklist

+

Overall, 25 questions, including:

Do we expose popular or relevant filters by default? Do we display the number of expected results for each filter? Do we apply filters automatically or manually on “Apply” button?

Sorting Checklist

+

Overall, 32 questions, including:

Do we repeat sorting at the bottom of the content list? Do we include the “Sort by” label separately from the buttons/dropdown? Does the default sorting reflect the diversity of all major product types?

Search Autocomplete Checklist

+

Overall, 33 questions, including:

Do we surface frequent hits, popular searches, products or categories at the top of autosuggestions? On what character do we start displaying autosuggestions? Do we use a look-ahead pattern for search queries?

Carousels Checklist

+

Overall, 37 questions, including:

Can we just show a grid of images instead of a carousel? Is there a way to pause a carousel if it’s auto-rotating? How do we choose the sequence of slides?

Tables Checklist

+

Overall, 28 questions, including:

Do we add steppers to navigate through columns or rows predictably? Do we highlight the cell, row or column on user’s tap/click? With rows as cards on mobile, do we expose relevant data for comparison?

Pricing Plans Checklist

+

Overall, 51 questions, including:

How many features do we want to display per plan? Do we want to allow customers to switch currency (€/$/£)? Can we avoid requiring credit card data for the free trial period?

Sliders Checklist

+

Overall, 19 questions, including:

Do we provide a text input fallback for precise input? Are there any values on a slider that shouldn’t be accepting? Should users be able to “lock” some values?

Date Pickers Checklist

+

Overall, 20 questions, including:

What presets (‘prev day’/’current day’) do we need for faster navigation? Do we use dots color coding for different rates or days? How do we avoid displaying unavailable dates or zero-results?

Configurators Checklist

+

Overall, 33 questions, including:

What’s the entry point to the configurator? Should the user automatically move to the next step when finished? For every step, do we explain and highlight dependencies?

Feature Comparison Checklist

+

Overall, 27 questions, including:

Can users see only differences, similarities and selected attributes for all products/plans? Can the user move columns left and right? Should we ask customers to choose preferred attributes?

Timelines Checklist

+

Overall, 24 questions, including:

How do we expose/highlight critical events (e.g. now/coming up next)? Should some events or time segments be available/fixed at all times? Do we communicate changes over time with an underlying histogram?

Schedule And Calendars Checklist

+

Overall, 25 questions, including:

Do we provide quick jumps between tracks? Should we consider flipping the timing header by 90 degrees? Do we display what’s happening now and coming up next?

Maps Checklist

+

Overall, 26 questions, including:

Do we provide zooming? How many levels of depth will zoom provide? Would an autocomplete search help users find information faster? For charts, can we flip axis to make use of available space?

Seating Plans Checklist

+

Overall, 23 questions, including:

What kinds of pricing tiers and discounted tickets (senior, student) do we have? Do we have any planes or floors that users need to navigate between? Do we calculate and display an experience score for each seat?

Privacy Checklist

+

Overall, 44 questions, including:

Can we group user data according to low/medium/high priority? Can we gradually request more user permissions when we need them? Do we ask for permissions only if we are likely to get them?

Onboarding Checklist

+

Overall, 15 questions, including:

Can we avoid intro tours, tooltips, wizards and slideshows as they are usually skipped? Do we use empty state to indicate our features? When is the right timing to show a particular feature?

Reviews and Testimonials Checklist

+

Overall, 36 questions, including:

Can we group testimonials by a feature/impact and highlight them together? Do we highlight the number of testimonials/reviews prominently? Do we display name, photo, title, age, location, role, company, brand logo?

Web Forms Checklist

+

Overall, 76 questions, including:

Will we be using floating labels? If so, are they accessible? For a country selector, do we display some countries as frequently used? Do we show the number of errors above the “Submit” button and in the tab title as a prefix?

Donation Form Checklist

+

Overall, 32 questions, including:

Do we include any testimonials or stories next to the donation form? What suggested donation amounts do we display, and how many? Which types of donations do we have: one-off, monthly, quarterly, annually?

Authentication Checklist

+

Overall, 34 questions, including:

What password requirements do we want/need to implement? Do we really need CAPTCHA, or can we use honeypot/time traps instead? Do we limit the frequency of password recovery attempts?

Product Page Checklist

+

Overall, 76 questions, including:

What layout do we use for the page (tabs, accordions, one long page, floating bar)? Do we display the final price (incl. standard shipping, taxes, payment fees, currency)? What do we display when an item is out of stock (notification via SMS/email)?

Video Player Checklist

+

Overall, 33 questions, including:

How do we optimize for precise input and fast-forwards (keyboard, buttons)? Do we use preview clips, popularity bar, key moments preview? Do we persist the position of the video track on refresh?

About the Author

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing or speaking at a conference, he’s most probably running front-end/UX workshops and webinars. He loves solving complex UX, front-end and performance problems. Get in touch.

“Smart Interface Design Patterns, 2020 Edition”, Online Workshop with Vitaly Friedman (Sep 22 – Oct 6)

Do you want to dive deeper into the bits and pieces of smart interface design patterns? We’ll be hosting a series of online workshops, in which we’ll take a microscopic examination of common interface components and reliable solutions to get them right — both on desktop and on mobile.

We’ll study 100s of hand-picked examples and we’ll design interfaces live, from mega-dropdowns and car configurators — all the way to timelines and onboarding. And: we’ll be reviewing and providing feedback to each other’s work. Check all topics and schedule.

Vitaly’s Smart Interface Design Patterns Workshop, broken down into 5×2.5h sessions, with 100s of practical examples.

<!–

The workshop includes:

1500+ workshop slides with practical examples and action points
100 checklist cards on everything from carousels to web forms
Editable text file to adjust for your needs
Life-time access to the deck, updated regularly
Live, interactive workshop sessions
Hands-on exercises and reviews
All workshop recordings
Dedicated Q&A time for all your questions
A Smashing Certificate

–>

The workshop is delivered in five 2.5h long sessions with lots of time for you to ask all your questions. It’s for interface designers, front-end designers and developers who’d love to be prepared for any challenge coming their way.

You’ll walk away with a toolbox of practical techniques for your product, website, desktop app or a mobile app.

Print + eBook

eBook

Workshop + Checklists

{
“sku”: “checklist-cards”,
“type”: “Book”,
“price”: “450.00”,
“sales_price”: “375.00”,
“prices”: [{
“amount”: “450.00”,
“currency”: “USD”,
“items”: [
{“amount”: “449.00”, “type”: “Book”},
{“amount”: “1.00”, “type”: “E-Book”}
]
}, {
“amount”: “450.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “449.00”, “type”: “Book”},
{“amount”: “1.00”, “type”: “E-Book”}
]
}, {
“amount”: “375.00”,
“currency”: “USD”,
“items”: [
{“amount”: “374.00”, “type”: “Book”},
{“amount”: “1.00”, “type”: “E-Book”}
]
}, {
“amount”: “375.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “374.00”, “type”: “Book”},
{“amount”: “1.00”, “type”: “E-Book”}
]
}
]
}

$
375.00

$
450.00

Attend Online Workshop

Vitaly’s 5×2.5h online workshop, with the checklists PDF, live sessions and examples.

Checklists PDF Deck

{
“sku”: “checklist-cards”,
“type”: “E-Book”,
“price”: “10.00”,

“prices”: [{
“amount”: “10.00”,
“currency”: “USD”
}, {
“amount”: “10.00”,
“currency”: “EUR”
}
]
}

$
10.00

Free!

Get Checklists PDF

DRM-free, of course.

PDF.
Included with Smashing Membership.

Get the eBook

Download PDF.
Thanks for being smashing! ❤️

Thank You For Your Support!

We sincerely hope that the insights you’ll gain from our little goodies will help you boost your skills while also building wonderful, new friends. A sincere thank you for your kind, ongoing support, patience and generosity — for being smashing, now and ever. ❤️

More Smashing Stuff

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Paul and Alla are some of these people. Have you checked out their books already?

Click!

A practical guide on how to encourage clicks without shady tricks.

Add to cart $39

Design Systems

A practical guide to creating design languages for digital products.

Add to cart $39

Front-End & UX Workshops

Interactive, live online sessions, broken into 2.5h segments and a friendly Q&A.

Jump to topics →