Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

How To Create A Dramatic Vector Illustration

I have been drawing desktop wallpapers for Smashing Magazine's monthly collections for over a year now, and every time it's a very fun and challenging mission. In this article, I would like to share how I approach all stages of the process and provide general techniques for creating vector illustrations in Adobe Illustrator. Hopefully, you will find these techniques useful.

How To Create A Dramatic Vector Illustration

While referring to a particular drawing — the illustration for the "Understand Yourself" desktop wallpaper, which was featured in May's wallpaper collection this year — I'll also highlight key takeaways from my experience as an illustrator and designer.

Read more...

Sponsored Article A Quick Guide For Designing Better Buttons

Buttons are a common element of interaction design. While they may seem like a very simple UI element, they are still one of the most important ones to create.

A Quick Guide For Designing Better Buttons

In today's article, we'll be covering the essential items you need to know in order to create effective controls that improve user experience. If you'd like to take a go at prototyping and wireframing your own designs a bit more differently, you can download and test Adobe XD for free.

Read more...

Advertise with us!

CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout

Editor’s note: Please note that this article is quite lengthy, and contains dozens of CodePen embeds for an interactive view. The page might take a little while to load, so please be patient.

Layout on the web is hard. The reason it is so hard is that the layout methods we've relied on ever since using CSS for layout became possible were not really designed for complex layout. While we were able to achieve quite a lot in a fixed-width world with hacks such as faux columns, these methods fell apart with responsive design. Thankfully, we have hope, in the form of flexbox — which many readers will already be using — CSS grid layout and the box alignment module.

CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout

In this article, I'm going to explain how these fit together, and you'll discover that by understanding flexbox you are very close to understanding much of grid layout.

Read more...

What Everyone Should Know About The Process Behind App Design

I realized something the other day: I've been designing apps for nine years now! So much has changed since the early days and, it feels like developers and designers have been through a rollercoaster of evolutions and trends.

What Everyone Should Know About The Process Behind App Design

However, while the actual look and functionality of our apps have changed, along with the tools we use to make them, there are some things that have very much stayed the same, such as the process of designing an app and how we go through the many phases that constitute the creation of an app.

Read more...

Define Your Process To Master Time, Gain Clarity, And Take Control

How can you be sure you're moving your design problem in a straight line? That you're moving directly to a solution? From client to payment, from product to audience?

Define Your Process To Master Time, Gain Clarity, And Take Control

How certain are you of what the second step in your process is? Or the third? Or how long each will take, or if any should be removed? Are they all useful? Do any need improvement? Is each done with aim and purpose? How often do you fall-forward with momentum, rather than move with reason?

Read more...

Web Development Reading List #157: FlyWeb, Lying Charts, And Feedback Without Context

We all have visions and dreams. Whether it’s about our personal lives, our work, or about complex concepts that target issues which are hard to grasp. The important thing is to listen to your ideas, to write them down, and, if they wake strong feelings, to pursue them.

Web Development Reading List #157

It can be easy to achieve this, yet sometimes it’s not. A nice technique is to start small and take small steps instead of going 100% all-in or do nothing at all. We like to play with new things, we like to try out new technology, and our minds want to explore new paths — let’s do it!

Read more...

Breaking Out Of The Box: Design Inspiration (November 2016)

With autumn starting to show its full glory, there is really no reason to stay inside and drink your hot cacao. No, it's time to go outside and soak up all those warm colors nature has to offer, especially the vibrant golden-yellow leaves that can now be found almost everywhere you look.

Breaking Out Of The Box: Design Inspiration (November 2016)

It's the season of hazy mornings, and beautiful warm color palettes. In this month's collection, I've gathered a couple of illustrations and photos that express this seasonal feeling. The illustration presented above shows a brilliant way of how to spend your days before winter arrives.

Read more...

Sponsored Article The Golden Rules Of Bottom Navigation Design

Design is more than just good looks – something all designers should know. Design also covers how users engage with a product. Whether it's a site or app, it's more like a conversation. Navigation is a conversation. It doesn't matter how good your site or app is if users can't find their way around.

Facebook bottom tab bar iOS

In this post, we'll help you better understand the principles of good navigation for mobile apps, then show you how it's done using two popular patterns. When we examine the most successful interaction navigation designs of recent years, the clear winners are those who execute fundamentals flawlessly. While thinking outside the box is usually a good idea, there are some rules that you just can't break.

Read more...

Building Shaders With Babylon.js

Shaders are a key concept if you want to unleash the raw power of your GPU. I will help you understand how they work and even experiment with their inner power in an easy way, thanks to Babylon.js.

Building Shaders With Babylon.js

Before experimenting, we must see how things work internally. When dealing with hardware-accelerated 3D, you will have to deal with two CPUs: the main CPU and the GPU. The GPU is a kind of extremely specialized CPU.

Read more...

↑ Back to top