Tuesday, June 23, 2015

Smashing Newsletter #139: Free Keynote Template and Fancy Pie Charts

Free Keynote templates, tools and eye candy. Issue #139 Tuesday, June 23rd 2013 181,055 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

Finally: Smashing Book 5: "Real-Life Responsive Web Design" is ready: it's available for download, and it's being printed this very moment. If you've pre-ordered the book already, you should have received a download link to the eBook via email (if not, please drop us a quick email at help@smashingmagazine.com with your order ID and we'll sort it out!). Printed books will be shipped July 10th. Thank you for your kind support from the very bottom of our hearts.

Smashing Book 5: Now Finally Finished

You know this intoxicating moment when you feel that you've done something just right? Well, creating the book was quite a journey, and we're very sorry about the slight delay, but we do know for sure: the waiting will be worth it. In fact, we are very proud of the result, with a number of time-saving, practical techniques that you can apply to your real-life responsive websites right away.

The book is thick and smashing in every possible way — with 584 pages hardcover, chapters by Dan Mall, Zoe M. Gillenwater, Andrew Clarke, Sara Soueidan and John Allsopp among others, and cover design by Jessica Hische. If you don't have it yet, get it right away — we're pretty damn sure that you won't be disappointed.

— Vitaly (@smashingmag)


Table of Contents

1. Pie Charts With Conical Gradients in CSS
2. Efficient Icon Design Workflow
3. Free Keynote Templates: For Motion Graphics and Prototyping
4. Cleaning Up Unused CSS Selectors
5. Freebie: Do, A Comprehensive App UI Kit
6. One Icon A Day
7. CSS Debugging Tools
8. What Kind Of Person Are You?
9. Keep Calm And Attend A Smashing Workshop
10. Recent Articles On Smashing Magazine
11. New On Smashing Job Board
12. Smashing Highlights (From Our Archive)

1. Pie Charts With Conical Gradients in CSS

So how would you create a flexible pie chart without unnecessary dependencies, libraries and frameworks? That's the question that Lea Verou asked herself. Obviously you don't want to create a bitmap image — instead, you'd like to be able to adjust the pie chart easily with a few keystrokes in HTML. Well, we could generate and transform pseudo-elements but it would end up with verbose code which would be quite difficult to maintain.

Pie Charts With Conical Gradients in CSS

