All of a sudden it became book-writing season. It began in August when I started revising my second book, "Principles of Package Design". Apress had contacted me about adopting it, and they didn't want to change a lot about it. However, the book was from 2015 and although I had aimed for it to be "timeless", some parts needed an update. Furthermore, I had happily pressed the "Release" button back then, but it's the same as with software development: the code you wrote last year, you wouldn't approve of today.
Because Apress has their own pipeline for manuscript to book conversion, I had to take the original Leanpub-flavored Markdown manuscript, export it to html, then copy it into Mac Pages, and finally export it as a Word document. That was already a lot of work. Then I started reading the book and collected all the issues, creating post-its along the way. Having every little issue on display was a nice trick. It made progress visible, and made it feel like a project I could finish.
Re-reading my own book was a very interesting experience. I noticed how often I'd been lazy and skipped a proper argument for a piece of advice. I also noticed how some advice wasn't very clear and could easily be misinterpreted.
In that regard, it was very, very helpful to have Ross Tuck on board as a technical reviewer. He pointed out several issues where the reader, given this or that background, could have difficulty understanding a section, or take unintended advice from it. Ross put in a lot of time and effort, so from this place, thanks again!
Besides revising, I've also added several new sections, most notably about the following topics:
Because there are many people who have read the first edition, who I don't want to "force" to buy the second edition as well, I've already published several articles that cover more or less the same ground:
So, here we are. The release of the second edition of Principles of Package Design! The book is available on Apress,com and Amazon, but it's also a "regular" book, so your book store should be able to order it as well.
Buy the e-book or soft cover via Apress
Buy the e-book or soft cover via Amazon
I'm very curious about your opinion. If you've read the book (first or second edition), please let me know what you think of it. It would be great if you could submit a customer review on Amazon.
If you'd be interested in writing a review on your website, blog, etc., send me an email at info@matthiasnoback.nl, so I can send you a review copy.
Also, if you see this book in a store somewhere, it'd be very cool if you could send me a picture!
Infographics are one of those elements that have become equally popular in both print and web design. Regardless of the medium, these graphics help readers to better understand a concept or process. At their best, infographics take something complicated and turn them into a highly visual, yet simplified experience.
The web offers its own unique advantages for infographics: Interactivity and responsiveness. Instead of a plain old graphic, these storytelling elements can become even more user-friendly. Animation can be used to demonstrate an idea. And, infographics built with web technologies can also greatly improve accessibility.
We’ve put together a collection of snippets that aim to do more with infographics. Some may not necessarily feature a traditional composition. But they still seek to make information easier to understand.
Outlining a multistep process is something quite common on the web. However, it takes some work to make things easy to understand. What’s great about this snippet is that the numbered steps are both bold and highly detailed. They also degrade nicely on smaller viewports.
See the Pen Responsive infographic/ CSS variables, grid layout (no Edge support) by Ana Tudor
Sometimes, it takes creative solutions to get your point across. This circular chart rotates, outlining various ways to combat climate change. The format is both fun to watch and easy to follow. It also demonstrates how we can go that extra mile to make information more compelling for users.
See the Pen Responsive Animated Infographic. by Sarah Drasner
Simple, intuitive and easy on the eyes, this pie chart makes great use of interactivity. Click on the company logo and its container opens to up reveal more information. It’s colorful and integrates some slick animation.
See the Pen Infographic Pie (SVG based) by Shalabh Vyas
Television news and sports programs love to dazzle us with animated statistical presentations. Here we have a series of animated charts that is reminiscent of what we often see on TV. This snippet utilizes movement and bold styling to grab attention.
See the Pen CodePen Stats InfoGraphic by Tiffany Rayside
Interactivity is on full display here, as you can adjust both the numbers and colors used on this stunning 3D chart. Pop in a hexadecimal color of your choice for each entry and use a slider to play with percentages. As a bonus, you can also reposition it on the screen!
See the Pen Dynamic Infographic by Archer
This is a really unique way to build an infographic and make it interactive. It’s a series of CSS content cards that are displayed in an overlapping and staggered format. Hover over a card and an animation reveals more info. You could conceivably make each card clickable, leading users to related content.
See the Pen Infographic smooth cards view by Sergiu Mocian
Here we have an interactive infographic where clicking on an icon loads relevant content within the green sidebar. This type of implementation would be great for a full-screen presentation, allowing users to learn more in an immersive format.
See the Pen Bosma – Interactive SVG Infographic by Ntara
At the most basic level, an infographic should be attractive and easy to understand. This CSS-only example accomplishes both quite nicely. The illustrated coffee cups not only look tasty, but they are also representative of their ingredients. That, along with the flavor scale and ingredient key all come together beautifully.
See the Pen Types of Coffee | Pure CSS by Julie Park
Static text or images aren’t always enough to help users better understand your message. Just as they have for decades in the print universe, infographics offer a more user-friendly means of communicating data on the web.
When combined with the latest CSS and JavaScript techniques, we can create infographics that go beyond just a fancy layout for statistics. Instead, they can become an interactive and immersive experience that both entertains and educates.
The post 8 CSS & JavaScript Snippets for Creating Infographics appeared first on Speckyboy Design Magazine.
Pure CSS Pink – An incredibly detailed drawing made with only HTML and CSS.
10 Fantastic Examples of Dynamic Centerpieces in Web Design – Compelling design elements that grab a user’s attention.
The State of Web Browsers – A current look at where the market stands.
Accessible SVG Icons with Inline Sprites – Making sure icons are accessible to all.
uiLogos – A collection of 25+ free logo placeholders.
Creating My First Chrome Extension – The process behind building an extension for the popular browser.
How To Create Custom Blocks for Gutenberg with Block Lab – Build custom blocks for WordPress without the need for JavaScript.
Free Image Resizer – An online tool that lets you resize images to fit various social media platforms.
Risking a Homogeneous Web – A look at Google’s influence on the web.
Shapy – An online CSS gradient shape editor.
Managing Flow and Rhythm with CSS Custom Properties – Creating consistent, predictable space in your designs.
medium.css – A minimal set of typography devoted to Medium.
Motion Transition Effect – Creating a speedy motion transition effect for a slideshow.
2019 UI and UX Design Trends – A look at what trends will dominate in the year ahead.
Debucsser – A CSS debugging tool.
CodyHouse Design System – A collection of production-ready design components.
Send Holiday Cheer with these Christmas Code Snippets – Enhance your holiday emails with these merry examples.
Follow Speckyboy on Twitter, Facebook or Google+ for a daily does of web design resources and freebies.
The post Weekly News for Designers № 467 appeared first on Speckyboy Web Design Magazine.
We are going to start with the oldest example in our collection – Greestmas Greeting. Originally launched in 2011, it is a true pioneer. However, it is not a traditional greeting card. Its aim is much nobler. It was created to raise awareness of deforestation. Even now this site is relevant. So spread the word and give Christmas trees a chance to live forever.
There is one more example from the past that even now looks up-to-date – Christmas by Lancaster University. This is just a one-pager that allows you to create a page, decorate it with festive decorations and add some seasonal greetings. Simple, yet brilliant!
Cregital, a Nigeria-based digital design, and development agency have a special project called Acts of Random Kindness where the team shares their acts of kindness. The page has beautiful festive scenery in the head section that helps to establish the proper festive mood.
Christmas HQ and Nature’s Pride Retail Xmas Special are two projects that were created specifically for this merry holiday. The first one positions itself as headquarters for everything you may need for the best Christmas ever, including recipes, poems, cocktails, games, etc. The second one inspires retailers and wholesalers by sharing various Christmas recipes.
Merry Christmas is a digital Christmas card with 3D scenes, numerous tiny seasonal details, lively characters, and playful mood. It has been built with lots of cool tools, so prepare to be amazed. The idea is brilliant, and the realization is ingenious.
These two projects take a special place in our collection and heart. Both of them stand out from the crowd with their original ideas and brilliant realization.
Merry Christmas by Astral is an absolute delight for those who adore solutions built with the help of ultra-modern high-end libraries. This beautiful 3D greeting has been built with WebGL, Three.js, Hammer.js, Velocity.js, and Realtime 3D computer graphics. The project includes greetings from all the team members presented in a digital 3D version. Mind-blowing.
Warm Christmas is a unique project by LatinMedios. Santa is so hot that he dances in his underpants not only cheering everyone up and creating a joyful mood but also bringing some extra surprises.
As the title states, the project aims to tell people around the world about the traditions inherent to Christmas in Poland. It is a fully interactive guide that includes lots of beautiful wintery scenes and festive characters. Santa will guide you through the entire website.
This is a digital overview of the toys that were popular in the past and served as the best Christmas gift of their time. The beauty of the project lies in a clever combination of illustrations, tiny interactions, eye-pleasing effects and of course skillfully dished up statistics and numbers.
This is the funny one. The team at Cyber-Duck speculates about the effects of GDPR. Taking Santa’s routine as a base, they manage to cover all of the main points of EU’s General Data Protection Regulation. Each one is brought to the audience as a small Christmas episode.
Merry Pixmas is a 3D playground where you can create your own Christmas hero. You can choose a head, body, legs, and color. Thanks to 360-degree overview you can explore the character from various perspectives.
Created a couple of years ago, Santa Tracker is a place to track Santa on Christmas Eve. The platform also includes lots of helpful and entertaining stuff: visitors can play games and learn something new from the available small activities.
At Christmas, some love classic, simple greetings that do not take up much time but still leave a pleasant impression. Others, on the other hand, adore diving into immersive experiences. Each one has its pros and cons, and each one has its fans club. Either way, Merry Christmas everyone!
The post A Selection of Festive Websites to Get You in the Mood for Christmas appeared first on Speckyboy Web Design Magazine.
