Rss Bot

With the malicious code embedded into websites, the attacker can then piggyback on the trust level of the website and launch a variety of attacks. View the full article

Whether designing for 2D, editorial, ad campaigns or games, adopting a mindful approach to character design is essential to fit with the changing times we live in. Understanding your audience, crafting a compelling story and knowing the limitations and possibilities of the diverse range of media platforms available can only open up the scope of possibilities for today’s character designers. But how best to do so? We spoke to top designers and illustrators to discover how they create modern and vibrant characters that will stand the test of time. 01. Let your characters represent you Craig & Karl's portrait of Kanye West Characters are frequently representative of their creators, observes Craig Redman, one half of design studio Craig & Karl, through both the visual style as well as how their personality shines through. "For us it’s the relationship to the creator that makes it interesting. We tend to think of Craig & Karl as a conversation or continual back and forth between the two of us, which is how we operate day-to-day too,” adds Karl Maier (the other half of the creative duo). “As it’s only the two of us, our personalities, backgrounds and interests all feed into the work we make. And as much as there’s a visual style, we aim to bring our perspective to things so there’s a consistent tone or approach, even if the form varies.” 02. Set parameters Depending on the variables, such as the intended audience, the purpose of the work and where it’s likely to live – as well as whether you’re a visual designer, illustrator or game developer – figuring out a basic framework early on in the process will help inform your characters and add another layer of depth to their purpose. “Concept is key, it’s the foundation for what we’ll build an idea of narrative around.” says Maier. “All of our projects begin by having a conversation to figure out the basic framework for what we want to say and how we’d like to do it. Sketching plays a role too, but usually, it’s more like a note-taking process that lets us get ideas down quickly and allow things to gestate, as opposed to a blueprint that we’ll then work over to create the final piece. Sign up to the Computer Arts newsletter "We do like to get a relatively clear notion of what we want the outcome to be before diving in,” continues Maier. “From there, it’s all about the doing and making, trial and error, love and loathe, back and forth process that we go through.” 03. Create a narrative An illustration by Rilla Alexander for A Bear Sat on the Porch Today Character design is frequently driven by story, and that remains true no matter which platform characters are intended for. Whether crafting characters for print media, advertising campaigns or animation, giving your characters a purpose strengthens their reason for being. Australian born, Berlin-based illustrator Rilla Alexander explains. “When I am illustrating a book that someone else wrote, I see the characters as actors on a stage who have to get into character, whereas when I am working on my own stories, I see the characters as embodying their own emotions. You shouldn’t be conscious that a good actor is acting and so I would hope that distinction is not obvious to anyone else… but it’s what is going on in my head.” Illustrator Jim Stoten agrees: “You can appeal to personality traits that exist within an audience. I really like how expressive hands are. You can communicate a lot about a character by how they hold a glass or the way they sit. It’s a way of showing a character’s personality.” 04. Inject a personality Artwork for Where's My Welly?: The World's Greatest Music Festival Challenge, illustrated by Jim Stoten Stoten, whose vast, intricate landscapes are filled with tuba-playing elephants, dancing robots and crocodiles eating ice cream, has an interesting view of his characters; “I think to a certain extent characters that I create are self portraits,” he explains. “Either they have mannerisms or traits of mine, or have things about other people that I admire built into them. “Personally, I like characters that have elements of their personalities visualised in their physical appearance somehow,” he continues. “Mr. Tweed, my children’s book character, was based almost entirely on Peter Ustinov. I watch a lot of old talk shows while I am working, and Peter Ustinov was such an amazing character, both physically and in the way he conducted himself. 05. Harness comedy Nexus Studios' Hotstepper character was deliberately made to be comical ”A sense of humour is key, says Maier. “I think that regardless of the form a character takes, there’s inevitably something human, something of us in them. It’s a little like holding a comical mirror up that highlights the humour, absurdity or difficulties of our lives,” he says, “and because they tend to be cute or exaggerated visually, they can tackle ideas or situations with a lightness that might be harder otherwise." The importance of comedy is especially true of interactive work, whether you’re playing with the characters, taking control of the character or following them around. Nexus Studios designed the look and feel of HotStepper, the world’s first augmented reality character-based wayfinding app, centred around an irrepressible character inspired by internet culture, Friedrich Liechtenstein’s ‘Supergeil’ and Napoleon Dynamite’s infamous dance moves, synth pop vibes and British eccentricity. “An enigmatic character is hugely important if they are the protagonist in your narrative,” advises Alex Jenkins, a director at Los Angeles and London-based Nexus Studios. “You want the audience to root for the characters you’ve breathed life into, make an emotional connection and participate. With interactive work you have to provoke the audience to get involved, you can’t passively watch it unfold like in film.” 07. Use universal themes Monument Valley 2 is known for its striking visuals and magical architecture Speaking on stage at OFFSET Dublin, ustwo games head of studio Dan Gray spoke about crafting a story inspired by universal themes when creating Monument Valley 2. “A challenge we have in the mobile space [is that] it’s very difficult to keep people’s attention. They’re opening a game for 30 secs or a minute at a time before moving on to the next thing. So it was very important to us that we surprised people at every turn.” The award-winning sequel to Monument Valley follows a mother-child narrative, as they embark on a journey of discovery through a stunning and impossible world. “It’s a very rare duo to see in gaming these days” says Gray. “We didn’t want the mother to seem overbearing or a burden; but empower her. We purposefully didn’t define the gender of these characters.” Making a mother the central protagonist in a game is a unique and striking approach to game design. “We must have gone through over 200 characters trying to get the feeling right,” Gray admits. 08. Get the right proportions "You can reduce Miffy down to her eyes and that distinctive cross nose and still know it is her," says Rilla Alexander Visually, the proportions of a character can also make a notable difference. Jenkins says: “I’ve always been a fan of the Japanese approach to characters. I love the simplicity of how they capture really strong emotion with quite minimal detail, just well-placed eyes and mouths and the use of exaggeration.” Jenkins thinks that if you have a character with little expression, moving it into the body is the best way to “carry the personality and express emotion.” It’s a sentiment shared by Alexander, who believes that every character should have one distinctive characteristic that is crucial to their very being. “You should be able to gradually remove each feature one by one until you are left with one or two features that you can still clearly recognise them by,” she says. “Miffy is a very good example of this – you can reduce her down to her eyes and that distinctive cross nose and still know it is her. You don’t even need her rabbit ears!” “There are a lot of basic design principles regarding composition and proportion that apply to character design,” says Alexander. “It might seem obvious, but the more cute and round a character, the more approachable and naive they seem. The more angular a character, the smarter they appear. All of these things are at play when I am working, whether I am conscious of them or not.” 09. Make your characters relatable Swiss Referendum, Republic, by Leon Edler For Alexander, giving life to new characters can be an intuitive process, and one that has been honed and developed through her numerous professional and personal projects. Her alter-ego Sozi stars in her self-authored picture books Her Idea and The Best Book in the World . “Sozi is a way for me to express what are sometimes quite complex emotions in a simplified way,” she reveals. “When I was procrastinating about my first book, it was Sozi and her struggle to finish her ideas that I wrote about. Looking back I can see it was the book I had to do, before I could get over that mental hurdle and start making books about other things. “Characters might come to me as a clear visual but I have to dig to figure out who they are,” she continues. “There are others that I only initially know from the inside – their personality or their story – and then the challenge is to work out what that character should look like from the outside. I nearly always find that the character’s personality or looks remind me of an aspect of someone I know. That moment of connection is the very thing that makes me want to keep drawing or writing and to discover more.” If your characters come from an honest, real place they will be more relatable to your intended audience Hattie Stewart Balancing elements and defining the characteristics is especially relevant in publishing, where editorial illustrators must adhere to strict deadlines – a couple of hours in some cases. For Brighton-based illustrator Leon Edler, crafting genuine characters is a skill in itself. “When I started out, art directors would ask me to make the characters in my finals closer to the original sketch. When I’d done the original sketch, all I was thinking about was that character and the concept,” he says. It’s important to make sure that the final artwork isn’t too polished, as there is a risk that the characters will be less engaging. “I think if the characters are relatable, people will often look past the style of the work more than they do with traditional illustration,” he concludes. If your characters come from an honest, real place they will be more relatable to your intended audience, says London-based illustrator Hattie Stewart. “Inevitably your work reflects some part of your character, so yes my characters are a reflection of myself, or at least how I would hope myself to be.” 10. Adapt for your audience A campaign for Nike by Hattie Stewart drew upon her signature style Best known for ‘doodlebombing’ over influential magazines, Stewart’s tongue-in-cheek artwork moves fluidly between many creative fields, including collaborations with fashion brand Henry Holland. “I like to think my work is something every generation can enjoy,” she says. “It evokes childhood feelings with its cartoonish style, but also has themes that are more adult in nature. It’s playful, it’s engaging, it doesn’t take itself too seriously and it’s adaptable.” Her brightly coloured Posca pen creations first gained notoriety when she began mixing her drawings with photography and they have been featured by the industry’s biggest names. She is a testament to the power of DIY culture, having created her own niche through sheer hard work, practice and gutsy personal projects. “I’m lucky that because I focus solely on my own work people tend to come to me for that, so I rarely feel pushed in directions I feel uncomfortable working in,” she explains. Approaching each brief with her sketchbook to hand, her starting place is often decorative motifs and symbolism that capture the imagination, combined with a highly expressive face. “I’ll play around with different themes and concepts. I’ll go back to my sketch for underdeveloped ideas that may work in the present. It all comes naturally, and when it works, it works!” 11. Keep diversity in mind Land of Pleasures by Jose Mendez Increasingly, today’s creatives are faced with challenges around culture and diversity, because the public quite rightly expect brands and media to recognise the need for inclusivity, and adapt their advertising accordingly. Yet, to do so without resorting to stereotyping can be surprisingly difficult. “It’s important to reflect the times we are living in,” says Spanish illustrator Jose Mendez. “Illustrators should focus on creating characters that represent people, tribes, animals that people can relate to.” It’s an approach championed by Nexus Studios, a company that prides itself on creating heartfelt stories and experiences that engage audiences through the power of entertainment and culture. “We need more diversity and inclusiveness,” stresses Jenkins. “It has to reach a point where it’s not a ‘thing’ to be mindful of, it’s just life.” And he has a firm idea of how this can be achieved. “To break stereotypes, diverse characters must not be token team members, they should be in the plot because they matter, have a valid role, are vital to the plot, so why not start from there? Being of mixed heritage I do feel aware and have noticed the somewhat arbitrary way some productions have plugged-in diversity. Yet I think even if handled awkwardly it can be positive, because it brings the issue into focus and helps us overcome biases.” 12. Avoid stereotypes One of Hattie Stewart's 'doodlebomb' creations For Craig & Karl, it’s an issue to be acutely aware of. “We are very mindful of diversity in our work and always create a good balance of the sexes and backgrounds in our portraiture. Clients are super aware of the importance too and mostly request it, which is great. We’re doing a project at the moment that involves creating a character for different cities around the world, so when it comes to drawing a girl from Paris (for example), it’s not about drawing Eiffel Tower earrings and giving her a beret, it’s far more interesting and challenging to capture the essence of a real Parisian, someone looking awesome going about their everyday activities. No one wants corny representations of gender, race or sexuality… it’s all about creating an overall vibe.” “Diversity is incredibly important to me,” enthuses Stewart. “I’ve always said my characters have no ascended gender or race; I want them to be universal but still unique and inclusive. I couldn’t imagine making characters this fun and cheeky and them not being diverse.” When I started, I nearly always sketched white men... I'm now a lot more mindful at the sketch sketch to mix up the characters Leon Edler For Edler, striking a balance is essential. “I had to represent 16 different demographics for the Guardian’s budget coverage last year, so there might have been a tendency to take inspiration from stereotypes, but at the same time we have to be responsible – you don’t want to be reductive.” Working almost exclusively in editorial illustration for leading publications, Edler admits that it can still be tricky sometimes. “When I started, I nearly always sketched white men in my concepts, and I would be asked to make sure I included women and people of colour in the finals. As I’ve developed and my career has progressed, I’m a lot more mindful at the sketch stage to mix up the characters and represent a bigger range of people. 13. Experiment with new approaches An exhibition of Craig & Karl's portraits in Shanghai Reducing the characters into simple forms and exaggerating their features gives you more scope to be able to adapt the character into any situation, whether it’s 2D or in the real world through sculpture or products, observes Redman. “Visually we’re both drawn to bold shapes and colours composed in a high impact and simplified way,” he explains, “and those ideas are translated into our work without us really thinking about it – it’s instinctive.” Adopting the same approach for their portraits, whether they are drawing a public figure or celebrity, Craig & Karl reveals it’s all about singling out a feature that is distinctive to that person. “In the case of Trump it’s pretty easy, that orange wig/face and glum look; when we’re drawing friends it might be a beard or a particular piece of jewellery that identifies them. Whatever it is, that’s the element to highlight and exaggerate, this allows the viewer to get a quick read and identify who the subject is.” Taking the time simply to experiment and try things out generally across the board is also an essential part of the way the duo work, across different types of projects. “There’s a sort of flow of ideas where one thing feeds into another all of the time,” reveals Maier. “What we develop as part of one project may spark a thought for a character or vice versa. I guess it acts as a little reset when we come back to character design, which hopefully keeps our approach fresh.” This article originally appeared in issue 280 of Computer Arts, the world's leading design magazine. Buy issue 280 or subscribe here. Read more: 9 tips for designing a believable character How to sculpt a character in VR 10 things you should know before becoming a designer View the full article

JavaScript is an essential component of any web developer's toolkit, but to get the best out of it you need a command of more than vanilla JS. 12 common JavaScript questions answered If you're just starting out in JavaScript, though, the sheer volume of tools available can seem more than a little daunting. That's why we've collected together 25 of the best, covering everything from frameworks and interfaces through to code quality and testing tools. Read on to discover some of the best web design tools you can lay your hands on, and how they'll help you become a better JavaScript developer. Code quality tools 01. TypeScript When it compiles, TypeScript can target any version of JavaScript required for each project A common issue for new JavaScript developers is its dynamic typing system. A variable type can be inferred at runtime but will have no restriction as to what type it can be in the future. Dynamic typing can be useful in creating patterns, but how useful that is depends on the project. TypeScript aims to bring a declarative style of programming by typing variables where developers feel it makes sense. Type annotations appear where a variable is defined. With objects, interfaces define the structure of an object and the type becomes a reference to that interface. These can be extended to create easily customised objects. TypeScript uses experimental JavaScript syntax as part of its system. Decorators, for example, are functions that apply themselves to a class, method or property that provide repeatable functionality. These can save duplication in a project. It also compiles existing syntax such as classes, modules and arrow functions into valid ES3 or ES5. This can be customised to the browsers targeted within each project. When browsers can natively support these features, TypeScript can be instructed to keep them, making the resulting code perform better. TypeScript is a superset of JavaScript, so provides benefits to the language without changing its structure. As a result, any JavaScript is valid TypeScript and any of its features used are completely optional. 02. ESLint Linting is a type of static code analysis that can be performed on a project to check for any script that is likely to break or does not match the preferred style for the project. ESLint can check JavaScript for common mistakes, in addition to following popular pre-defined sets of rules from companies such as Google and Airbnb. 03. Prettier Much like ESLint, Prettier is able to identify formatting quirks. It also goes one step further and will automatically update the offending lines on the developer's behalf. While it is not as customisable, Prettier is more aware of surrounding contexts and will only apply formatting where it makes sense. It can also support other formats like JSX. 04. Travis CI Travis CI is a continuous integration (CI) tool. It monitors GitHub branches for any new commits and will run tests against it to make sure nothing was broken in the process. It can then deploy the change or notify the team about any issues. Travis CI is free for use with open-source projects, where consistency is important. 05. JSDoc When writing complex modules, it can be a difficult task to remember how everything works. With JSDoc, methods can have special code that describes what they do, any parameters they expect and the sort of thing they can return. This can then be processed to create documentation or enable editors like VS Code to provide hints in context to developers. Frameworks 06. React React Sight is a Chrome plugin that visualises component hierarchy alongside state and props Created by Facebook, React is one of the most popular JavaScript frameworks out there at the moment. It is primarily built to provide the user interface of an application. It is constructed on the concept of components – individual blocks of content that tell React how to render each part of an application. When something changes, React will work out what needs to update on the page. Virtually all of the logic that deals with how the application behaves is dealt with inside a component, which makes them easily reusable and they can often be shared across projects. While not essential, a lot of React projects are written in JSX. It is a language that looks and functions in a similar way to HTML but enables components to easily work alongside each other. Each component has a special 'render' method that tells React what to display. Internal state or external values called 'props' hold information about what the render should ultimately look like, whether that comprises text or other child components. React employs a unidirectional data flow, meaning that data is stored in a parent and passed down into its children. If a child needs to update that data, specially crafted methods can be passed down for the child to call. React Router is a popular package that supplies special components to React for internal navigation. Depending on the URL supplied, React Router can serve specific components to different parts of an application. Redux is commonly paired with React to manage application-wide state. Through special bindings, React is able to communicate with a large object that stores all the data for the application. Select parts of this state can then be passed to components to dictate how it should display. Overall, React is a relatively lightweight framework that is versatile enough for a lot of different projects. While not as fully featured as Angular, it is possible to piece together all the parts for each project as required. 07. Angular The Angular CLI is a great way to try out new things with the framework Angular was one of the first popular single-page application frameworks available. It has changed dramatically since its first release and with a host of new features, still remains prevalent today. Angular is designed to cover all aspects of an application – from templating to dependency injection. It has an opinionated structure, which means all projects will end up working in a similar way. Unlike React, Angular uses two-way data binding to keep all aspects up to date. Values in an input text box, for example, can directly update the model. Likewise, if the model changes display will automatically update. This keeps everything in sync. Angular is built on top of TypeScript, which enables it to use features like static typing and decorators to make the composition of components easier to manage. TypeScript then compiles down to regular JavaScript to use as normal in the browser. 08. Polymer Polymer is a framework from Google created to help build applications using web components. By working with the official specification, these components are reusable and can work alongside native elements and methods. Polymer 3 is coming soon and switches to using npm and ES2015 module imports as the needs of developers have evolved. 09. Svelte Svelte is designed to be a lightweight framework that disappears into standardised JavaScript once the project is built. Component logic, style and markup all live within a single file and work much like web components with scoped styles and <slot> elements to add content. The feature set is intentionally limited but can be readily extended as needed. 10. Vue DevTools enable access to the inner workings of each component, including internal state and Vuex Vue is a new framework but one that has quickly gained traction. While it shares similarities with others, it also eases some of the common pain points. It's flexible enough to be used either as part of an existing application, or as the main framework for a site. All of the HTML, CSS and JavaScript for a component can live within the same file. Styles are scoped, which makes it easier to drop components into multiple projects as needed. Vue also contains its own state management library called Vuex. Similar to systems like Redux, the application has access to a centralised data store. Adjustments are performed by mutations on that state, which trigger updates in any component making use of that data. Similarly, Vue also includes a router to enable navigation between different parts of a single-page application. By defining all the routes available, Vue will take care of the navigation between them. 11. Mocha Mocha is often the go-to for developers to write a range of tests in a project because it is simple to get started. Each test can run through Node or in the browser, making it easy to see where issues are occurring. Mocha also works with any assertion library, which makes it highly customisable to suit the needs of different teams. 12. Puppeteer Puppeteer provides a way to control Chrome with Node, which makes repeatable UI tests a lot easier to perform. It can check visual elements in the browser, such as the page title, as well as create screenshots to help track any regressions. Test runners like Jest or Mocha can run Puppeteer and can fail tests based on its results. 13. Protractor Protractor is a specialised testing tool for all versions of Angular. It uses Selenium to run end-to-end tests in real-world environments and browsers. Protractor will do all the set up required and can automatically wait for the page to load, which helps avoid brittle tests and decreases the amount that subsequently needs to be written. 14. Nightwatch For other projects that need end-to-end testing, Nightwatch makes a fantastic alternative. It also runs Selenium under the hood, which will enable you to test what the end user will see. Tests are written as modules that are run through Node and it is an easy procedure for them to be extended to connect to CI platforms or to send their results to external software. Project testing 15. Jest Jest can generate code coverage reports to help identify any gaps in test suites Jest is a test runner created by Facebook. Its main aim is to be as easy to set up and use as possible, with no configuration required to get started. Any files inside a "__tests__" directory or ending in ".spec.js" or ".test.js" will be picked up automatically. Tests run quickly and can run on each change to make sure that everything works correctly. Jest can even pick up what has been updated since the last commit and will only run tests on elements that have been affected. Customisable command line options make sure the right tests are running at the right time, which is ideal for keeping continuous integration tools fast. One standout feature of Jest is snapshot tests. While not testing a specific value, Jest will capture the structure of what is under test and will compare against that in future tests. If anything has changed, Jest will highlight the change and it can either be fixed or confirmed as intentional. This works great for React components but can also be used for any kind of serialised value. JSDOM is configured by default, which makes testing browser-based projects easier by enabling them to run through Node. Jest also comes with basic test functionality that includes mocks, spies and assertions. While these will work, other tools such as Enzyme and Sinon can be brought in to make writing tests an easier process. While Jest is often used to test React applications, in actuality it can be used to test a project that was written for any framework or language. Premade setup files can take the hassle out of building the right testing environment, for example making sure that Angular is defined globally. Editor plugins 16. Quokka Quokka will output the contents of the file to a window connected to the editor Despite our best efforts, no developer can get everything right first time. When a small idea needs trying out, setting up a project just to see if it works can be overkill. When working with unfamiliar tools and libraries it is best to have an isolated workspace that shows exactly what is happening at each step. Quokka is an environment that lives inside an editor. It evaluates code inline and displays the result as it gets used. This makes it great for trying out blocks of logic without having to build a new bundle and check it in the browser. Coloured blocks alongside each line number shows that it's covered by Quokka. A green block indicates there are no problems, while red alerts that there is an issue with that line. The comment at the end of that line provides more information. A grey box shows a line is never reached, which may or may not be an intentional decision. While Quokka works with most setups straight away, its settings can be customised within each file or inside package.json if used with npm. Most languages based on JavaScript are already supported, including JSX and TypeScript, but plugins are also available to work with other syntaxes such as jQuery, without having to explicitly import it. Plugins can be brought in to set up and tear down environments each time the code runs. The project is made by the same team as wallaby.js, which features similar functionality but for test suites. As a failing test gets written, Wallaby will highlight the issue straight away, which means errors are caught sooner. Quokka is available as a plugin for VS Code, Atom or JetBrains IDEs. The free Community edition will cover most cases, but the optional Pro edition enhances things further by enabling inline inspection of code to identify slow performance issues. 17. Emmet Emmet is a set of plugins available for most code editors that aims to enable developers to code quickly by removing all of the slow, repetitive tasks involved. When developers enter a small keyword, it can detect and replace it with a larger block of content. Emmet will also understand their intentions, parse the syntax and even expand the code automatically. 18. Import Cost Over time, applications can soon become bloated with large dependencies weighing them down. Import Cost is a simple plugin for VS Code that will highlight the size of any imports inline as they are added and are colour-coded to see at a glance what might be over-inflating the bundle. The developer can then decide whether that extra weight is justified or not. 19. BracketHighlighter Code can often get buried inside nested objects, functions or elements. Sometimes that can make it hard to see exactly which open bracket marries up to which close bracket. BracketHighlighter for Sublime Text will highlight one bracket when the other is selected and will even work with multiple selections and inside strings. 20. Chrome Debugger VS Code can create breakpoints and provide feedback on running Node applications already but what about the browser? The Chrome Debugger plugin will hook the editor up to a DevTools instance to enable the same behaviour in-browser. Step through code, pause execution and monitor variable values in a familiar environment. Interfaces 21. D3 The Gallery shows the diverse range of graphics that can be made with D3 Data visualisations are a great way to make large datasets more interesting. By approaching the information from a new angle, the data is easier to understand and new insights can be made. Making them can be easier said than done, though, and working with SVG directly comes with its own quirks, while trying to output to a <canvas> element can be slow and inaccessible. D3 stands for Data Driven Documents and is designed to create data visualisations with JavaScript using SVG, HTML and CSS. These documents are designed to be easily updated as the user interacts with them or new data arrives. At its core, D3 binds data to DOM elements, which can be interpreted in different ways depending on the project. For example, a bar chart could be created with a few <div> elements that are styled to look like bars. Each data value would be bound to a bar, which in this case would be widened based on its value. By keeping a reference to the selected element, the charts can be updated as necessary. The 'enter' and 'exit' methods define what should happen when an element is to be added or removed from a chart based on the data. With that in place, charts can be reparsed and updated automatically. Where D3 really shines is through complex visualisations, such as maps. This is achieved through manipulation of SVGs. While there is no built-in functionality for creating a map, it is possible for D3 to plot GeoJSON data using d3.geo.path. There are plenty of other tools and libraries built using D3 that are designed to make the process easier. DataMaps provides ready made map data on set projections that can be dropped in and customised as needed. As D3 will be in charge of the DOM, it can be difficult to integrate with modern web frameworks that update based on state. Libraries such as React-D3 are made to work with updating props and can take the hassle out of integration. 22. Anime.js There are plenty of examples of what is possible in Anime.js on CodePen More sites are embracing subtle animations. A small animation is a great way to catch the user's eye and create interest. CSS animations are ideal for simple transitions that are known ahead of time, but what if the targets and values change based on user input? Anime.js is a tool that makes animations easier to work with. Everything starts with a call to 'anime', which defines everything about the animation including the target, duration and any transitions to apply. Targets can be anything from a DOM node to a JavaScript object, which can transition values inside of itself. One great feature of Anime.js is the ability to create a path for an element to follow based on a <path> element defined in SVG. By calling anime.path(), it enables that path to be used as a value for X/Y positioning for other animations. These can be stacked or strung together to create a timeline without the need for specified offset values. 23. Moment.js Working with dates and times can be challenging. The native Date object provides little functionality to help format and manage time zones. Moment creates special objects that enable devs to parse and format dates and times any way that's required. The size can be kept small by only including the locales needed for each project. 24. Semantic UI Semantic UI is a set of common components that can be enabled as necessary within any project. Common patterns like breadcrumb navigations and toggle buttons encourage are first created with semantic HTML, which the library enhances. Integrations for frameworks like Vue and Angular are available to drop into apps that simplify interface creation. 25. Pell By limiting the feature set, Pell can produce semantic HTML that can be used anywhere A lot of projects make use of a rich text editor. That might be for a comments section where styling options are limited but load times are important, or in a CMS where a large feature set is essential. While there are a multitude of WYSIWYG options out there, they can be large, rely on outdated dependencies or produce non-semantic markup. Pell is a simple text editor weighing in at just over 3kB minified, making it smaller than options like TinyMCE or Facebook's Draft.js. There are also no dependencies to rely on, which makes Pell a drop-in replacement for any existing editor. While others may provide a bigger feature set, Pell focuses on doing the basics well. Actions such as links, lists and images are present out of the box but custom features can be added to suit the needs of any project. The look and feel can also be customised, with Pell providing a SCSS variable file to overwrite as necessary. This article was originally published in issue 306 of net, the world's best-selling magazine for web designers and developers. Subscribe to net here. Related articles: 5 of the best JavaScript frameworks How to manage CSS classes with JavaScript 20 JavaScript tools to blow your mind View the full article

Having won the Championship and secured a promotion to the Premier League, 2018 has proved to be a good year for Wolverhampton Wanderers FC, or as fan calls them, Wolves. A nicely timed rebrand courtesy of design agency SomeOne tops off these achievements, and sees the irreplaceable Wolves logo design transformed into a 3D version and accompanied by snazzy new typefaces. As part of its brief, SomeOne was tasked with nodding back to the club's heritage, as well as recognising the club's new ownership under the Chinese company Fosun Group. Having been founded in 1877, Wolves have a long history for the studio to work with. In the end, SomeOne drew on Wolverhampton's association with ironmongery to forge a strong new identity that looks like it's been hammered into shape. This new identity includes a three dimensional Wolves logo and two fonts inspired by the club badge – Wolves Display and Wolves Display Cut. Check it out by clicking left to right in the gallery below with the arrows. Football club redesigns can prove controversial with fans, just look at the outrage surrounding the Leeds United badge rebrand. To tackle this, SomeOne consulted various groups along the way, including supporters. “We knew not to touch the club’s iconic badge, but instead, use it as inspiration for a new 3D brand property," says SomeOne designer Tim Green. "The depth of the 3D wolf (particularly the version with lit eyes) adds a dynamic, competitive spirit that can’t be reflected in flat vector forms." "We wanted to give a nod to the city’s industrial heritage, so opted for a bold and condensed style," adds SomeOne designer Ian Dawson. "By using the geometric forms of the eyes, we began removing cuts and angles from the letterforms. Moving forward, this allows the club to speak in a distinctive and ownable voice, without relying too heavily on the badge." Related articles: How to choose the right typeface for a brand Bring a brand to life with illustration How to reawaken a brand's heritage View the full article

If you're interested in exploring the lucrative career path of a web developer, you'll need to gain the necessary skills first. With The Complete Web Developer Course 2.0, you'll learn everything from the basics of HTML5 to CSS3. You'll gain hands-on experience building actual websites, discover how to develop blogs and other sites using the Wordpress platform and find out how to monetise websites and bring in a cash flow using your newfound knowledge. Plus, you'll receive unlimited free web hosting for an entire year – a nice plus as you work to get more sites on the web. Get The Complete Web Developer Course 2.0 for only $25 – that's 83 per cent off the regular price. Related articles: The web designer's guide to Flexbox An essential guide to web design etiquette The best colour tools for web designers View the full article

