Product Design Unification Case Study, Part 2: “Burger-Driven” Framework

In the first part of the case study about Mail.Ru Group product design unification, I described our first approach — a mobile web framework. Aside from creating a unified visual style and interaction principles for a dozen services, we've also transformed our design process from the classic "prototype → design mock-up → HTML → implementation" approach for every screen, to a modern and more efficient framework-based approach.

Product Design Unification Case Study, Part 2:

In this second part I'll show how we have improved the same technology to embody larger versions of these products and made our "Bootstrap on steroids" more powerful. In the spring of 2012, our business unit acquired 11 content-based projects: Auto, Events Guide, Health, Horoscopes, Kids, Lady, Moto, News, Sports, TV, and Weather. Many of them are very successful in their market niche in Russia; however, they each have their own history, often with outsourced designs that led to inconsistencies.

Read more...

Freebie: A Workspace Illustrations Kit (AI, PNG, PSD, EPS and SVG)

Today we're happy to release yet another freebie: a set of 60 lovely workspace illustrations of items that many web and graphic designers use every day: tablet and desktop computers, Apple Watches, cameras, Moleskine notebooks, headphones, pens, pencils, pairs of glasses — even coffee cups and cookies!

The complete set of illustrations

The set has been designed by Anastasia Kolisnichenko, from Minsk, Belarus, and released for free for Smashing Magazine's readers. Feel free to use all these elements and others for your projects. Grab what you need for a poster or website. You can customize everything you want: stroke width, size, color, shape — everything.

Read more...
Advertisement Advertise with us!

Quantity Ordering With CSS

Here is your mission, should you choose to accept it: create a table of items. Each item should span a third of the content area, with the fourth item starting on a new row, much like floats. However, a particular item must always display the price at the end of the first row.

Quantity Ordering With CSS

So if there are only two elements, the price element would be second. But if there are more than three items, the price would be the last element in the first row. You might assume that JavaScript would be the best solution — just loop over the items, and if there are more than three, update the styling. But what if I told you could do it with CSS alone?

Read more...

An In-Depth Guide To Launching Your Own Podcast

Podcasting has experienced a renaissance in the last couple of years. According to RawVoice, which tracks 20,000 shows, the number of unique monthly podcast listeners has tripled to 75 million, up from 25 million five years ago.

An In-Depth Guide To Launching Your Own Podcast

Suffice it to say, now is a great time to start a podcast. It’s an authentic and intimate way to demonstrate authority in your niche and to grow your client base. When starting out our own podcast, I was a bit lost with the technical logistics of actually setting up the podcast; figuring out the best approach required a lot of searching and digging.

Read more...

Become A Command-Line Power User With Oh-My-ZSH And Z

The command line is increasingly becoming a part of every web developer's workflow. With tools like Grunt, Gulp and Bower leveraging the increase in productivity that comes with working in the command line, we are seeing it become a much more friendly and comfortable place for beginners and experts alike.

Terminal Theme: Agnoster

This article provides insight into some of the best tools to use in your day-to-day workflow in the command line and gets you started with a totally customized setup.

Read more...

A Simple Workflow From Development To Deployment

In this article I’ll be taking a look at how to build a simple yet robust workflow for developing sites that require PHP and MySQL. I’ll show you how to use Vagrant to create and run a web server on your own computer, with the version of PHP your live site runs. I also demonstrate a process for using a hosted service to deploy files in a robust way to your live server.

A Simple Development to Deployment Workflow

This article is for you if you currently have no way to test your PHP and MySQL sites locally, or use something like MAMP or XAMPP. The second half of the article will help you move away from uploading files using FTP to a process that is far less likely to cause you problems.

Read more...

Sideblog Material Design Icons, Goodies and Starter Kits

It's always great to have a little toolbox with just the right tools waiting for you when you need them. What if you are about to start working on a new project which should apply the material design language introduced by Google last year? What if you had just a good starter kit with everything you need to dive into the creative process without being distracted by routine tasks?

Material Design Principles

We're here to have your back — with a little selection of handy goodies, icons, templates and tools to help you get off the ground faster. This post is one of our first shorter "Sideblog" pieces where we highlight some of the more useful and helpful snippets and goodies every now and then. We'd love to hear your feedback in the comments to this post.

Read more...

“Web Design Is Dead.” No, It Isn’t.

Every now and then we see discussions proclaiming a profound change in the way we design and build websites. Be it progressive enhancement, the role of CSS or, most recently, web design itself being dead. All these articles raise valid points, but I'd argue that they often lack objectivity and balance, preferring one side of the argument over another one.

Web design isn't dead; it's up to us to find ways for making the web more exciting and delightful.

These discussions are great for testing the boundaries of what we think is (or is not) possible, and they challenge how we approach our craft, but they don't help us as a community to evolve together. They divide us into groups and sometimes even isolate us in small camps. Chris Coyier has published a fantastic post recently covering the debate on the role of CSS in light of growing popularity of React.js, extensively and objectively. That's the quality discussions we need, and that's what keeps us evolving as a growing and maturing community.

Read more...

Beyond The Boring: The Hunt For The Web’s Lost Soul

Has web design lost its soul? And is responsive design to blame? These questions, posed by my friend and colleague Noah Stokes, are provocative to say the least. After all, the responsive web has made browsing on our ever increasing collection of Internet-connected screens not only possible, but enjoyable.

Beyond The Boring: The Hunt For The Web's Lost Soul

Our priority as designers must be to solve problems; perhaps more than anything else, this is what we do. Responsive web design is a fantastic solution to the problem of creating virtual experiences that adapt to different devices. There are other problems out there that we're called on to solve, though, not least of which is to make content of all kinds appear interesting and engaging. A page of plain text becomes a beautiful blog post, a mess of unconnected JPGs becomes a professional portfolio.

Read more...

Freebie: Smashicons Icon Set (500 Icons, 4 Styles, AI, PSD, Sketch)

Today, we're happy to release a very large icon set: the freebie contains 500 icons in four editable variants: outlined, solid, webby and flat, covering all sorts of various categories. The icons allow you to customize the stroke width and style, not to mention that you can change the color of the elements. They’re carefully crafted on a 60px grid which gives each icon consistency and crispness on all displays.

Thumbnail

Smashicons come in several styles. The AI and Sketch formats come in four styles: outline for mobile use; solid for hover state; webby for web; and flat for any creative project. The PSD format comes in two styles: outline for mobile use, and solid for hover states.

Read more...

↑ Back to top