SiloMag does not close for holidays! Because we love to bring you the best news and resources that we find online, in addition to the ones you send us. Because at the end of this is SiloMag: to share knowledge to evolve day after day.
This week at SiloMag, on graphic design, we have the branding for the Tour de France, a credit card in vertical format, and a very interesting packaging. About web design, what we can learn from a classic typography, vocabulary of design systems, and a guide on SVG. And for WordPress, how to add a source locally, Gutenberg and plugins, and how to improve performance.
As always, we hope you like it, and you can leave us any suggestions in the comments!
Graphic Design
DixonBaxi creates branding for Tour de France television coverage
Road markings, race jerseys and crests informed the new visual identity for Eurosport’s cycling coverage, designed by creative agency DixonBaxi. The Home of Cycling branding will be used across Eurosport’s digital and television platforms for all cycling events, including the three Grand Tours: Tour de France, Giro d’Italia and Vuelta a España. It covers 2,500 hours of live cycling across 200 days.
Online bank Starling introduces vertical bank card
Starling is a digital-only, UK-based bank that was founded in 2014. It provides customers with regular banking services, such as current and business accounts, setting up direct debits, standing orders and payments, viewing transactions and bills, earning interest and connects to payment services such as Apple Pay and Android Pay. Its new vertical design has been applied to two debit cards, for regular current accounts and business accounts, and has been designed Starling’s in-house art director, Mark Day.
Packaging Design Concept for Malbec Club
Massimo Studio was invited to develop the packaging design concept for the new Malbec grooming line, from naming to labels. As the official font for all brand lines at the time of development, they followed the entire creation process using the Effra font for all materials. The razor present in the brand and other communication pieces, brings the idea of a handmade care, coming directly from the most traditional barber shops, in a package with classic references but with a current appeal and unlike anything that the brand had worked before.
Web Design
The graceful restoration of a 200-year-old serif typeface shows the problem with digital fonts
In the early 1800s, a talented German punchcutter by the name of Justus Enrich Walbaum created a typeface that signaled modernity. A departure from the Blackletter fonts that were common in German books at that time, Walbaum designed a “warm and stylish” Roman typeface that would become a favorite of publishers for its readability. Walbaum Antiqua, as it was called, was so superior that Johann Wolfgang von Goethe insisted that his books be printed in this typeface.
Design Systems – review of vocabulary and terms
In general, design systems is a systematic approach to creating and maintaining consistent user interfaces which coherently communicate the brand values and empower user experience. Similarly to physical things, such as sewing a dress, a web application can be created not in a factory but by an amateur. To do this, a person certainly needs some skills but a systematic approach can be out of use. The situation changes if the volume of the subject increases up to the industrial level. In the same manner, when developing and maintaining larger websites, in the long run, there is a need of methods and tooling which ensure the quality of the output and consistency of elements across different items, decrease the costs of the production and empower in-team and cross-teams collaboration.
The guide to integrating and styling icon systems — SVG sprites, SVG symbols and icon fonts
In this second article, Sebatiano Guerreiro will take an in-depth look at SVG image sprites, SVG symbols and icon fonts. This guide is the answer to all the requests they receive at Nucleo about how to use the icons exported via the app. The Nucleo icon manager offers plenty of export options to choose from, but it’s not always straightforward which one does what. Until today!
WordPress
How to Add a New Local Font in WordPress
Themes come with multiple features and customizations and even if they have a wide range of them, sometimes you will have to add or change some lines of code, to accomplish what it fits you the best. Today we are bringing a simple guide on how to add a local font to you theme. We receive many questions about this issue on our support forum also, so here we go! Is this article you can find the instructions to add a new local google font. So first thing first you should select the font you want to add.
How to Adapt Your Plugin for Gutenberg: Part 1 (Block API)
Gutenberg is the new editor experience in WordPress, which is going to be merged into core in the next major release. A lot of plugins that do not keep up with this will become obsolete. This makes it essential that you adapt your plugin for Gutenberg before it’s too late. Who’s affected? Almost all the plugins that have anything to do with the post editor will be affected by Gutenberg. For example, if your plugin adds a button in TinyMCE to then place a shortcode in the editor, bad news; it will be the end of it.
WordPress Performance Boost – Easy As Possible!
Now, Web Development is not my main field of expertise, but over the years hosting Ceos3c and a couple of other websites he learned a lot about Website Administration, Design & Development through necessity. If you ever hired a “Web Developer” on platforms like Upwork, you know what he is talking about. Your Website will be far worse than it was before. So, to not be dependent on those “professionals” anymore, he decided to learn it myself, what can be so hard about it when you already know some coding and hacking, right? (Which by the way was a great decision).
Related Posts:
