Smashing Newsletter: Issue #100

Advertisement

This newsletter issue was sent out to 171,629 newsletter subscribers on Tuesday, January 7th 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

100 newsletter issues, twice every month, published and sent out tirelessly over the last two years. What started as a humble little project back in 2011 is now a part of our editorial, a part that we wouldn’t want to miss. Finding and featuring all these little side projects, techniques, resources and crazy ideas is so rewarding and so much fun, so of course we’re just getting started! Do you have a project to share? Tweet us any time: we do read every single tweet that we receive, you know.

We also like conferences, but you know that already, too. So are you ready for something… special? Alrighty! We are coming to New York, baby! SmashingConf New York2 will take place on June 17th–18th 2014. As usual, we will have one track, 2 full days, 18 brilliant speakers and 350 truly smashing attendees. Of course, with fair and affordable ticket prices.

The tickets will go on sale at 2pm CET on January 28th, 2014. Since we have only 350 seats available, make sure to set your alarm clock! We also have a Smashing Book Mystery3 (ready for Round 2, folks?) coming up on the front page at exactly the same time. And the prize for the winner will be a two-way-flight to NY, hotel and a conference ticket. Sounds smashing enough for you? Well, pull out that alarm clock, will you?

This is going to be quite a year. We’ve got many surprises coming your way in the next few months, but we never said it wasn’t going to be fun. Keep that cup of coffee or tea ready every second Tuesday and stay tuned with the Smashing Newsletter4, folks! ;-)

— Vitaly (@smashingmag)

Table of Contents

01. Freebie: Infinity Icon Set, A Journey Into Space5
02. Designing In The Open6
03. There Is No Average Joe7
04. Shape Hover Effect With SVG8
05. Mobile Devices + Twitter + World9
06. Screencasts For Web Developers10
07. Tickets Deserve A Redesign, Too11
08. Conferences All Over The World12
09. Let’s Talk About In-house Workshops!13

141. Freebie: Infinity Icon Set, A Journey Into Space

Space. The Universe. Infinity. Do you tend to get fascinated by these terms and the stories based on them? Well, perhaps we can bring a little bit of the outer space into your earthly projects. Infinity Icon Set15 features spaceships, satellites, asteroids and solar system planets. This free set was designed by Adam Katyi for To Infinity And Beyond16, a space art exhibition of 40 Hungarian graphic designers and painters currently on display in the Budapest Planetarium.

Freebie: Infinity Icon Set, A Journey Into Space17

This pictogram-dingbat font allows you to create your own space story, i.e. the lowercase and capital latin letters are the main space icons. You can find the whole solar system once you start typing in numbers. Please note that this freebie is meant for non-commercial use and can be downloaded only if you pay with a tweet or Facebook post. The icon set will soon be updated with new characters, so make sure you stay tuned! (ea)

19182. Designing In The Open

It’s sad but it’s just the way it is: in corporate settings, it’s quite common to sign NDA agreements before starting a new project. So in the end, you can’t share what you’ve learned, and often you can’t really reuse the techniques and tools you’ve developed. But have you actually tried to convince the client to design “in the open” instead?

1918Designing In The Open20

There are quite a few projects that involve the open source community into the projects, presenting the source code on GitHub or just explaining the process and releasing the development files for everybody to download. Gov.uk Frontend21 provides the full source code of the Gov.uk website on GitHub; The Guardian’s responsive website on GitHub22 is available as well; and both BBC23 and National Geographic24 provide many tools, too. In fact, Brad Frost makes a compelling argument25 for designing in the open and provides some ideas on the benefits of the approach and how to convince customers to follow this idea. Why not try it out? (vf)

263. There Is No Average Joe

Who do you design for? Do you rely on archetypes to build the best user experience possible, or do you build around an average user, let’s say a 34-year-old woman with 2.3 children? The question leaves a lot of room for discussion. A thought-provoking read on this controversial subject is Susana Gonzalez Ruiz’s article “Designing for the extremes (or why your average user doesn’t exist)27“.

There Is No Average Joe28

Designing for an average user, so the idea of the article, creates dysfunctions because the “average” is nothing but a formula, a result of statistics that has little to do with real people. A possible solution to increase the experience for every user would be to design for the extremes first so the rest will take care of itself. Very interesting thoughts that have already fueled some discussions on Twitter29. (cm)

31304. Shape Hover Effect With SVG

Do you remember those dark times when we used JavaScript to mimic hover effects onMouseOver? By using CSS, we finally found a way to easily adjust any CSS property on :hover, but we still couldn’t properly play around with shapes. However, if you combine CSS, SVG and a bit of JavaScript, you can create any kind of hover effect using any shape defined in SVG.

3130Shape Hover Effect With SVG32

In their article on Shape Hover Effect With SVG33, Mary Lou shows how to use the Snap.svg library for just that. The idea is to create a SVG with one path that represents the shape background for some caption and to morph that path into another one on hover. It doesn’t sound very difficult, and it really isn’t. The only issue is that you still need to use JavaScript for the hover effect—which is suboptimal. But perhaps that’s something for you to play with for your next project? (vf)

345. Mobile Devices + Twitter + World

Here’s one for you: collect data from more than 280 million tweets posted from mobile phones, analyze this data, study the geographic location, visualize it on a map and explore geographic usage patterns in unprecedented detail. That’s exactly what Mapbox Twitter Gnip35 has done.

Mobile Devices + Twitter + World36

The visualization displays which mobile phones were used at a specific location, with Android, iPhone and Blackberry users mapped onto the map with corresponding dots. Apparently, iPhone is used a lot in urban areas and city centers while Android is more popular in rural areas. (vf)