We could use SVG but a straightforward way of exporting the image from Illustrator would generate a plethora of mysterious paths and wouldn't be particularly easy to adjust once percentage values change. There is another way: applying stroke-dasharray property with a simple SVG circle. The simplest way, however, would be to use conical gradients in CSS, but they aren't supported just yet (and let's make sure they will be!), although a polyfill is already available. So we don't have to rely on patterns and libraries for pie charts — CSS is powerful enough to solve this problem, too. (vf)


2. Efficient Icon Design Workflow

Designing icons isn't easy, but even if you know your way around visual design tools, you might end up spending hours and hours adjusting, refining and preparing assets. Could you be more efficient than you already are? Perhaps. That's when learning how other designers work could come in handy.

Efficient Icon Design Workflow

If you're looking for a handy guide to take you step by step through icon creation, making full use of vector abilities, masking, and constructive solid geometry, then Marc Edwards is riding to your rescue. Efficient Icon Design Workflow covers many important details, from snapping settings and creating a custom toolbar, to styling and exporting in Illustrator, which should help all aspects of your workflow, from the production a single colour pictogram to a highly detailed app icon. You will also learn a thing or two about dimensions, settings and helpful yet hidden Illustrator tools. Worth reading! (cc)


3. Free Keynote Templates: For Motion Graphics and Prototyping

When it comes to design tools, we have pretty strict perceptions of which tool is the best fit for which purpose. However, sometimes it's the unexpected choices that produce great results. Have you ever considered the Mac Keynote app for motion graphics, for example? If this sounds like a weird choice to you, you might want to take a look at what UI designer Linda Dong created. She has recently released a short, animated motion graphics video made entirely with slide transitions in Keynote. And, well, the result is impressive — and available for free download, too.

Free Keynote Templates: For Motion Graphics and Prototyping

Another example that proves Keynote can be a solid tool to bring your ideas to life — let's say for testing or prototyping purposes — is Andrew Haskin's take on the well-known Google material design video which he recreated entirely in the Mac app. The Keynote file is available for free download, too. Two fascinating examples that remind us to think outside the box more often. (cm)


Advertisement
Ad


4. Cleaning Up Unused CSS Selectors

We know how it works: requirements change, layouts change, the codebase changes — what remains, however, is unused code, which has to be reviewed and refactored every now and again. CSS is as prone to this as any other piece of code. However, you don't need to do everything manually — going line by line, detecting unused code and cleaning up the style sheet. There are tools to help you (of course).

Cleaning Up Unused CSS Selectors

SymDiff, available for CSS preprocessors (Sass, LESS) and templating languages (HTML, Jade, Handlebars, JSX), reports any differences between the classes used in CSS and in your templates. Helium CSS scans a site and shows unused CSS, and so do UnCSS and Deadweight. You can also use Dust-Me Selectors Firefox plugin, Devtools ("Audit Present State") and other tools to keep your style sheets clean and neat. There's no longer any excuse to leave unused CSS in your style sheets — and it isn't that difficult to automate this little optimization into your workflow either! (vf)


5. Freebie: Do, A Comprehensive App UI Kit

Designing an app UI from scratch is a time-consuming process. To make it less tedious, the makers of the prototyping and collaboration platform InVision have put together a versatile, and free, UI kit: Do.

Freebie: Do, A Comprehensive App UI Kit

Do compiles 130 screens, 10 themes, and more than 250 components — all of them compatible with Photoshop and Sketch, remixable and Retina-ready. The kit's clean and colorful design and a wide variety of assets ranging from login screens to profiles, timelines, settings, and navigation, offer countless possibilities for any kind of app. Handy! (cm)


6. One Icon A Day

Do you have a creative challenge? A personal project, something you create for the sake of creating, to get your creative juices flowing, or just to relax after a hard day at work? Designer Marko Stupić has set himself a quite challenging — and inspiring — mission: to create one icon a day.

One Icon A Day

The result is a colorful portfolio of random tidbits: everyday objects, landscapes, food, animals, superheroes. Each icon reflects Marko's signature style, which can be quite bold, but also surprises with fine and delicate details at times. Pure eye candy. (cm)


Advertisement
Ad


7. CSS Debugging Tools

Nobody loves debugging, but it's necessary and there is just no way around it once an unexpected issue occurs. CSS debugging has become a bit easier with a little bookmarklet by Yahoo, DebugCSS. The tool loads on an existing page and highlights potentially broken, malformed or legacy code which is likely to be either invalid or go against best practices, or cause problems in the short or long term.

CSS Debugging Tools

Errors are marked with three different colours, with yellow indicating warnings, and red calling for immediate action. Simply drag the bookmarklet to the toolbar and get a handy review of the quality of your code. Perhaps debugging doesn't have to be painful after all. You can also use Pesticide or CSS Layout Debugger to get a better understanding of why your layout breaks. (ml)


8. What Kind Of Person Are You?

Each of us is different, but we all also share some common characteristics that define who we are and how people around us perceive us. For example, do you use one browser window with many tabs, or many browser windows with a few tabs? Do you watch your TV shows on a TV or on your laptop? Do you slice a sandwich horizontally or vertically or diagonally? And most importantly, do you set up just one alarm on your phone or a number of alarms to make sure that you don't oversleep?

What Kind Of Person Are You?

2 Kinds Of People collects these little curiosities about human behavior — they are remarkably precise, and often quite hilarious. A lovely little Tumblr blog worth following, or perhaps even submitting an idea to about the little differences that you just discovered in people around you. Now it might get a little bit more obvious why people don't understand each other at times — nicely shown by illustrations in the tumblog. So, what kind of person are you? (vf)


9. 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 and RWD workshops that will help you become better front-end developers and designers, today.

Keep Calm And Attend A Smashing Workshop

Upcoming Online Workshops:

Upcoming Smashing Workshops and Meet-Ups:

You can also check more workshops coming up later this year. 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 cost — we'll find a fair price for sure. Get in touch — it's that easy!

Workshop image credits: Marc Thiele


Advertisement
Ad


10. Recent Articles On Smashing Magazine


11. New On Smashing Job Board

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

  • Product Designer at Citrusbyte (Los Angeles, CA)
    Citrusbyte is looking for an experienced web and mobile application designer who will be designing products with complex user interactions and data presentation.

  • Vice President UX at Mastercard (New York, NY)
    You will lead the design of consumer-facing products across a product line in the emerging payments space in close partnership with product and technology team members.

  • Web Designer at Mary Baldwin College (Staunton, Virginia)
    Mary Baldwin College seeks a web designer with strong technical skills, aesthetic panache, and a passion for how best to use online channels to communicate brand, reach a target audience, and inspire engagement.


12. Smashing Highlights (From Our Archive)

  • Freebie: Boldons Icon Set (45 Icons, PNG, AI)
    How often do you find yourself searching for lovely, friendly, well-designed icons that would fit well into a rather informal design atmosphere? These icons are completely free for commercial use as well as in your personal projects.

  • Repurposing Photoshop For The Web
    What if Photoshop were used as a high-fidelity sketch pad? Perhaps it's time to revisit how we use Photoshop today — its role has changed, and for responsive design we have to be prepared to reinvent Photoshop for ourselves.

  • An Exploration Of Carousel Usage On Mobile E-Commerce Websites
    Using real data, this article aims for a better understanding of the current argument against carousels and whether they really deserve the reputation they've gained. I'll break down the arguments point by point and see if our data lines up with those expectations.


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: Cat Clark (cc), 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