Issue #86 | Tuesday, June 11th 2013 | 156,423 subscribers | Previous issues
Dear Friends,
You've probably already heard — the Smashing Conference is on its way! Two single-track conference days, three full-day workshops, 16 excellent speakers, and only 300 available seats. We'll be announcing more information via @smashingconf in the upcoming weeks — be sure to stay tuned via the SmashingConf 2013 website, too!
We'd be honoured to welcome you in our home town Freiburg, on September 9–11th 2013, at the foot of the legendary, beautiful Black Forest in Southern Germany. Let us know whether you'll be attending via Twitter using the hashtag #smashingconf!
We look forward to meeting you,
The Smashing Team
Table of Contents
01. CSS Tube Map
02. A Converter Tool For Multiple Mobile Densities
03. Branding Lessons From The Master
04. Hide And Show Passwords On Demand
05. Merging Loading Indicators To Improve UI
06. ASCII Art Is Back
07. 100 Cameras In Pixels
08. Smashing Highlights (From Archives)
09. New on Smashing Job Board
10. Recent Articles On Smashing Magazine
1. CSS Tube Map
The iconic Tube Map of the London Underground network can be found on an infinite number of souvenir articles and has also inspired many artists and designers. One of these is CSS Tube Map, which displays a replica built in HTML5 and CSS3 (and a tiny bit of jQuery). It uses no images so even the symbols are styled and arranged with CSS.
Each tube line consists of an unordered list, stations and connections (including name and symbol) are list items. The project by John Galantini was completed in five weeks, in about 120 hours of his spare time. All elements are positioned absolutely. It's definitely not be the most practical CSS example to be used in your projects, but the effort is worth commending. Be prepared, though: you probably have never seen so many... creative HTML elements on a website. (ml)
2. A Converter Tool For Multiple Mobile Densities
Displays with high densities have been around now for some time and they definitely came to stay. Although this development is greatly enhancing the quality of our screens, at the same time it can create some headache for designers and developers who are determined to provide a great experience for all of their customers using every type of screen resolution. Keep in mind that it is not just about Retina and non-Retina displays; Android devices have evoled from low density, ldpi, all the way to extra high density, xhdpi, as well.
Travis from Teehan-Lax has set out to make this task easier. In his article on "Designing For Multiple Mobile Densities", he explains the complexity and the variety of high density displays (just in case you haven't learned that much about the issue so far). It's time to dismiss your calculator! Simply type in height and width of any density and instantly see the dimensions of the other densities. It currently supports the major density groups: non-retina/mpdi, hdpi, retina and xhdpi. (ml)
3. Branding Lessons From Google
How exactly does a brand like Google become so strong? What are the secrets behind creating a memorable, consistent brand identity? And in general, how does Google, as a large company, shape their brand? If you'd love to find out, then lucky you! You now have the chance to take a peek at the principles that Google's designers apply when they create their icons, logos and illustrations — the Google Visual Assets Guidelines - Part 1 and Part 2.
Geometric shapes, front facing and pixel-perfect icons – these are just some of the formulas that you'll come across in Google's lesson on brand shaping. You'll also be able to see some very interesting examples of how-to's and how not-to's, and even find out about fine details such as Google's icons proportions and color palette.
The resource is essentially a case study by Creative Lab, a design agency that has created a set of guidelines which help Google's designers and vendors to produce high-quality work and also helps strengthen Google's identity. A very concise and informative breakdown of guidelines which all serve to maintain Google's branding concept of visual coherence. (ea)
Advertisement
4. Hide And Show Passwords On Demand
We usually take it for granted that whenever we enter a password the only thing we get to see are little dots instead of characters. Although this can be a a real struggle, especially on a mobile device, most designers still stick to that convention. But perhaps the benefits of this default aren't as high as we thought. As Luke Wroblewski documented last November, masked passwords increase login failures while not providing any further security. So what to do then? A nice alternative for starred out passwords comes from Tyler Sticka and the team at Cloud Four: hideShowPassword.
Once implemented (both jQuery and Zepto plugins are available), you can let your users decide whether they want to have their password displayed or not during the login process. What's really nifty about hideShowPassword is the "innerToggle" feature showing a hide/show control inside the input field. You can style it as you like, with some text or even a symbol. The plugin is waiting for you on GitHub. (cm)
5. Merging Loading Indicators To Improve UI
You know the drill: A user patiently fills in a Web form, submits the data, and finds herself staring on a grey lightbox with a progress bar, or perhaps a semi-transparent circle that looks a bit like real-time auto-update. What happened to the data? Is it being submitted? Submitting data is a very crucial moment in the user experience, so leaving users wondering what's going on probably isn't a good idea.
Perhaps we can do a bit better than that. A perfect example is Hakim El Hattab's Ladda, a UI concept which merges loading indicators into the action that invoked them. This means that when a user clicks on a submit button, the button itself changes, providing users with an immediate feedback upon submit. The tweak might be very subtle, but it does make the experience a bit smoother. Definitely worth bookmarking! (vf)
6. ASCII Art Is Back
Have you ever stumbled upon an interesting Easter Egg waiting for you in the source code of a website? Well, this is probably not something you should do in production code, but if you do want to give your code some personality, why not try out something... different for a change? Let's say... adding ASCII art welcome mats for HTML on your own blog or side project?
WelcomeMat is a resource dedicated to just that. You can copy and paste ASCII art into your code, and you can also contribute your own ASCII mats. The project came out of an experiment by Zac Halbert on creating a responsive prototype using Jekyll, Foundation and SASS/Compass. And according to him, he learned a lot along the way.
Advertisement
7. 100 Cameras In Pixels
Take a guy whose desire is deeply rooted in nostalgia and who has a passion for making pixel art and put one and one together. You will get something like The Camera Collection. You got to be serious to come up with these 100 pixelated camera illustrations. You got to be Bill Brown.
Bill is a guy who makes long, rambling videos of getting himself a haircut every year. Besides, he's a graphic and Web designer who must be more than loving what he's doing. You can easily kill hours scrolling through all his amazing creations. Besides his camera collection, he also made a New Orleans houses and 8-bit videogames pixel collection. All of them are free to download under a Creative Commons license. You can do anything with them, but please give Bill credit somewhere. (ea)
8. Smashing Highlights (From Archives)
-
Principles Of Minimalist Web Design
Minimalism is achieved by reducing a design to only the most essential elements. Expressions of minimalism span multiple disciplines, as well as other art forms such as music and literature. For website designers, though, minimalism can be intimidating and difficult to master.
-
The Process Behind Good Illustration
"Art" is something philosophers have spent centuries trying to define, sadly with no satisfactory result (a debate that is far beyond the scope of this article). But illustration, while it covers a broad range of image-making, does have very distinct meanings, and it is very different from just artwork.
-
Applying Interior Design Principles To The Web
Web, industrial, interior… You name it and there are designers for it. We're all trained in our particular areas (as we should be), but it would do us some good sometimes to look beyond our borders for new approaches to design problems. This article covers several interior design principles and how to apply them to Web design.
9. New on Smashing Job Board
Here are the job openings published recently at our very own Smashing Job Board:
-
Lead Front-End Developer at Mighty Engine (Philadelphia)
We are a well-established, Old City-based marketing communications agency seeking an experienced developer to lead the web department of our creative team.
-
Mobile Product Designer at GetYourGuide (Berlin, Germany)
We're looking for smart, inspired people to join our international team in the heart of Berlin. If you want to take a front seat in shaping the trajectory of a young company, GetYourGuide is the place for you!
-
Interactive Producer at National Abortion Federation (Washington)
NAF is seeking a full-time, in-house, creative, dynamic, and tech-savvy individual to serve as our Interactive Producer. This individual will combine a strong background in web design with a broad understanding of new technologies and online communications.
10. Recent Articles On Smashing Magazine
