Tuesday, October 21, 2014

Smashing Newsletter #121: SmashingConf Oxford, SVG Tricks And... Restaurant Menus!

Smart front-end techniques, harmonic scales and better animations. Issue #121 Tuesday, October 21st 2014 182,114 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

When flowers start to bloom, well, it's a sign that SmashingConf is coming soon — in Oxford, UK, obviously. In fact, after a truly remarkable conference experience in 2014, we're coming back with SmashingConf Oxford 2015 to the legendary Oxford Town Hall, and we've got spectacular surprises prepared already (lasers, anyone?). Two conference days, one track, 5 workshops, 18 brilliant speakers and, of course, lots of opportunities for networking. Yep, it's going to be pretty, pretty good folks!

SmashinConf Oxford 2015
SmashingConf Oxford is coming back. First speakers are already announced.

Just like earlier this year, we're aiming for a very intimate, practical and valuable event for designers and developers who love their craft. No fluff, no basics, but instead challenging, useful insights that you can apply right away. Of course, first speakers are already announced, including Jake Archibald, Zoe M. Gillenwater, Tom Giannattasio, Natalie Yadrentseva, Richard Rutter and Peter Bilak. We've got a few hands-on Front-End + RWD workshops as well, you know.

Tickets will go on sale on Oct. 28th at 1:00 PM GMT. Only 350 tickets will be available, so be sure to mark the date as well as the time in your calendar and don't be late! Also, be ready for a few interesting surprises along the way. Oh my! See you there? ;-)

Happy October madness, everyone!
– Vitaly (@smashingmag)

Table of Contents

1. Prototyping Animation In… Keynote!
2. Helpful Plugins For Sketch Users
3. SVG Clever Tips And Tricks
4. Restaurant Menus, Redesigned
5. Discover Fonts And Colors With Every Tab
6. A Harmonic Scale For Animations
7. Keep Calm... And Attend A Smashing Workshop!

1. Prototyping Animation In… Keynote!

Prototyping animation can be a daunting task. Depending on your needs, the efforts to learn a designated animation program are disproportionately high, but did you know that one tool (one that may help to bring your interface ideas to life) is likely to be already installed on your computer? That tool is Keynote. Yes, that Keynote.

Prototyping Animation In… Keynote!

Even if you're skeptic about this unusual choice, we definitely recommend Andrew Cohen's insightful article "Prototyping Animation with Keynote". Impressed by how Andrew Haskin of Frog Design recreated Google's Material Design Video in Keynote, he gave the program a try himself and dug into its mechanics. Remarkable what you can achieve with a simple tool. (cm)

2. Helpful Plugins For Sketch Users

In search of the perfect design, there will be a lot of guaranteed chaotic exploring and trial and error. Sketches are great at this stage, but it's most often very hard to move them into structured and organized drafts. Many designers are turning to Sketch these days, and if you've been considering to start using the tool, too, Nathan Huening put together a great list of helpful plugins that will help you get started right away.

Helpful Plugins For Sketch Users

Also, Style Inventory by Florian Schulz is another great tool to help you tidy up, give you an overview of all used styles, and merge styles of similar layers into one. Make sure to click your way around — the repository also contains many other helpful plugins! (ml)

3. SVG Clever Tips And Tricks

There is so much you can do with SVG to make your website scalable and flexible, and it's impressive to see new techniques emerging almost every single week. Have you considered masking SVG animations and using clip-path (yes, that clip-path) to make the animations a bit more smooth? Did you know that you can modify the fill color just like you can do with icon fonts? What about Flexible SVG text, SVG clipping, including JavaScript in SVG and other smart SVG techniques?

SVG Clever Tips And Tricks

There are many practical applications that focus on SVG, and with the support starting from IE8 and Android 4.3, it's becoming pretty universal everywhere. What have you been able to create with SVG? Let us know via #smashingSVG and we'll feature your project in the next newsletter issue! (vf)


4. Restaurant Menus, Redesigned

What's more annoying than a badly designed menu at a fancy restaurant? Good restaurants shouldn't leave any details to chance, and this goes for restaurant menus in particular. How beautiful can restaurant menus actually get, you ask? Well, pretty beautiful, at least according to What's Cooking, a little overview of thirteen beautifully designed typographic restaurant menus by H & Co.

Restaurant Menus, Redesigned