Creating any type of 3D art is tricky, but throw typography into the mix too and it can become all kinds of daunting. To get you started, I will talk you through how I created 3D type family Rig Shaded. The 70 best free fonts Perfect for eye-popping headlines and logotypes, Rig Shaded is a layered or ‘chromatic’ typeface, which means that you can choose your own style and colour combinations. Its geometric letterforms are picked out with a distinctive halftone shading style and its four weights include a unique ‘zero’ weight. The process of creating Rig Shaded was as elaborate and unusual as the typeface itself, involving several tools and collaborations. Here's how I did it... 01. Hunt for inspiration Clockwise from top left: Bobby Evans; Justin Thomas Kay’s logo for Zoo York; Jeff Rogers; 18th century building signage; Gary Stranger; Ged Palmer I can’t get enough of 3D signwriting and tactile lettering. I wanted to capture that magic in a typeface. My previous chromatic typeface, Brim Narrow, was a serif design inspired by antique woodtype from the 1800s, and this time I wanted to design something that was thoroughly modern. I had lots of ideas and sketches, but before I opened my font software there was much to figure out. First, I made a Pinterest board with dozens of 3D lettering examples. I collected sign painting by Ged Palmer, graffiti by Gary Stranger and bold building signage. I gathered gorgeous digital lettering, including some by Jeff Rogers and Bobby Evans, both of whom I contacted to ask about their processes. Jeff has a very painterly approach to letter shading, while Bobby favours a textured, screen-printed style. 02. Collect shaping ideas Calypso by Roger Excoffon (left) and Umbra by R. Hunter Middleton (right) When I was exploring the other chromatic fonts available, I couldn’t find a geometric sans serif option. Of the sans serif typefaces, many struggled with how the angles of their drop shade, or extrude, were affected by their diagonal shapes. For example, if you apply a 45º extrude to an X that falls from the bottom right, the result will look very uneven. The stroke of the X running from top left to bottom right will show almost no extrude but the extrude on the opposite stroke will be overly deep. These need to be equalised while tricking the eye so the viewer does not notice. R. Hunter Middleton’s Umbra typeface does an outstanding job of this, however its proportions are those of Roman capitals rather than geometric. The same goes for the angles at the ends of the characters (the terminals). 03. More research and development Early halftone shading experiments I applied a rough, mechanical extrude to a variety existing sans serif fonts, using a simple Adobe Illustrator blend (If you’d like to know more about making 3D lettering I‘d recommend Jeff Rogers’ excellent 3D Skillshare tutorial). I studied characters like the N, S and X to figure out the best character shapes and what issues to look out for. I began to wonder: what if I designed a typeface that 'allowed the tail to wag the dog’ and adjusted each the letter shapes specifically to suit an extrude style? Could a geometric typeface work in harmony with 3D effects while maintaining its geometric principles and proportions? This question eventually led to Rig’s distinctive design. To accentuate Rig’s solid appearance I wanted to add some shading to its extrudes, which would also make the letters feel more like custom lettering. I played around with halftones using traditional circles, but the amount of data required to plot thousands of circles across the entire font would result in enormous file sizes and slow software rendering. A square however, requires a third of the data required to render a circle, so I found a way to make halftones with squares by using Astute Graphics’ Phantasm filter in Adobe Illustrator. A square can be described with four nodes, while a circle needs 12 04. Write yourself a brief Rig Shaded’s Layer styles and their eventual names Typefaces take a long time to produce so it’s important to establish a brief for yourself to follow. Months into production, neck-deep in detail, you’ll undoubtedly have a critical decision to make about your design direction; without a firm guide to keep you on track it’s easy to go astray. I also kept a detailed Evernote document recording technical details and decisions in case I wanted to reconsider an option. There seemed to be room in the market for my idea. So the brief to myself was: A typeface with geometric shapes, specifically to complement 3D effects Well balanced extrudes that have a visual harmony with the letter shapes and/or spacing All terminals angled to suit the connecting extrudes Maintain clear, open, legible character Create shading styles that emphasise the design’s solid, 3D appearance Keep it modular with interchangeable options so the creativity stays with the end designer Produce four weights, including include a razor-thin weight (the eventual ‘Zero' weight) 05. Design the face Font editing program Glyph was used to design the face of the character It was now time to start designing the face of the characters. For this I used Glyphs, a font editing program. Glyphs’ vector drawing tools are second to none, allowing for precise control and accuracy. Working within a dedicated type design tool also encourages you to think about the spacing of your type while you draw it. I drew my initial A-Z, focusing on the overall shapes and proportions of the letters. I made all terminals end at 90º, with a few exceptions at 45º, to suit the extrude style. I designed the characters a fraction narrower than a strict geometric, which steepens the angles of the diagonals (helping the uniformity of the extrudes) and makes the font more economical with space when it’s used in long headlines. Initial feedback from Dave Foster I designed the A-Z in Bold and Light weights and used Glyphs to create the Medium weight by interpolating from my two extremes. When completed, I asked a couple of friends and veteran type designers, Dave Foster of Foster Type and Toshi Omagari of Monotype, for their feedback on my alphabets. Next page: five more steps to creating your own 3D typeface... 06. Work on extrudes It's key to build visual harmony between the stem widths, spacing and extrude depths During my experimental stage I’d figured out the rough extrude depths for each weight so I could build visual harmonies between the stem widths and/or spacing in each weight. This aids the uniformity and rhythm of the type, which is important as the shapes become more complex. To create the extrude styles, I used a plugin to do the heavy lifting. This created the extrude shapes mechanically, and I then adjusted or redrew to achieve a consistent weight. I needed to ensure that none of the extrudes clogged up their partner face characters or obscured their details, so I adjusted several of the original face characters to make them more compatible. Plugins can do the heavy lifting when it comes to extrude styleshe rough extrude depths for each weight 07. Make Zero weight style Sketched adjustments on the Zero weight S I wanted to make a razor-thin, ‘zero’ weight style for the font family. For this to work, the extrude style needed to become the main shape of the type. I redrew each glyph with open paths, as if creating a monoline font. This gave me the skeleton of each character so it could be mechanically extruded and then adjusted or redrawn. The 'S' was particularly tricky as its spine produced almost no extrude naturally due to its diagonal direction. 08. Adjust spacing and kerning The original face spacing (top), the final combined spacing (middle) and the main differences (bottom) I’d spaced my characters throughout the drawing process to ensure they were working well together as words and sentences. However, a shaded font cannot be spaced like a regular black and white typeface. Because the extrude shapes become an integral part of each character, the spacing and kerning needs to be optimised for the overall combined shape. To do this I made both the face and the extrude black, to form one solid block, and spaced and kerned them together. 09. Prepare for shading As a rough guide, all glyphs were placed in Autodesk 3ds Max and lit To guide the halftone shading process, I commissioned a 3D designer to create and light a 3D model of my full character set. This wasn’t meant to produce a realistic shadow but rather a consistent stylistic effect, and show me where the light might fall across more complex shapes. In the end however, the final shading diverged even further from the 3D model so that the shadows could be distributed evenly across all the glyphs. Two grades of halftone shading provide greater control at various type sizes After talking with a few designer friends, I decided that it was important to offer two grades of halftone shading to provide greater control at various type sizes. Depending on the colour combinations and sizes chosen, Rig could then produce subtle gradients through to strong graphic effects. 10. Start shading marathon One of several crazy Illustrator files for making the halftones Each separate gradient was made in Adobe Illustrator then brought back into Glyphs to be cleaned up, and often adjusted square by square. There was no way to batch-process the halftone effects and the combined number of glyphs across four weights and two shading styles is approaching 2,000. It was a long, gruelling process. In Illustrator, I made a black and white gradient at the approximate size of the curve or edge that needed shading. Then, with some manipulation, I would run the Phantasm filter on these gradients to create the vector halftone squares. These were then cropped using the shape of the letter’s extrude. Back in Glyphs, at high magnification I went around all the curved edges to correct any stray points. To reduce the overall file size of the font I also removed any redundant curve handles from squares positioned on the edges of curves. There were several intricate gradients to build, like in the crotches of K and R There were several intricate gradients to build, like in crotches of 'K' and 'R', but many of the gradients were shared across multiple shapes, and keyboard shortcuts sped up the process. The last step was to even out the shading to avoid dark areas as much as possible. The result I admit that while producing the shading I cursed myself for deciding to make four weights, but the final result was worth it. The unusual approach to Rig’s design eventually led to its unique appearance. The character shapes, extrude depths and spacing have all been devised to complement each other and produce harmony within each weight. By allowing the tail to wag the dog in this way, Rig’s lively yet assured voice was forged. Related articles: How to choose the right typeface 5 classic fonts that are still on trend (and why) The 41 best free web fonts View the full article

Want to know the kind of person it takes to become a true custodian of the web? The well-known speaker and accessibility evangelist Bruce Lawson has spent years diligently advocating on behalf of developers and championing inclusivity in user experience design for brands such as Opera and Wix. We catch up with him to discuss building at scale, developer advocacy and his Generate London talk. You’re known for speaking up for non-Western web users. Why do you feel so passionately about this? I first discovered the web in Thailand, when I was researching the ramifications of my multiple sclerosis diagnosis. That experience made me understand, early on, that the web isn’t just for people based in Silicon Valley or Europe. I’ve been banging on about that since I returned from Thailand to the UK in 2000 and don’t intend on shutting up any time soon. How was being a developer advocate for Wix different from your previous role at Opera? In some ways, it was similar. Both companies had very strong consumer brands and fierce loyalty, but weren’t well known as places of engineering excellence. With Opera, I worked to show web developers how our engineers made a browser run on low-specced devices to serve its millions of customers in the developing world. At Wix, I reported directly to one of the founders but he doesn’t wander around in a shiny suit of synergies, smoking caviar or swigging leverage beverages; he writes JavaScript in the Stylable team. It’s a very engineering-led company; over 50 per cent of the workforce are engineers. What did you learn there? When I was at Opera I had a somewhat naive view of how websites get made in the industry. Working for Wix, which has 120 million users building sites on its platform, taught me a great deal about building the web at scale, about the kind of infrastructure behind the scenes, performance and where the rubber meets the road in terms of standards. Wix asked me to join to help them design APIs for Stylable that are compatible with CSS and other standards and then open source it. We were open sourcing a significant number of projects. It was also a great place to work and my team were loads of fun. Who else would fund me to script, direct and appear in a professionally made music video? Are there any new technologies that are exciting you right now? Well, naturally, I’m excited about Stylable. Wix is about to unleash it to millions of users to make their websites with. It offers the benefits of CSS-in-JS (static analysis, components, scoped styles, re-use and customisation) with the advantages of CSS (minimal run-time overhead, familiar syntax, compatibility with existing tooling and performance). In the wider web standards world, I think web assembly will be tremendously exciting. And Houdini, the ability to hook into the browsers’ internal CSS engines and extend or tweak them with JavaScript, will revolutionise both the way we make websites and the way we make standards. What will you be talking about at Generate London? I’ll be talking about how to be a proper custodian/steward of the web: making sites that are beautiful and functional, which are open to everyone and make the world a tiny bit better instead of worse. Because if we all contribute a gram of goodness, among the million or so web developers worldwide, that’s a whole ton of goodness produced. And we owe it to the medium that has given us our amazing job. This article was originally published in issue 310 of net, the world's best-selling magazine for web designers and developers. Buy issue 310 or subscribe to net. Want to hear more from Bruce Lawson? Bruce Lawson is giving his talk Shokunin of the Web at Generate London from 19-21 September 2018 If you're interested in learning more about how you can make your sites more accessible to a global audience using web standards, make sure you've picked up your ticket for Generate London from 19-21 September 2018. Former deputy CTO of Opera and fashion consultant for Wix, Bruce Lawson will be delivering his workshop – Shokunin of the Web – in which he will explore how you can become a web ‘shokunin’, a Japanese term meaning an artisan with a “social obligation to work his/her best for the general welfare of the people." Generate London takes place from 19-21 September 2018. Get your ticket now. Related articles: How accessible are your designs? Get started with web accessibility The designer's guide to digital accessibility View the full article

You're reading Best Free WordPress Themes of 2018, originally posted on Designmodo. If you've enjoyed this post, be sure to follow on Twitter, Facebook, Google+! WordPress is expanding its sphere of influence annually. It powers almost 27 percent of all websites. Its popularity is not something far-fetched or created out of thin air; it is richly deserved. The CMS by Matt Mullenweg and Mike Little … View the full article

Every minute, there are also 5,518 records leaked from publicly disclosed incidents. View the full article

Apache has patched a critical remote code-execution vulnerability in Struts 2, and users should update immediately. View the full article

An engaging landing page can be the difference between a visitor staying or leaving a website, and the site hassyadai.com offers a great example of how to keep visitors with you. It introduces two characters, and the titles change on hover, depending on what is selected. This is the technique explored in this tutorial. Get the tutorial files for this tutorial 01. Get started To recreate the text switching as seen on the homepage of Hassyadai, there will be a basic HTML layout that has been created in the ‘start’ folder of the tutorial files. To make the images get larger on rollover, two classes will create that transition. 02. Show the text To show the text the ‘hidden’ class will be dynamically switched in and out on the text elements. This just has no opacity. Because of the transition on the text elements, the opacity will fade in and out. 03. Make it work The functionality of this will all be controlled through JavaScript. Here the code is added to script tags at the bottom of the page. The code is referencing all the elements on the page that need to be controlled so that they are cached in variables. 04. Grab the mouse In order to make this work, the mouse position is needed. The overall container object is grabbed just to see if the mouse is over it or not. As there are many sub elements that are visible or not, these will interfere with just doing a rollover test on individual elements. 05. Left or right Once over the container, the mouse is checked to see which side it’s on. If it’s the left, then the text over there is faded onto the screen and the image is scaled up to make this the most obvious. 06. Over and out The last part of the code is to restore everything to normal in the ‘else’ statement shown here. This restores the text to be invisible and the images to be their regular size if the mouse is not over the container. This article was originally published in Web Designer. Subscribe here. Learn more about user experience Generate London 2018 has a host of top-class speakers. Don't miss them When introducing engaging CSS effects to a page, you need to be thinking of the user experience. Freelance front-end UI developer Sara Soueidan will be revealing more on this in her Using CSS (and SVG) for the Good of UX talk at Generate London 2018. She will show a wide range of possibilities that CSS offers to improve the overall user experience of your UI, using CSS (with sprinkles of SVG and JS here and there). Make sure you don't miss out. Get your ticket now. Related articles: 5 tips for super-fast CSS Understanding the CSS display property CSS tricks to revolutionise your web layouts View the full article

There's a fantastic selection of tablets for kids at Walmart. In this buying guide, we take a look at the best child-friendly Walmart tablets, and our price comparison tool will dig out the best deals on them as well. When buying a tablet for kids, there are a few things to consider first. Make sure you choose a model that's robust enough to withstand knocks and drops while being carried around. Keep an eye out for any tablets that offer rugged cases that will help protect them from being broken. The best drawing tablet for kids How to draw: the best drawing tutorials They should also be small and light enough to be used comfortably by kids, so tablets with a screen size of 7 to 10 inches is recommended. And choose one that comes with built-in parental controls, so you can limit the amount of time your kids spend on the tablet, and keep them away from unsuitable content. Walmart has a large range of tablets for kids, so to help you choose the right one for your needs, we've put together this list of the top tablets for kids at Walmart. The Samsung Galaxy Tab E Lite is a brilliant all-round tablet for kids at Walmart. It's small and light enough to be easily carried around, and it comes with a microSD slot, which means you can easily expand its storage capabilities if you want to fill it with videos and games to keep the little ones entertained. It comes with an old version of Android, but this can be updated, and you'll get access to a huge range of apps and games from the Google Play Store. This tablet is showing its age, however, so your kids may grow out of it, and the camera isn't great. But, for a first kids' tablet, this is an excellent choice, and Walmart offers it for a very decent price. Many tablets aimed at kids (from Walmart and other retailers) are usually rather limited when it comes to power and features. This makes them great starter tablets, but it can mean your children soon outgrow them. If you want a tablet that's powerful enough to meet the growing demands of your children, then the iPad mini 4 is our recommendation for the best high-end tablet for kids at Walmart. It packs some brilliant features, including a gorgeous screen and impressive camera, while still being small and light enough to be comfortably used by kids. There are plenty of rugged cases you can buy for the iPad mini 4, as well, to help keep it protected. The HighQ Learning Tab Jr. 7-inch kids' tablet is a very good cheap tablet for kids at Walmart, with a brightly coloured rugged case that keeps it protected from knocks and drops. The battery life is good, so you shouldn't have any tantrums if it runs out of juice while watching a programme or playing a game, and it comes with educational apps – though some of these require an additional purchase. The Ematic 7-inch Funtab 3 Touchscreen Tablet is a good alternative choice to the HighQ Learning Tab Jr. when it comes to choosing a cheap kids' tablets at Walmart. It has a similar price and specifications, but it's aimed at slightly younger children. A number of kid-friendly apps come preinstalled, and it's been designed to be easily held by little ones. Don't expect amazing performance from this tablet, but for the price you're getting a nice little device that will keep young children entertained. If you've got younger kids who want their first tablet, then the Sprout Channel Cubby is a good choice. It comes with a range of child-friendly games and apps based on favourite characters from the Sprout Channel, a popular preschool TV network. There are also educational apps, a kid-friendly web browser and over 40 child-friendly videos preinstalled. It has an easy-to-hold design that also protects it from accidents as well. This is a great tablet for children that you can pick up at Walmart. If you have older kids, you'll want a slightly more capable tablet. However, you don't want to spend a lot of money on something that could be broken or lost, so we recommend the Samsung Galaxy Tab A as the best tablet at Walmart for older kids. It comes with an excellent battery and impressive specs for the price, and allows your children to install more graphically demanding games and more complex apps. Samsung has a great reputation for making solidly-built devices, and the Tab A is no exception. If your kids are at school or college, then you might want to consider a tablet that can be used for their schoolwork as well. The Surface Go from Microsoft is a fantastic option for this. Build quality is stunning, and there's enough power for it to easily handle apps and games. It runs on Windows 10 S, which can run apps from the Microsoft Store, and it can also be upgraded to standard Windows 10 so that it can run regular software like Microsoft Office. If you're looking for a more affordable Windows 10 tablet for your kids from Walmart, then the Acer Switch 3 is a great choice. It's cheaper than Microsoft's Surface products, but it's no slouch when it comes to power and features, and can run Windows applications and programs. The screen cover doubles as a keyboard, making it a good tool for homework, and its screen is also excellent. Related articles: The best drawing tablet How to draw: the best drawing tutorials The best cheap Apple Pencil deals View the full article

Bridging the divide between hype and reality when it comes to what artificial intelligence and machine learning can do to help protect a business. View the full article

Do you feel like your Pantone skills are wasted on print design alone? Do you yearn for a way to prove your superior colour knowledge, perhaps in a party setting? Well there's a treat in store for you. Get ready for Pantone: The Game, from Cryptozoic Entertainment and game designer Scott Rogers, and officially sanctioned by the kings of colour themselves. How to master colour theory Here's how it works: one player (the 'artist') chooses a character card, then tries to create representation of that character using a selection of Pantone swatch cards (there are 15 to choose from). The other players then take turns to guess who the character is, with hints introduced if no one manages to get there on their own. You can see it in action in the video below. Of course, the pop culture angle means this game is not just for designers (and apparently up to 20 people can play at once), but if you already know the perfect Pantone for Santa's jacket, that's bound to give you the edge, right? Plus, it's a top gift for designer friends. "What makes Pantone: The Game so special is how intuitive it is," says Cryptozoic's Adam Sblendorio. "There are so many creative paths to creating the characters in the game and none of them are wrong and all of them are fun!" Pantone: The Game is available buy now from Amazon for around $30 (it ships to the UK, but isn't available on Amazon.co.uk yet). At time of writing it was out of stock, and due back in at the start of September. If you're in the US you can pick one up from retailers such as Barnes & Noble and GameStop. [Via Cryptozoic] Read more: If celebrities were Pantone colours Adobe shares Pantone's summer trending colours Pantone reveals its Colour of the Year 2018 View the full article

The world's largest library, the Library of Congress based in Washington, DC, has been given a typographic rebrand and new logo design courtesy of legendary studio Pentagram. With the aim of making a dynamic brand identity that helps to make the world's largest library accessible to all, Pentagram's rebrand uses lettering as a metaphor for a bookshelf or bookcase. The Library of Congress itself is home to over 32 million catalogued books and other print materials spanning 470 languages. With such a diverse range of mediums to cover, Pentagram's solution of sandwiching images between the word 'Library' set in Druk Condensed Super is a clever way to accommodate everything. Meanwhile, the full name is brought to life in Sharp Grotesk 20. "While it officially serves Congress and the federal government, the Library also serves as the national library of the American people," Pentagram explains on its project page. "Its central mission is to provide a rich, diverse and enduring source of knowledge that can be relied upon to inform, inspire and engage. The breadth and power of its collections should be easily understood, and be coupled with an invitation for all to visit physically or virtually to take advantage of all the treasures within." Pentagram's rebrand replaces the previous logo and look designed by Chermayeff & Geismar & Haviv in 2010, which saw the American flag incorporated into the image of an open book. See how the two designs compare by clicking left to right in the gallery below with the arrows. As the library serves Congress, the federal government and the American people, rebranding it was a tough brief. By abandoning some of the more patriotic imagery found in the previous iteration though, this new brand levels the playing field between the 'library' and 'Congress' parts of its name. "All of us are living in a period of massive change in the creation, analysis, and use of information and libraries have an important role to play as collectors, curators, educators, and experts," David S. Mandel, director of the Center for Exhibits and Interpretation at the Library of Congress, told Pentagram. "As the world’s largest library, we were drawn towards a bold direction that emphasises the library as a vital cultural institution." Watch the rebrand in action via the video below. Related articles: How to choose the right typeface for a brand How to use colour and typography in marketing Define a brand with handmade type View the full article

Traditionally, if you needed extra screen real estate – whether for work or play – you’d have to research the best monitors and buy an extra display or two. These days, ultrawide monitors are increasingly commonplace. And while the move to bigger screens has been partly driven by gamers, creative pros have much to benefit from the wealth of tech these huge screens offer. So what's the best ultrawide monitor, and how do you pick the right one? Well, size is a consideration, of course – most of the ultrawide monitors in this roundup are 34 inches. Make sure you have enough desk space before investing in your chosen model. You also need to think about connectivity (most of these screens feature both HDMI and DisplayPort) and what PC or Mac you’ll be using to drive the display. You’ll want either dedicated Nvidia or AMD graphics, or you’ll need to have Intel-based graphics from the last few years – we’d suggest HD Graphics 3000 or later, or Intel Iris Pro. And you’ll need to make sure you have the latest drivers installed. The best computer for graphic design The best computers for video editing In terms of resolution, look for WQHD (Wide Quad High Definition) – which gives you a pixel count of 2,560 x 1,440 – and a wide aspect ratio of 21:9. Meanwhile, another handy feature to check for is whether the display can also do picture in-picture or side-by-side, so you can connect up a couple of sources (like two computers, or a computer and tablet) to the same display. Finally, flat or curved? We believe a flat screen is still better for design work, but increasingly the market for large widescreen monitors has moved towards curved displays. Certainly on a flat 34-inch display the sides can feel a little distant. A curved screen will also slightly reduce the amount of side-to-side movement you have to do with your head. If you opt for one, remember to ensure you set up the monitor at an appropriate distance and height from your sitting position. Here are the best ultrawide monitors you can buy right now. The best ultrawide monitors in 2018 Our top choice for the best ultrawide monitor overall, the Dell Ultrasharp U3415W monitor has wide appeal. It delivers impressive image quality with rich, near-perfect colours, high contrast, WQHD resolution (3,440 x 1,440) and a cinematic aspect ratio of 21:9. Dell’s design ethos has changed dramatically over the years, and the world’s third-largest PC manufacture now makes some pretty desirable gear. Alongside its excellent XPS devices, the firm has carved a great reputation for its displays, thanks to their winning combination of excellent panels and competitive pricing – and for us, the U3415W takes the crown. Sure, this isn’t the best-looking widescreen monitor you’ll find on the market, but it’s still elegant, and makes for a fantastic display for the money. There’s picture-in-picture and dual input support, while USB upstream 3.0 ports in the display mean you can use a keyboard and mouse or other peripherals with more than one computer or other device. Throw in its premium build quality and fantastic out-of-box accuracy, and the Dell Ultrasharp U3415W is easily out top choice for best ultra-wide monitor for creative pros. Designed for gaming, the LG 34UC79G is a well-priced ultrawide monitor with DisplayPort plus dual HDMI. There is a potential downside: at 2560x1080, it doesn’t have as high a resolution as more expensive options – LG instead opted for native 144Hz performance. However, we’d choose colour accuracy, contrast and motion blur reduction over a high pixel count – and in most of those areas the LG 34UC79G delivers. It has a great contrast ratio and black levels, alongside vibrant colours, but it does require some calibration for maximum accuracy. The monitor also features a couple of technologies designed to improve gaming performance, including AMD FreeSync (50-144Hz range) to reduce stuttering and motion blur. There’s a fast 1ms response time, too. A cheaper 29-inch version is also available. Curved screens aren’t for everybody, but the Samsung CF791 ultrawide monitor has a sleek design with minimal bezels on three sides and the curve isn’t so exaggerated that you’ll feel cocooned. It will, however, mean a much more immersive experience and if that’s what you’re after for your design work, then look no further – this is also probably the best ultrawide monitor for video editing you can get too. Thanks to its Quantum Dot screen tech, after some calibration the Samsung CF791 delivers rich, sharp and very accurate colours, alongside a stellar contrast ratio. This screen also has some technologies – such as a fast refresh rate and AMD’s FreeSync – that will appeal to gamers. It doesn’t, however, have a response time that’s as good as the LG above (4ms instead of 1ms). Picture-in-picture is supported, or you can view two inputs side-by-side. Need even more screen real estate? The Dell U3818DW is a huge, curved, 37.5-inch display – and at not far off a metre, it's the biggest ultrawide monitor we’ve got for you in this buying guide. As you would expect, it costs more than the 34-inch options here, but Dell's not just upped the physical size of the screen – there’s a bump in resolution, too, with 3,840 x 1,600 WQHD+. Picture-in-picture and dual input is supported, while there’s DisplayPort and dual HDMI inputs. USB-C is also supported, too, for easier connectivity to new Macs, while there are also two upstream and four downstream ports for connecting peripherals to more than one PC or Mac. If you need an even larger screen, this is one of the best ultrawide monitors you can consider. Although the Acer Predator X34P is aimed at gamers, this 34-incher will have wide appeal because it has a more striking design than many of the others out there. Again the screen is gently curved, with accurate colours and good contrast after calibration, and there’s HDMI and DisplayPort support. Boasting Nvidia G-Sync and a 120Hz refresh rate, there are few audiences that the Predator won’t satisfy, although, of course, gaming is its primary use. The disadvantage is that it isn’t cheap, which makes it hard to justify over several of the other, better priced options here. Featuring Nvidia G-Sync for stutter-free gaming, The AOC Agon AG352UCG is our gaming choice if you’re not prepared to put up with the lower resolution of the LG above (and you can stump up the extra cash for this model). Again this display is gently curved and there are also a couple of AOC technologies to improve gaming colours and shadows. The stand is height-adjustable, too. The rear of he screen features a striking ‘winged’ design so won’t be for everybody. It’s a little bit of an odd combination since the front of the display is rather utilitarian in appearance. There are a few options at the lower end of the scale, though it's harder to find screens that we’d recommend. This LG 25UM58 model is a lot smaller than other other options, at 25-inches, and features a lower resolution than many. But if an ultrawide monitor is what you want, you might be pulled in by the low price point because this display has been available for a couple of years now. A 29-inch version is also available from some sellers, although we think you’d be better off upgrading to one of the 34-inch models here, if you’re considering that size. Related articles: View the full article

One of the single best features of CSS processors is variables. Having the ability to declare once and reuse the variable across your project should not be optional in any system. 5 hot new CSS features and how to use them Using a preprocessor like Sass (find out more in our article on what is Sass?) gives you at least one extra build step, which can be a pain if you just want to build a thing fast. CSS has come a long way since the dark days of table hacks, so let's look into one of the most useful aspects: custom properties. We'll start with a simple example. The :root pseudo selector targets the highest-level parent element in the DOM, giving all elements access to --color-red. Yes, CSS variables definition should start with --, and you can access them anywhere with var(). Well, anywhere that is cascaded under our :root selector. With var() you can also define a fallback value, which will be used if the given variable is unreachable or non-existent With var() you can also define a fallback value, which will be used if the given variable is unreachable or non-existent for the class. Values are inherited from the DOM, which means you can make them more specific. Every var(--color) is red, except every var(--color) under site-navigation. Generally speaking it's not an ideal practice to overwrite a value that is already defined but there are cases in which a scoped value is still the most adequate solution. These are the basics but you can do so much more. A useful example for responsive web design is changing layout based on viewport size. Under 640px the media query triggers, changing the flex direction to column on site-navigation class, making its content vertical (column) instead of the default horizontal (row). In this example, because of the default variable given to site-navigation, you don't even need the initial :root definition of --flex-layout; instead it will actually go straight to row. Under 640px the media query triggers, changing the flex direction to column and making the content vertical instead of horizontal This is cool but it's not all fun and games just yet. For instance, since the media query is not an element, the breakpoint value cannot come from a custom property. Although CSS Working Group has a draft of using env() for queries, vendor implementation and proper support is probably years away from where things are today. That's okay. We will stick to what we have now. One more advanced use case for a custom property is switching themes. You can define a base theme, build your website around it and just switch it out, with the browser doing the heavy lifting. And it's not even that heavy. Essentially, think of it being along the lines of Twitter's Night Mode, but without you actually switching the CSS (I see you). Input colour's picked value replaces the document's --color value, making the change without a hitch. You can play with blend modes, alpha channel colours or pngs – endless possibilities and fun. You can build your website around a base theme and just switch it out, with the browser doing the heavy lifting Now with your future-proof CSS in place, which doesn't depend on any third-party developer and uses only custom properties, there is a good chance you are covered and ready to kick-start production. But what if you want something other than variables in your code, let's say CSS modules? As of today, for existing CSS features like modules or nesting, you couldn't spare the extra build step any longer, but you can implement it with the sweet promise of not having to rewrite code when vendors catch up with the spec. Instead of refactoring your CSS every time you want to improve your output, you should write your code in a specification aligned that way in the first place. This is the main difference between pre- and post-processors. A preprocessor actually writes the CSS for you (basically, from a text file), while a post-processor aligns your already valid CSS for more browser support, the latter giving you more flexibility in the process. Using the native method always beats the workaround, and having the working knowledge of future technologies is the best position you can be in when learning CSS. This article was originally published in issue 306 of net, the world's best-selling magazine for web designers and developers. Subscribe to net here. Related articles: 5 tips for super-fast CSS Understanding the CSS display property CSS tricks to revolutionise your web layouts View the full article

Thanks to its creative opportunities and booming economic success, the gaming industry is a popular route for 3D artists looking for work. However, just like any successful sector, getting your foot in the door is easier said than done. Studying portfolio examples is a great way to learn how to present your work to potential clients, but we went one step further and asked Airship Images producer Declan Paul for his advice on how you should showcase your projects. Check out his tips below. Push start on your 3D video game career 01. Art first What employers want to see first and foremost is your art. Make sure your work is the main attraction and that navigating your portfolio is as straightforward as possible. Remember, you need to win someone over within the first few seconds they look. Use ArtStation to create an effective and easy-to-use portfolio site. 02. Quality over quantity Airship Images worked on various character assets for Star Wars Battlefront II One or two great projects is infinitely better than multiple mediocre ones. When you’re putting together your portfolio be sure to include only your best work. Don’t become too attached to old projects, be objective and if you need help ask other artists for their opinions. Keep in mind that you are only as strong as your weakest project. 03. Fundamentals are key Employers are looking at your portfolio and assessing how well you grasp the fundamentals (e.g. perspective, light, anatomy and composition). Having a solid understanding of these is vital and will shine through in your work. 04. Take your art through the pipeline Airship Images has worked on a range of AAA titles It’s important to have projects where you take an asset through the full pipeline. A portfolio consisting of only sculpts will not give us enough confidence that you’ll be able to handle the rest of the work you’ll encounter if hired. 05. State position you intend to fill Make sure you state the position you are hoping to fill on your website; there’s no need to write ‘student’, ‘student artist’ or ‘aspiring’. ‘Character Artist – Seeking Work’ is a better choice and looks far more professional. 06. Be careful when adding group work At Airship we prefer to see personal work as opposed to group work as often it can be difficult to determine exactly what you contributed. If you’re including group work in your portfolio, make sure it’s clearly labelled and you include breakdown shots to show what you worked on. 07. Be consistent Consistency throughout your portfolio is generally preferred, as it makes you look more professional from the offset. This ranges from having the same page layout for each project to the same image layout for each breakdown. This article originally appeared in issue 236 of 3D World, the world's leading magazine for 3D artists. Buy issue 236 or subscribe here. Related articles: Perfect your animation portfolio with these tips 8 inspiring digital art portfolios and why they work Create an atmospheric game environment View the full article

If you're looking to launch a career in web design, you've come to the right place. Pay What You Want: Learn to Web Design will teach you how to break into the field, with 75 hours of comprehensive training. Take a beginner's course in Adobe Photoshop, so you can start producing professional-looking photos, learn how to build responsive and engaging websites with Bootstrap, use HTML and CSS to practise designing your very own site and discover how to build great interfaces with jQuery UI. Get the Pay What You Want: Learn to Web Design bundle for whatever price you want to pay. Related articles: The web designer's guide to Flexbox An essential guide to web design etiquette The best colour tools for web designers View the full article

Good visual design is becoming easier and easier to come by. It's getting harder to tell who's got real design chops, and who just has access to really nice website templates or UI kits. This means that in order to create an impactful user experience, you need to go above and beyond what people are expecting. Some of the most memorable touches are the small ones. Think of MailChimp's famous 'monkey hand high five' that shows up when you hit Send on your campaign. Instead of a general success message, as you might expect, they dug a little deeper, and worked their brand into the experience. We won't be animating any monkey paws here, but we will make a colourful loading animation that's easy to customise with your own brand colours and logo. You can see InVision's example below: Here's one we made earlier We'll use After Effects to create the loading animation sequence, and then bring our exported video file into Photoshop and turn it into a lightweight GIF that can be launched anywhere you need an animated loading element. Before you dive in, you'll need to pick out four brand colours and have a small, single-colour, transparent version of your logo handy. If you've been meaning to learn After Effects, this is a perfect opportunity for you to jump in, create something uniquely yours, and learn some great basic techniques in the process. Watch this exclusive screencast, or follow the steps below to create your loading animation. 01. Create a new sequence Create a new sequence, setting the width and height to 120 pixels Open up After Effects and press cmd+N to create a new sequence. Since our video is going to be a square, instead of the standard 16:9 aspect ratio, change the width and height to 120px in the composition settings and click OK. The recommended final output of our GIF will be 60px, but we want to be able to account for Retina screens, too. 02. Sort out your workspaces Set your workspace to Standard so we're all working on the same layout Before we continue, let's make sure our After Effects workspaces are the same. In your top menu, go to Window > Workspace > Standard. This way, when I say "Click that thing at the bottom right of your screen" it will actually be at the bottom right of your screen. 03. Make some shapes Draw some shapes to form the basis of the animation Now let's create a handful of square shapes that will become our animated blocks of colour. Click on your sequence (the black square in the middle of the screen), press Q, then Shift+click and drag a square on screen so the edges extend just outside the edges of the composition. It's good practice to centre the shape perfectly on screen. In the Align panel at the bottom-right, click Horizontal Center Alignment and Vertical Center Alignment. 04. Add colour Adjust the fill colour of your shape While your shape is still selected, click the Fill colour option at the top of your screen and enter one of your primary brand colours as a hex or RGB value. You can also use the eyedropper tool to sample colours from anywhere else on screen, including colours outside of the After Effects window, which is helpful. 05. Duplicate your layers Save time by simply dupilicating your layers Along the bottom of your screen you'll see a timeline with a single layer named 'Shape Layer 1'. Select it by clicking on the name or the blue bar in the timeline, and press ctrl/cmd+D four times to duplicate it. You should end up with five identical layers in your timeline. These will be entitled Shape Layer 1, 2, 3, 4 and 5. 06. Use anchor points Change the location of the anchor points on each of your shapes Each shape is going to animate in from a different side of the screen. To make that easy, we'll change the location of our anchor points ahead of time. Select Shape Layer 2 and press Y to bring up the Anchor Point tool. Then click on your anchor point (it looks like crosshairs somewhere inside your shape) and drag it to the bottom edge of your square. Repeat on layers 3-5, placing each anchor point on a different edge than the last. You don't need to do anything to Shape Layer 1. 07. Stagger the timing Stagger the timing of your layers so they animate in sequence Now it's time to stagger the timing of our shapes in the timeline. Press V to switch to your selection tool, and in your timeline shift+click the blue bars for layers 3-5 and drag them to the right, spacing each out by one second. They should begin at the 1, 2, and 3 second marks in your timeline. If your timeline is too zoomed out, hold down alt and scroll down – this action will zoom you in and out of your timeline. 08. Add more colours Change the fill colours of your other layers to match your brand's palette Individually select shapes 2-4 and change their fill colour like you did back in step 4. You can drag your playhead (the vertical red progress line) over the shape you're editing to see your changes take place. We'll leave Shape Layers 1 and 5 the same colour, because we'll be creating a loop that starts and ends on the same colour. If that doesn't make sense right now, don't worry – it will. 09. Do a first preview Hit the spacebar to preview It's time to preview your handiwork so far. Press the spacebar and watch the colours change on screen. Hit spacebar again to stop it (or esc if this doesn't work). 10. Create a keyframe It's time to create your first keyframe! Click and drag your playhead back to the beginning of your timeline. Select Shape Layer 2, then press S on your keyboard to bring up the scale options for that shape. Now click the stopwatch icon next to Scale, turn off the link icon next to the scale percentages, and drag the second value down to 0%. A small diamond will show up on your timeline at your playhead's current location. Congratulations, you just created a keyframe! 11. Make another keyframe Tell you what, let's add another keyframe Drag the playhead up to 1 second and set your shape's value back to 100 per cent. Another keyframe should show up in your timeline at the playhead. Drag the playhead back to the beginning of your timeline and press spacebar to preview your animation. You should see the shape scale up and cover Shape Layer 1. 12. Make more keyframes Keyframes all round! Repeat those steps again on Shape Layers 3-5, each time starting your animation at the beginning of the layer's blue bar, which we staggered by 1 second earlier on. When you're done, the first keyframe of each layer should line up with the last keyframe of the layer below it. 13. Preview again Preview again and see everything coming together When you've finished adding your keyframes, preview your work. You should see different shapes sliding in on top of each other from different angles. If that's the case, move your playhead to 4 seconds and hit N. This will mark the end of your animation, and loop your preview when you hit spacebar again. If Shape Layer 1 and Shape Layer 5 are the same colour, it should form a seamless loop. 14. Adjust the easing Tweak your framerate velocity to make your animation slow down at the end It's almost time to add your logo, but not quite. The animation right now is probably looking a little linear (read: boring) – let's liven it up by changing the easing. While holding the shift key, select the final keyframe of each layer, and right-click on one. Choose Keyframe velocity, then set the incoming velocity to 100 per cent and leave Dimension X and Y alone. Click OK and preview again. You'll notice the animations slow down at the very end, creating a more dynamic feel. 15. Add a logo Add your logo on top of the animation Now we're ready to add your logo on top of the animation. In the project panel at the left of your screen, double-click the empty area below Comp 1 and import your image file (it's best if it's a transparent image format, like a PNG or EPS.) Then drag it into the beginning of your timeline, making it the topmost layer. You can hit S again to scale your logo up or down, and use the Align panel again to place it dead centre in the composition. 16. Preview and export Preview your animation then export it When you're happy with the size and placement of your logo, click play again and make sure everything still looks good. If it does, it's time to export your video. Go to File>Export>Add To Render Queue, then set your render settings to Best, output module to Lossless, and choose where to put your video file by clicking the file name in the Output To area. 17. Go to Photoshop Converting video to GIF is an easy job in Photoshop Now it's time to boot up Photoshop and convert our video to an animated GIF. In Photoshop, go to File>Import>Video Frames to Layers and select your video file. On the following prompt you have the option of adjusting a number of import settings for you video. However, since this animation is so short, we'll just click OK. 18. Check it's all good Preview your animation again before exporting it as a GIF To make sure nothing looks funky with your GIF in Photoshop, go to Window>Timeline to bring up the timeline, and click the play button in the bottom left-hand corner. Playback may not be at 100% speed, so don't worry too much if it seems slow. You just want to make sure everything has come through OK and that it all seems smooth and seamless when looping. 19. Export your GIF Save your animation, selecting 'forever' as your loop setting To save your GIF, press ctrl/cmd+alt+shift+S to bring up the Save for Web window. At the very top, select GIF as the file type and in the preset drop-down above that, choose GIF 128 No Dither. Near the bottom of the window you can adjust the image size down to 60px for final output. Make sure the animation looping settings are set to Forever, because much like diamonds, a GIF is forever (or at least it should be, anyway). 20. You're all done! The animation is complete and ready for use Congratulations! You now have a handmade, branded GIF that you can implement on your website or app, use to add realistic 'loading' states to your prototypes, or put up on Dribble or Behance for all the world to see. This article originally appeared in net, the world's leading magazine for web designers and developers. Subscribe here. Read more: 10 amazing After Effects plugins How to create an animated typing effect 5 tips for super-fast CSS View the full article

Until now, formalised health data has been inaccessible to consumers, stored on hospital computers or retained by third-party companies to be sold on to large pharmaceutical conglomerates. However, new products and services are signalling times of change by giving users immediate access and ownership of their own personal medical information. For The Future Laboratory's recent Health & Wellness Futures Forum, we created Bio Tracker, a speculative platform that enables people to explore the future of democratised data ownership, where consumers, not pharmaceutical companies, are in charge of their health data. Sign up to the Computer Arts newsletter In the near future, consumers could manage their health data through platforms like Bio Tracker, which would allow them to review which companies have access to their clinical records, and also select which information to exchange for brand partnerships and exclusive product rewards. From occasional users hoping to claim product discounts to sharing enthusiasts selling their data in exchange for universal basic income, the emergence of data tracking and trading services will give rise to completely new consumer behaviours and desires. The Bio Tracker concept is based on innovations emerging at the intersection of healthcare and technology. An early example of this is a new feature in the Apple Health app that will aggregate medical data from participating hospitals and clinics, as well as from the iPhone, giving users immediate access for the ultimate convenience. Digital health platforms like Bio Tracker will allow users to trade data with carefully selected brands, exchanging the information for exclusive insights and rewards Blockchain technology is taking this one step further by providing new opportunities for peer-to-peer services that not only enable people to take control of their own health-related data, but monetise it too. CoverUS’s blockchain-based data marketplace allows consumers to generate a biometric revenue stream by populating their digital wallet with information from an electronic health record (EHR). The brand pays for the data collected through the fixed-price cryptocurrency CoverCoin, which, in the future, the company hopes users will be able to spend on services such as gym membership. In the near future, you may have more say in who has access to your health data than ever before Citizen Health is a healthcare community built on the Ethereum blockchain that aims to eradicate the health insurance model. Billed as a ‘decentralised Amazon for surgeries, treatments and other healthcare needs’, the brand also aims to monetarily incentivise people to lead healthier lifestyles by collating data from popular health and fitness trackers, using its algorithm to calculate changes in the user’s health score over time. It awards Medit tokens, which can be exchanged for exclusive rewards. With such significant consumer shifts already happening, it’s only a matter of time before we each have our own unique Bio Trackers. The big question is, how will you trade your personal health data? This article was originally published in issue 283 of Computer Arts, which is out now – buy it here. Read more from The Future Laboratory here and subscribe to Computer Arts here. Read more: The future of branded cities The ultimate guide to design trends How to future-proof yourself as a designer View the full article

Creating a new brand can seem like a daunting task. How do you represent yourself and services to your target audience in the right way? There are many things to consider, from picking a colour scheme and logo design to nailing your style guide and tagline. But don’t worry, creating a winning brand isn’t nearly as scary as it sounds. Let’s talk about a few simple but powerful factors that will help you wrap everything up: logo design, brand style guide and imagery. Design a logo with personality A vital part of a company’s marketing efforts, a quality logo can go a long way towards building brand loyalty and recognition. The best time to start thinking about a logo that successfully represents your brand is after you’ve decided which adjectives or attributes best describe the concept you’ve created. Think about your brand promise and the unique characteristics of your product to help give it personality. Once all of these aspects are finalised, you can get cracking on the fun part - designing your logo. Need some help? Why not consider teaming up with a designer, or using an online logo maker to help shape your ideas? Your brand’s logo should be aligned with your brand values and communicate its personality, so you may find your design goes through various iterations before you’re completely happy with it. If you need a starting point, there are tons of logo templates over at Placeit, which you can experiment with. Create a style guide Another important step to creating a winning brand is a style guide - a document that contains all the ground rules about how your brand should look in visual media. This includes guidelines for proper logo usage; typography hierarchy and use on presentations, letters, and other official statements. The core colour palette and complementary colours, imagery style and often brand narrative and tone are included also. Taking the time to create a brand style guide will ensure your brand’s visual consistency and professionalism in all internal and external communication channels. Implementing brand guidelines makes it easier to maintain the quality and integrity of your brand’s image. Need some help getting started? Get expert advice in our post on how to create a style guide. Use images that pack a punch Imagery is part of a brand identity that can often go overlooked. But using images that resonate with your target audience and stand out is key. There are many ways of building up your own library of assets, including hiring a photographer. But that’s one way to quickly rack up a hefty bill. To save yourself some time and money, why not create them yourself? After all, being creative is what you do best, right? And if you need a hand sorting your images for social media, there are dedicated social media image makers that have you covered. You can also use these handy mockups by Placeit, which make creating the perfect images to promote your product a cinch. Customisable and available in a wide variety of stages and moods, going from devices to apparel, you’re sure to find one in-keeping with your style guide. No design software required, simply browse the gallery, find the mockups that best suit your brand, upload your assets, pick your brand’s colors, and create your images hassle-free. Try Placeit’s Unlimited Subscription and access its full library of mockups and design templates to enhance your presentations and brand image while saving precious time. All for just $29 a month! View the full article

A remote, unauthenticated attacker could execute arbitrary commands on systems with the privileges of the Ghostscript code. View the full article

With an OS design based on a verified microkernel, researchers contend almost all Linux OS flaws could be mitigated to less than critical severity. View the full article

Good news for fans of Monument Valley: the phenomenally successful iPhone and iPad game by ustwo games is set to make the leap from mobiles to movie theatres as it was announced today that a live action/CGI hybrid film has been given the green light. Picked up by Paramount Pictures and Weed Road Pictures, the project is due to be directed by Patrick Osborne. If the movie can match the stunning, Escher-like visuals that the two games in the series are known for, then cinema-goers are in for a treat. Rumours of a Monument Valley film had been circling the internet for some time, and the team behind the games were only too happy to confirm via a tweet earlier today. The games, which ustwo games describes as "a surreal exploration through fantastical architecture and impossible geometry" see players guide characters through ever-shifting landscapes and outsmart crow people adversaries. A creative and commercial success, the Monument Valley games have been downloaded millions of times worldwide and the first instalment scooped both the Apple Design Award and the Apple iPad Game of the Year in 2014. Add two BAFTAs, and it's no surprise that Monument Valley will soon be coming to a cinema near you. "Monument Valley is a one of a kind experience, at once small in its meditative, simple gameplay, as well as enormous in its sense of history," Osborne told Deadline. "I'm privileged to be handed the reins to Ida’s mysterious kingdom, to play in her world of impossible architecture where seeing things differently is everything. I am thrilled to bring this unique world to theatres with the talented storytellers of Paramount and Weed Road." "It's been four years since we launched the first Monument Valley and have been waiting for the perfect opportunity to take our world of beauty and impossibility into cinema," added head of ustwo games, Dan Gray. "We’re incredibly happy that we’ve found the perfect creative partners in Paramount, Weed Road and Patrick Osborne to champion this concept forward into another medium." Related articles: The making of Monument Valley Monument Valley is an Escher-inspired iOS treat Monument Valley 2 is here... and it’s beautiful View the full article