38376. Screencasts For Web Developers

You can learn a lot from an article or a detailed tutorial, but if you really want to understand a certain technology or tool, it’s great to sit next to someone who has a wide understanding and is able to answer all of your questions. Even better: you can sneak a peek behind their workflows, too!

3837Screencasts For Web Developers39

Well, perhaps you shouldn’t be annoying to your colleague all of the time, so why not get a cup of coffee, biscuits and check a video screencast instead? Chris Coyier’s screencasts40 often feature interesting workflows and tools, e.g. Build Podcast41 is all about tools, libraries and techniques. Breakpoint Show42 is dedicated to developer tools and time-saving techniques. Any other suggestions? Let us know on Twitter! (vf)

44437. Tickets Deserve A Redesign, Too

Matthew Lew loves concerts and is among one of the millions of people who buy tickets from Ticketmaster. Being a graphic designer, Matthew couldn’t help but ponder about the design of the tickets. What he noticed was quite alarming. Apparently, in 2013, Ticketmaster tickets looked pretty much the same like they did in 1979. According to Matthew, they looked like code spat out by a faceless robot.

4443Tickets Deserve A Redesign, Too45

However, robots aren’t the ones who buy and read these tickets. So where on earth (or on the ticket, to be more precise) is the human element? Matthew decided to present a comprehensive redesign46 of the tickets which you may actually want to consider for real. If you’re all warmed up now and are looking for other problems to solve, try redesigning a currency47 or even airplane tickets48! (ea)

50498. Conferences All Over The World

Hurry, the new year has already begun! Just like every year, there are a huge number of Web design events and conferences that will be held… so, how do you plan on keeping track of all of them?

5049Conferences All Over The World51

Alex Cowles was having trouble keeping track just like most of us, and has gone ahead and created a simple calendar that seemed to be the best solution: Conference Calendar52. This way it’s a little easier to see what’s on and when. We should certainly meet at one of them, don’t you think?! (kv)

54539. Let’s Talk About In-house Workshops!

We love fixing existing problems. Is your company struggling with legacy systems or a suboptimal front-end workflow? Well, perhaps we can help. We’d be more than happy to organize in-house workshops in your company, tailored specifically to your needs.

5453Let's Talk About In-house Workshops!55

Sketchnotes from a Smashing Workshop (sketched by Elisabeth Irgens56).

We’re flexible about the topics and format of the workshops, but what we really want is to help you solve your actual problems. What about responsive design, advanced front-end techniques, performance optimization, UX, conversion rate optimization, sketching and wireframing, or even debugging?

If you’d like to have an in-house workshop, just get in touch with Vitaly57 and shortly describe what problems you’d like to solve. Don’t worry about the pricing either, we’ll find a fair pricing for sure. Yes, it’s that easy! (vf)

The authors in this newsletter are: Esther Arends (ea), Cosima Mielke (cm), Kristina Vogt (kv), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://smashingconf.com/ny-2014/
  3. 3 http://www.smashingmagazine.com/the-smashing-book-mystery-have-you-figured-it-out-yet/
  4. 4 http://www.smashingmagazine.com/the-smashing-newsletter/
  5. 5 #a1
  6. 6 #a2
  7. 7 #a3
  8. 8 #a4
  9. 9 #a5
  10. 10 #a6
  11. 11 #a7
  12. 12 #a8
  13. 13 #a9
  14. 14 #
  15. 15 http://www.hungarumlaut.com/typefaces/infinity.html
  16. 16 http://infinityexhibition.tumblr.com/
  17. 17 http://www.hungarumlaut.com/typefaces/infinity.html
  18. 18 #
  19. 19 #
  20. 20 http://bradfrostweb.com/blog/post/designing-in-the-open/
  21. 21 https://github.com/alphagov/frontend
  22. 22 https://github.com/guardian/frontend
  23. 23 https://github.com/BBC-News
  24. 24 https://github.com/natgeo
  25. 25 http://bradfrostweb.com/blog/post/designing-in-the-open/
  26. 26 #
  27. 27 http://sugoru.wordpress.com/2013/07/14/designing-for-the-extremes/
  28. 28 http://sugoru.wordpress.com/2013/07/14/designing-for-the-extremes/
  29. 29 https://twitter.com/smashingmag/status/418783037959065600
  30. 30 #
  31. 31 #
  32. 32 http://tympanus.net/Tutorials/ShapeHoverEffectSVG/
  33. 33 http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/
  34. 34 #
  35. 35 https://www.mapbox.com/labs/twitter-gnip/brands/#11/52.2377/4.6259
  36. 36 https://www.mapbox.com/labs/twitter-gnip/brands/#11/52.2377/4.6259
  37. 37 #
  38. 38 #
  39. 39 http://css-tricks.com/video-screencasts/
  40. 40 http://css-tricks.com/video-screencasts/
  41. 41 http://build-podcast.com/
  42. 42 https://www.youtube.com/watch?v=ktwJ-EDiZoU
  43. 43 #
  44. 44 #
  45. 45 https://medium.com/this-could-be-better/271977289b41
  46. 46 https://medium.com/this-could-be-better/271977289b41
  47. 47 http://dollarredesign.wordpress.com/
  48. 48 http://passfail.squarespace.com/
  49. 49 #
  50. 50 #
  51. 51 http://confcal.org/
  52. 52 http://confcal.org/
  53. 53 #
  54. 54 #
  55. 55 https://shop.smashingmagazine.com/workshops/
  56. 56 https://twitter.com/sortenke/status/376690657689366529
  57. 57

↑ Back to topShare on Twitter

The Smashing team loves high-quality content and cares about the little details. Through our online articles, books and eBooks and Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising
  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top