If you're seeking for some restaurant menu inspiration, you'll be happy to discover Typography in Menu Pinterest Board. If you're just about to launch a new restaurant website, you might want to consider Happy Tables, a service to create and manage your own restaurant website. Why not design a restaurant menu for a restaurant in the neighborhood over the weekend, offer it to the owner for a decent meal and make the world a bit better around you? Alternatively, you could just letter for lunch as well. Now, there really is no reason for a dreadfully designed PDF of a restaurant menu to exist anymore! (vf)

5. Discover Fonts And Colors With Every Tab

Opening up a new browser tab: it's one of those things we do a dozen times a day without really paying much attention to. No surprise, it's nothing exciting at all, just a means to an end, right? However, from now on, you may get a bit more thrilled every time you hit that "new tab" button. How? Well, you should definitely check out Palettab and find out.

Discover Fonts And Colors With Every Tab

Palettab is a Chrome extension that surprises you with a new color palette and a matching set of fonts every time you open up a new tab. If you like one of the colors, you can simply click on it to copy the hex code to your clipboard. The same goes for the fonts that can be downloaded right from Google Fonts. A wonderful source for those little bits of inspiration that, who knows, might fuel big ideas. And if you'd like to try something different for a change, what about a random Wikipedia page to replace about:blank for good? (cm)

6. A Harmonic Scale For Animations

Everyone loves animations. They spruce up a design with that certain something, however, they also have to be treated with care and attention. If you consider a particular animation to be justified and relevant, this is a matter of personal taste, of course. Designer Scott Riley decided to be a lot more strict with animations and worked out his own harmonic scale, based on the approach which he also uses for typography. Unusual, but quite interesting indeed.

A Harmonic Scale For Animations

But why do we love animations in the first place? Probably because they can help to make certain interactions more effortless. Take swiping for example. Wouldn't it be convenient if we could peep into a thread in our messaging apps by simply swiping over a conversation cell? That's exactly the question that Mark Szulyovszky asked himself, and yes, it is possible. Mark has created a prototype that fills the existing gap. A great example of how animation can be employed meaningfully. (cm)


7. Keep Calm... And Attend A Smashing Workshop!

With so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That's exactly what our front-end and RWD workshops are all about: practical front-end + RWD workshops that will help you become better front-end developers and designers, today.

Keep Calm... And Attend A Smashing Workshop!

Half-Day Workshops In Bath, UK (Oct. 27):

Full-Day Workshops In Whistler, Canada (Dec. 9/12):

Upcoming Online Workshops (Nov/Dec):

NEW: Upcoming Workshop In NYC, USA:

Or, if you'd like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the costs — we'll find a fair price for sure. Get in touch — it's that easy!

New on Smashing Job Board

Here are the recent job openings published on our Smashing Job Board:

  • Freelance Web Designer at Inky Deals (Everywhere)
    We're looking for a freelance web designer who knows their way around design tools such as Adobe Photoshop and Adobe Illustrator, and had an eye for fine details.

  • Associate Designer at ESPN (Bristol, CT)
    We're looking for a designer who will work with the Art Director to provide support to the digital design group by creating production assets and necessary design documentation as well as contributing to the overall design process.

  • Senior UI Developer at FetLife (BitLove Inc.)
    We're looking for a open-minded kink-friendly Senior UI Developer who can continuously refactor HTML and CSS code and join our team soon.

Smashing Highlights (From Our Archive)

  • Email Newsletters Worth Subscribing To
    Staying on top of the most recent developments in your craft takes time, especially when you have to scan websites daily for articles and news worthy of your attention. Quality newsletters do the job for you.

  • Writing Systems And Calligraphy Of The World
    The beauty of typography has no borders. While most of us work with the familiar Latin alphabet, international projects usually require quite extensive knowledge about less familiar writing systems from around the world.

  • Freebie: Exo 2.0, A Contemporary Geometric Sans Serif Font
    Back in the days when he was a student, Portuguese graphic and type designer Natanael Gama started to play with glyphs — as a way to discover typography. Doodling around, he created Exo, a font which he released for free in a Kickstarter project.

Recent Articles On Smashing Magazine

Workshop article image credits: Elisabeth Irgens.

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Email: newsletter@smashingmagazine.com
Follow us on Twitter Join us on Facebook

The authors are: Cosima Mielke (cm), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser

No comments:

Post a Comment