How to pick the perfect colour palette every time

/0 Comments/in /by

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/YE0lZ2Ep6Ho/how-to-pick-the-perfect-colour-palette-every-time

In the 1980s, colour psychologist Angela Wright revolutionised colour theory by identifying links between patterns of colour and patterns of human behaviour. She found that all colours can be classified into one of four tonal groups, and that mathematical relationships underpin the shades and tones within each group. In other words, Wright proved objective colour harmony.

She went on to develop the Colour Affects System, which identifies links between the four colour groups and four basic personality types, based on original research involving Aristotle, Newton and German writer Johann Wolfgang von Goethe.

If harnessed correctly, designers can use the Colour Affects System to control the message of their colour palettes and, crucially, kill subjective debate around colour in client meetings with evidence to back up their decisions. Here's how it works…

Colour Affects System: the basics  

Bp logo

BP uses group 1 colours: clear, delicate and warm

Every shade, tone or tint on the colour spectrum can be classified into one of four colour groups, based on how warm or cool it is. All colours within each group correlate mathematically and naturally harmonise, while colours combined from different families don't. 

There are also four basic personality types – ranging between extrovert and introvert – and each type has a natural affinity with one colour group. Universally, everyone will find a palette chosen with colours from the same group harmonious, but they'll find a palette drawn from their personality type's corresponding colour group even more attractive.

You'll find a breakdown of the different colour groups on the next page.

Dreams logo

Bedding firm Dreams uses elegant and timeless group 2 colours
Colour in harmony 

"Music and colour work in much the same way," explains Wright, who developed the Colour Affects System from her earlier research, The Wright Theory. She's provided colour palettes for clients ranging from Shell International Petroleum Company and Procter & Gamble to BT, Unilever, and more. 

"One musical note has its own properties, but it doesn't do much until you put it with other notes. There are no wrong notes, and there are no wrong colours, either. It's how you use them. If you put them together in harmony, they produce a positive response. But it only takes one bum note to throw the whole thing out."

Currently, Wright is working on a digital version of the Colour Affects System, which will be launching at the end of this year. The software enables users to select their starting colour – the dominant logo colour, for instance – and then classifies it into one of the four groups, removing all colours from the other three groups. Users are left with a huge, harmonious selection from which to then develop a brand's colour palette. 

McDonald's logo

McDonald’s corporate colours are mainly group 3: intense and fiery

"You pick the subsequent colours for your branding scheme in the same way as you do now," Wright explains. "You've got a large framework – there are millions of colours to choose from – except there are no bum notes, because there are mathematical correlations that underpin each colour," she adds. 

How effective is the Colour Affects System?

A few years ago, Wright was asked by a mail order company to adjust the colours of a leaflet selling an opera CD. "The in-house design team had created a leaflet and they wanted me to tweak the colours into harmony," she recalls. "The ones they'd used were okay – quite familiar – but they're weren't right, either psychologically or harmoniously."

texaco logo

Texaco uses a group 4 palette, suggesting efficiency, sophistication and excellence

Wright adapted the colours so that the chosen palette came from the same tonal family. "They sent out two identical mail shots, and they sold 560,000 more CDs with the tweaked leaflet than the original," she says. 

"And all I did was tweak the harmony after it had been designed – I didn't specify the colours used in the first place." It seems the right colours do sell.

Next page: the four colour groups revealed

Group 1: Type 1 personality

group 1 colours

Group 1 colours are often used for fun brands

Group 1 colours are clear, delicate and warm, and contain yellow, but no black. Examples include soft cream, turquoise and cobalt. "They're lively, sharp, fresh, clean and youthful – all about new beginnings," says Wright. 

"It's very common to use them in the branding of things like children's toys, PR, sales, sport, and fun sectors of anything." However, if misused, these colours can be perceived as frivolous and immature. 

Personalities that reflect these colours are "externally motivated and eternally youthful". Light on their feet, these people love to dance and are clever, but don't like being bogged down with academic debate.

Group 2: Type 2 personality

Group 2 colours

Group 2 colours reflect understated elegance and timelessness, but are seen as recessive

Group 2 colours are cool (they contain blue), mid range (most contain grey) and delicate, but not necessarily light – for example raspberry, maroon or sage green. Characteristics include understated elegance and timelessness.

"The personalities are cool, calm and collected," says Wright. "They're internally motivated, but very sensitive to how others are feeling. They don't want to be at the forefront of anything, but they'll be the power behind the throw. In branding terms, these colours are rarely – if ever – used, because they're very recessive," she explains.

Group 3: Type 3 personality

Group 3 colours

The Group 3 palette features quite flamboyant and unusual colours

Group 3 colours are warmer than group 1 (they contain more yellow-based hues), are intense and fiery, and contain black. Examples include olive green, burnt orange and aubergine. "They're quite flamboyant and unusual; you don't get many primaries in there," says Wright. "And the personalities are strong. Like type 1, they're externally motivated – but they're fiery, even if it isn't immediately apparent."

Friendly, traditional and reliable, these tones are popular in branding and work for well-established companies. However, they can convey bossiness or appear old-fashioned if they are misused.

Group 4: Type 4 personality

Group 4 colours

Group 4 suggests efficiency, sophistication and excellence, but also expense and unfriendliness

Group 4 colours contain blue and are cold rather than cool. They're pure and either very light, very dark or very intense. "The personalities are the same – very clear; everything's black and white," says Wright, adding that type 4 personalities are internally motivated, often very efficient and don't suffer fools.  

Containing black, white, magenta, lemon and indigo, this group's characteristics include efficiency, sophistication and excellence – but misused, the colours can be seen as unfriendly, materialistic and expensive.

This article originally appeared in Computer Arts, the world's leading graphic design magazine. Subscribe here.

Related articles:

21 outstanding uses of colour in branding5 unusual uses of colour in logo designThe designer's guide to using colour in branding

The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM

/0 Comments/in /by

Original Source: https://www.smashingmagazine.com/2018/07/reusable-components-custom-elements-shadow-dom-npm/

The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM

The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM

Oliver Williams

2018-07-16T13:30:58+02:00
2018-07-16T17:29:08+00:00

For even the simplest of components, the cost in human-labour may have been significant. UX teams do usability testing. An array of stakeholders have to sign off on the design.

Developers conduct AB tests, accessibility audits, unit tests and cross-browser checks. Once you’ve solved a problem, you don’t want to repeat that effort. By building a reusable component library (rather than building everything from scratch), we can continuously utilize past efforts and avoid revisiting already solved design and development challenges.

A screenshot of Google’s material components website – showing various components.

Large preview

Building an arsenal of components is particularly useful for companies such as Google that own a considerable portfolio of websites all sharing a common brand. By codifying their UI into composable widgets, larger companies can both speed up development time and achieve consistency of both visual and user-interaction design across projects. There’s been a rise in interest in style guides and pattern libraries over the last several years. Given multiple developers and designers spread over multiple teams, large companies seek to attain consistency. We can do better than simple color swatches. What we need is easily distributable code.

Sharing And Reusing Code

Manually copy-and-pasting code is effortless. Keeping that code up-to-date, however, is a maintenance nightmare. Many developers, therefore, rely on a package manager to reuse code across projects. Despite its name, the Node Package Manager has become the unrivalled platform for front-end package management. There are currently over 700,000 packages in the NPM registry and billions of packages are downloaded every month. Any folder with a package.json file can be uploaded to NPM as a shareable package. While NPM is primarily associated with JavaScript, a package can include CSS and markup. NPM makes it easy to reuse and, importantly, update code. Rather than needing to amend code in myriad places, you change the code only in the package.

Getting workflow just right ain’t an easy task. So are proper estimates. Or alignment among different departments. That’s why we’ve set up “this-is-how-I-work”-sessions — with smart cookies sharing what works well for them. A part of the Smashing Membership, of course.

Explore features →

Smashing TV, with live sessions for professional designers and developers.

The Markup Problem

Sass and Javascript are easily portable with the use of import statements. Templating languages give HTML the same ability — templates can import other fragments of HTML in the form of partials. You can write the markup for your footer, for example, just once, then include it in other templates. To say there exists a multiplicity of templating languages would be an understatement. Tying yourself to just one severely limits the potential reusability of your code. The alternative is to copy-and-paste markup and to use NPM only for styles and javascript.

This is the approach taken by the Financial Times with their Origami component library. In her talk “Can’t You Just Make It More like Bootstrap?” Alice Bartlett concluded “there is no good way to let people include templates in their projects”. Speaking about his experience of maintaining a component library at Lonely Planet, Ian Feather reiterated the problems with this approach:

“Once they copy that code they are essentially cutting a version which needs to be maintained indefinitely. When they copied the markup for a working component it had an implicit link to a snapshot of the CSS at that point. If you then update the template or refactor the CSS, you need to update all versions of the template scattered around your site.”

A Solution: Web Components

Web components solve this problem by defining markup in JavaScript. The author of a component is free to alter markup, CSS, and Javascript. The consumer of the component can benefit from these upgrades without needing to trawl through a project altering code by hand. Syncing with the latest changes project-wide can be achieved with a terse npm update via terminal. Only the name of the component and its API need to stay consistent.

Installing a web component is as simple as typing npm install component-name into a terminal. The Javascript can be included with an import statement:

<script type=”module”>
import ‘./node_modules/component-name/index.js’;
</script>

Then you can use the component anywhere in your markup. Here is a simple example component that copies text to the clipboard.

See the Pen Simple web component demo by CSS GRID (@cssgrid) on CodePen.

A component-centric approach to front-end development has become ubiquitous, ushered in by Facebook’s React framework. Inevitably, given the pervasiveness of frameworks in modern front-end workflows, a number of companies have built component libraries using their framework of choice. Those components are reusable only within that particular framework.

A component from IBM’s Carbon Design System

A component from IBM’s Carbon Design System. For use in React applications only. Other significant examples of component libraries built in React include Atlaskit from Atlassian and Polaris from Shopify. (Large preview)

It’s rare for a sizeable company to have a uniform front-end and replatorming from one framework to another isn’t uncommon. Frameworks come and go. To enable the maximum amount of potential reuse across projects, we need components that are framework agnostic.

A screenshot from npmjs.com showing components that do that same thing built exclusively for particular javascript frameworks.

Searching for components via npmjs.com reveals a fragmented Javascript ecosystem. (Large preview)

A graph charting the popularity of frameworks over time. Ember, Knockout and Backbone have plunged in popularity, replaced by newer offerings.

The ever-changing popularity of frameworks over time. (Large preview)

“I have built web applications using: Dojo, Mootools, Prototype, jQuery, Backbone, Thorax, and React over the years…I would love to have been able to bring that killer Dojo component that I slaved over with me to my React app of today.”

— Dion Almaer, Director of Engineering, Google

When we talk about a web component, we are talking about the combination of a custom element with shadow DOM. Custom Elements and shadow DOM are part of both the W3C DOM specification and the WHATWG DOM Standard — meaning web components are a web standard. Custom elements and shadow DOM are finally set to achieve cross-browser support this year. By using a standard part of the native web platform, we ensure that our components can survive the fast-moving cycle of front-end restructuring and architectural rethinks. Web components can be used with any templating language and any front-end framework — they’re truly cross-compatible and interoperable. They can be used everywhere from a WordPress blog to a single page application.

The Custom Elements Everywhere project by Rob Dodson documents the interoperability of web components with various client-side Javascript frameworks.

The Custom Elements Everywhere project by Rob Dodson documents the interoperability of web components with various client-side Javascript frameworks. React, the outlier here, will hopefully resolve these issues with React 17. (Large preview)

Making A Web Component

Defining A Custom Element

It’s always been possible to make up tag-names and have their content appear on the page.

<made-up-tag>Hello World!</made-up-tag>

HTML is designed to be fault tolerant. The above will render, even though it’s not a valid HTML element. There’s never been a good reason to do this — deviating from standardized tags has traditionally been a bad practice. By defining a new tag using the custom element API, however, we can augment HTML with reusable elements that have built-in functionality. Creating a custom element is much like creating a component in React — but here were extending HTMLElement.

class ExpandableBox extends HTMLElement {
constructor() {
super()
}
}

A parameter-less call to super() must be the first statement in the constructor. The constructor should be used to set up initial state and default values and to set up any event listeners. A new custom element needs to be defined with a name for its HTML tag and the elements corresponding class:

customElements.define(‘expandable-box’, ExpandableBox)

It’s a convention to capitalize class names. The syntax of the HTML tag is, however, more than a convention. What if browsers wanted to implement a new HTML element and they wanted to call it expandable-box? To prevent naming collisions, no new standardized HTML tags will include a dash. By contrast, the names of custom elements have to include a dash.

customElements.define(‘whatever’, Whatever) // invalid
customElements.define(‘what-ever’, Whatever) // valid

Custom Element Lifecycle

The API offers four custom element reactions — functions that can be defined within the class that will automatically be called in response to certain events in the lifecycle of a custom element.

connectedCallback is run when the custom element is added to the DOM.

connectedCallback() {
console.log(“custom element is on the page!”)
}

This includes adding an element with Javascript:

document.body.appendChild(document.createElement(“expandable-box”)) //“custom element is on the page”

as well as simply including the element within the page with a HTML tag:

<expandable-box></expandable-box> // “custom element is on the page”

Any work that involves fetching resources or rendering should be in here.

disconnectedCallback is run when the custom element is removed from the DOM.

disconnectedCallback() {
console.log(“element has been removed”)
}
document.querySelector(“expandable-box”).remove() //”element has been removed”

adoptedCallback is run when the custom element is adopted into a new document. You probably don’t need to worry about this one too often.

attributeChangedCallback is run when an attribute is added, changed, or removed. It can be used to listen for changes to both standardized native attributes like disabled or src, as well as any custom ones we make up. This is one of the most powerful aspects of custom elements as it enables the creation of a user-friendly API.

Custom Element Attributes

There are a great many HTML attributes. So that the browser doesn’t waste time calling our attributeChangedCallback when any attribute is changed, we need to provide a list of the attribute changes we want to listen for. For this example, we’re only interested in one.

static get observedAttributes() {
return [‘expanded’]
}

So now our attributeChangedCallback will only be called when we change the value of the expanded attribute on the custom element, as it’s the only attribute we’ve listed.

HTML attributes can have corresponding values (think href, src, alt, value etc) while others are either true or false (e.g. disabled, selected, required). For an attribute with a corresponding value, we would include the following within the custom element’s class definition.

get yourCustomAttributeName() {
return this.getAttribute(‘yourCustomAttributeName’);
}
set yourCustomAttributeName(newValue) {
this.setAttribute(‘yourCustomAttributeName’, newValue);
}

For our example element, the attribute will either be true or false, so defining the getter and setter is a little different.

get expanded() {
return this.hasAttribute(‘expanded’)
}

// the second argument for setAttribute is mandatory, so we’ll use an empty string
set expanded(val) {
if (val) {
this.setAttribute(‘expanded’, ”);
}
else {
this.removeAttribute(‘expanded’)
}
}

Now that the boilerplate has been dealt with, we can make use of attributeChangedCallback.

attributeChangedCallback(name, oldval, newval) {
console.log(`the ${name} attribute has changed from ${oldval} to ${newval}!!`);
// do something every time the attribute changes
}

Traditionally, configuring a Javascript component would have involved passing arguments to an init function. By utilising the attributeChangedCallback, its possible to make a custom element that’s configurable just with markup.

Shadow DOM and custom elements can be used separately, and you may find custom elements useful all by themselves. Unlike shadow DOM, they can be polyfilled. However, the two specs work well in conjunction.

Attaching Markup And Styles With Shadow DOM

So far, we’ve handled the behavior of a custom element. In regard to markup and styles, however, our custom element is equivalent to an empty unstyled <span>. To encapsulate HTML and CSS as part of the component, we need to attach a shadow DOM. It’s best to do this within the constructor function.

class FancyComponent extends HTMLElement {
constructor() {
super()
var shadowRoot = this.attachShadow({mode: ‘open’})
shadowRoot.innerHTML = `<h2>hello world!</h2>`
}

Don’t worry about understanding what the mode means — its boilerplate you have to include, but you’ll pretty much always want open. This simple example component will just render the text “hello world”. Like most other HTML elements, a custom element can have children — but not by default. So far the above custom element we’ve defined won’t render any children to the screen. To display any content between the tags, we need to make use of a slot element.

shadowRoot.innerHTML = `
<h2>hello world!</h2>
<slot></slot>
`

We can use a style tag to apply some CSS to the component.

shadowRoot.innerHTML =
`<style>
p {
color: red;
}
</style>
<h2>hello world!</h2>
<slot>some default content</slot>`

These styles will only apply to the component, so we are free to make use of element selectors without the styles affecting anything else of the page. This simplifies writing CSS, making naming conventions like BEM unnecessary.

Publishing A Component On NPM

NPM packages are published via the command line. Open a terminal window and move into a directory that you would like to turn into a reusable package. Then type the following commands into the terminal:

If your project doesn’t already have a package.json, npm init will walk you through generating one.
npm adduser links your machine to your NPM account. If you don’t have a preexisting account, it will create a new one for you.
npm publish

NPM packages are published via the command line

Large preview

If all’s gone well, you now have a component in the NPM registry, ready to be installed and used in your own projects — and shared with the world.

An example of a component in the NPM registry, ready to be installed and used in your own projects.

Large preview

The web components API isn’t perfect. Custom elements are currently unable to include data in form submissions. The progressive enhancement story isn’t great. Dealing with accessibility isn’t as easy as it should be.

Although originally announced in 2011, browser support still isn’t universal. Firefox support is due later this year. Nevertheless, some high-profile websites (like Youtube) are already making use of them. Despite their current shortcomings, for universally shareable components they’re the singular option and in the future we can expect exciting additions to what they have to offer.

Smashing Editorial
(il, ra, yk)

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and more

/0 Comments/in /by

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/XNbE8pXiflA/ui-inspiration-weeks-selections-slava-kornilov-hristo-hristov-and-more

UI Inspiration: This week’s selections from Slava Kornilov, Hristo Hristov and more

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and more

AoiroStudio
Jul 16, 2018

It’s that time of the week for our collection of UI/UX interactions to boost your UI inspiration. We are focusing on cool animations, layout designs, UX thinking and more. We are mixing it all from static, dynamic and even live prototypes, this might be a great weekly series to bookmark! This week, we are kicking it off with a very cool combination of colours and UI components designed by Slava Kornilov. You should check out another intuitive UI transition by Ning xiao dong about a Wallet App page. Hope this will give you some inspiration!

In this collection we are featuring the work from Slava Kornilov, Hristo Hristov, Adam Przybylski, Shaban Iddrisu™ and more.

More Links
For more, check out Dribbble
Follow my tweets @aoirostudio
Follow my pictures on Instagram
via Dribbble

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Slava Kornilov

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Hristo Hristov

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Adam Przybylski

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Shaban Iddrisu™

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Yuanxu

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Robert Felizardo

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Ning xiao dong

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Abdullah Un Noman

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Veera

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by QiYang

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Aleksandr Lunev

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Netflayo

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by JUST Team

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Josh Parenti

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Christian Puga

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Boja

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Graphic Assets

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Alexandr Kotelevets

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Sunil kumar

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Yolanda ju

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Prometheus x GTR

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Shekh Al Raihan ✪

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by JONDesigner

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Giga Tamarashvili

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Zahidul

UI Inspiration: This week's selections from Slava Kornilov, Hristo Hristov and moreDesign by Divan Raj

ui inspiration
UI/UX
ui design
interaction design


Elegant Brand Identity for MONAJANS branding and digital agency

/0 Comments/in /by

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/fAs7H7x52yw/elegant-brand-identity-monajans-branding-and-digital-agency

Elegant Brand Identity for MONAJANS branding and digital agency

Elegant Brand Identity for MONAJANS branding and digital agency

abduzeedo
Jul 16, 2018

MONAJANS shared a very elegant brand identity project on their Behance profile. The project was done for their company, which always makes it so much more challenging, at least for me. Have you tried to create your portfolio or a logo for yourself? Maybe things have changed now, but for me it’s always been very difficult. I am glad to see that the folks over at MONAJANS manage to accomplish something beautiful for theirs. 

MONAJANS is a a branding and digital agency established in Istanbul which creates, raises and expands brands. Their motives are understanding idea and they apply a strategic and creative mindset for branding and digital solutions, including marketing and communication. For more information make sure to check out http://www.monajans.com/

Brand identity

 

branding


Collective #432

/0 Comments/in /by

Original Source: http://feedproxy.google.com/~r/tympanus/~3/ORWtpDvt6kg/

C432_WOTW

Inspirational Website of the Week: Die Antwort

A beautifully playful web experience with fun animations and lovely details. Our pick this week.

Get inspired

C424_Hello

This content is sponsored via Syndicate Ads
Reinvest Your Time with HelloSign API

G2 Crowd says HelloSign’s API is 2x faster to implement than any other eSign provider. What are you going to do with all the time you save?

Try it free today

C432_typegame

Font Memory Game

Train your ability to distinguish fonts with this fun game.

Check it out

C432_Phenomenon

Phenomenon

Phenomenon is a small, low-level WebGL library that provides the essentials to deliver a high performance experience.

Check it out

C432_addy

I’m Addy Osmani, Ask Me Anything!

A great AMA session with Google engineering manager Addy Osmani.

Read it

C432_tobi

Tobi

A compact, open source lightbox script without dependencies.

Check it out

C432_susty

Delivering WordPress in 7KB

A really inspiring article by Jack Lenox on how and why he built Susty WP.

Read it

C432_undoix

Un Deux Trois

A tutorial on how to reproduce one of Vera Molnár’s generative artworks, Un Deux Trois.

Read it

C432_threejscss

Three.js in Paint Worklet Test

An interesting demo by Ada Rose Cannon where three.js CanvasRender is used to render inside a Houdini paint() worklet. Basically it’s three.js working in CSS!

Check it out

C432_cheat.sh

cheat.sh

Unified access to the best community driven cheat sheets repositories of the world with a curl/browser interface.

Check it out

C432_kleur

Kleur

A Node.js library for formatting terminal text with ANSI colors.

Check it out

C432_brutal

brutal.js

A minimal framework for building raw web applications.

Check it out

C432_scale

SCSScale

A useful SCSS typographic modular scale starter based on the body’s font-size.

Check it out

C432_carbon1

Carbon

A tool to create beautiful images of your code right from your terminal.

Check it out

C432_listitem

Slice list items

Aaron Iker created this nice demo where checked list items are sliced into half.

Check it out

C432_font1

Free Font: Chamuyo

A beautiful typeface designed by Caio Kondo.

Get it

C432_githubissues

Mirror

In case you missed it: a blogging tool powered by GitHub issues.

Check it out

C432_font2

Free Font: Lemon Bird

A playful hand drawn typeface made by Ian Barnard. Free for a registration.

Get it

C432_dahsboard

Shards Dashboard Lite

A free Bootstrap admin dashboard template with some useful UI elements by Designrevision.

Check it out

C432_emojiicons

How to Use Emojis as Icons

In case you missed it: Preethi Sam shows a brilliant trick for using Emojis as icons.

Read it

Collective #432 was written by Pedro Botelho and published on Codrops.

Get more from the Atom text editor

/0 Comments/in /by

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/jy8i-mSzxY4/get-more-atom-text-editor-21619396

Of all the text editors available, Atom is a favourite amongst designers and developers. Atom is developed by GitHub and was open sourced in early 2014. Since then, this web design tool has grown to have more than 500,000 monthly users. Out of the box Atom is Git-aware, includes Markdown previews, auto-complete and more. It is designed to be hackable to the core.

In addition to being open source, Atom is built using web technology: JavaScript, HTML and CSS. This makes Atom's core and extensibility options accessible to a wide range of developers.

In this article I'll share ways in which you can extend and customise Atom, from managing packages to adding custom behaviours.

atom landing page

Atom is built with JavaScript, HTML and CSS
Package ecosystem

At the time of writing, over 7,000 packages and more than 2,000 themes had been published for Atom. Atom itself is created by bundling the core app with dozens of packages for each default feature.

These packages do things like add Markdown preview support, display your directory's Git status, and control Find and Replace. They can be managed through the Settings view. Atom's Settings view sets it apart because it includes a package manager by default, giving you access to the packages you have installed, as well as the thousands created by the community. You can browse and install these from within Atom.

You can open the Settings view by clicking Packages > Settings View > Open in your menu bar or by using the cmd+, keyboard shortcut.

Packages

packages in Atom

Use packages to extend and customise Atom

With the Settings view open, you’ll find the Packages tab on the left. This will display all the packages you have installed, and their type:

Community packages: Packages written by people outside of GitHub's Atom teamCore packages: Developed by the Atom team and bundled with AtomDevelopment packages: Packages you have on your machine and use in Atom from local source

From the Packages view, you can manage your installed packages by selecting to install/uninstall or disable/enable them. Clicking on a package in this view takes you to the package's available settings (if any) as well as the README that describes the package. If you want to know more, you can click on the link and be taken to the package's repository or issue tracker.

Install packages

The Install tab in the Settings view connects you to the thousands of packages available for Atom. At the top you'll find featured packages, but you can also use the search bar to find the one you're looking for.

Packages are published to Atom using Atom Package Manager (APM), which is included with Atom. You'll find published Atom packages in the Install view, and they can also be found on Atom's website.

Just like in the Packages view, clicking on a single package displays the README, so you can see what it does before you install it. It also links to the package's code repository.

You can install new packages from the community in this view by clicking the Install button on a listed package. You can then manage packages from the Packages view.

Development packages

In order to use a package you’re developing locally in Atom before you publish it with APM, you can link it to Atom using the APM CLI. For instance, from within the package’s directory in Terminal or Bash, use the following command:

Linked packages will show up in the Development Packages section in the Packages view. You can see linked packages with this command:

Themes in Atom

In the Install view, toggle the search bar to Themes to search the available Atom themes. Once you have themes installed, you can manage and set them as the current theme in the Themes view.

UI and syntax themes

Atom has themes for both the UI and the code syntax. The syntax themes style how the code looks in the editor itself, and the UI themes style how the rest of Atom looks (e.g. the tabs and file tree).You can even make small changes to Atom without creating a complete theme or package.

Alternative customisation in Atom

The Settings tab in the Settings view provides your options for customising Atom, but you can go beyond the default options by adding JavaScript or CSS within your config. Every instance of Atom has a .atom directory that contains its configuration settings, where you can create custom behaviour or styles. 

To open your .atom configuration directory, click the ‘Open config folder' button on the left side of the Settings view.

Init.coffee file

The init.coffee file allows you to add custom behaviour to Atom every time a new window is launched. It's executed after packages are loaded and any previous editor state has been restored.

You can use CoffeeScript in this default file or create a new file, init.js, to use JavaScript. In init you can make use of the full Node.js API. For example, if each time you opened a window you wanted Atom to greet you with the version of Node.js it is using, you could add this to your init file:

To interact more with Atom, you can use the Atom API. Documentation on the API is available on the Atom site.

Styles.css

Just like the init.coffee file, styles.css is a file that is loaded after Atom starts up. The styles you add here will override or add onto Atom's existing styles, and they will take effect immediately upon saving. 

For example, you could change the editor's background colour by adding this CSS:

A quick way to find the property names in Atom is to make use of the fact that underneath Atom is Chromium, so you have access to DevTools. You can toggle DevTools on and off by pressing alt+cmd+I.

With DevTools open, you can use the magnifying glass to select elements in Atom and reveal their class or element names. Target them in your styles.css file to change their properties.

With Atom's package manager and configuration files you can customise your Atom environment right from within Atom. This introduction should get you well on your way, and if you have any questions, open an issue on the project.

This article originally appeared in issue 277 of net, the world's leading web design magazine. Subscribe here.

To improve your web design skills further, head to our conference Generate and experience a packed schedule of industry-leading speakers, workshops and valuable networking opportunities. Don't miss it! Get your Generate ticket now.

Related articles:

What to learn to upgrade your web design skillsBeware the cutting edge of web design13 best pieces of user testing software

Monthly Web Development Update 7/2018: Practical Accessibility, Design Mistakes, And Feature Control

/0 Comments/in /by

Original Source: https://www.smashingmagazine.com/2018/07/monthly-web-development-update-7-2018/

Monthly Web Development Update 7/2018: Practical Accessibility, Design Mistakes, And Feature Control

Monthly Web Development Update 7/2018: Practical Accessibility, Design Mistakes, And Feature Control

Anselm Hannemann

2018-07-13T14:20:17+02:00
2018-07-13T12:33:42+00:00

The web continues to amaze me. With all its variety and different changes to the platform, it’s hard to see a straight pattern — if there even is (just) one. But it’s wonderful to see what is being changed, which features are added to the platform, which ones get deprecated, and how browsers implement more and more technology to protect the user from malicious website attacks. It’s interesting to see that these security features nowadays are getting as much attention as a feature for developers; this shows the importance of privacy and security and how unstable and insecure the web was in the past.

But the best thing about all of this is that it shows how important it is to stick to the things that people give us. Instead of implementing our own solutions for everything, it’s often much better to re-use an existing system. Not only is it safer to rely on, but also less work while more inclusive to extend a native DOM element with a custom element (instead of writing our own custom element from scratch). If we think about whether we should build our own version of SSL or use an existing software for this, why would we build a clickable element based on nothing instead of altering the behavior of an a or button element? And why would we check for resource host validation on our own, if the browser already gives us an API for that? This week’s articles are all dedicated to these topics.

Another thing that has been stuck in my head is Andrea Giammarchi’s article, “A Bloatless Web,” in which he describes how we blindly use Babel as developers when we write JavaScript to be able to write modern ECMAScript. But we usually don’t realize that transpiling all of our modern code in modern browsers isn’t the most efficient way. I’m glad that Andrea offers some ideas on how we can improve that situation and improve our web apps’ performance. Wouldn’t it be amazing to just serve a third of the bundle size by not transpiling the code anymore for each and every browser?

News

Site Isolation effectively makes it harder for untrusted websites to access or steal information from your accounts on other websites. Chrome 67 is now shipping with it and Cross-Origin Read Blocking (CORB) will no longer load, e.g. a JSON file as image. But even further, these changes mean that full-page layout is no longer guaranteed to be synchronous. This new feature affects you if you read out calculated sizes from an element in JavaScript or use unload event listeners. Ensure that you know about this and check if your sites still work as expected.
By now, we know a bit about Content Security Policies — a feature that lets developers limit the load of certain resources by hostnames. But browser vendors have come up with something new now: Feature Policy. This allows web developers to selectively enable, disable, or modify the behavior of certain APIs and web features in the browser. It’s like CSP but instead of controlling security, it controls features and Eric Bidelman wrote an introduction to Feature Policy explaining everything.
The Brave browser team shows their latest feature to protect their users’ privacy: Tabs that connect via the Tor network.

With so much happening on the web, what should we really pay attention to? At SmashingConf New York 2018 ?? we’ll explore everything from PWAs, font loading best practices, web performance and eCommerce UX optimization, to refactoring CSS, design workflows and convincing your clients. With Sarah Drasner, Dan Mall, Sara Soueidan, Jason Grigsby, and many other speakers. Oct 23–24.

Check the speakers →

SmashingConf New York 2018, with Dan Mall, Sara Soueidan, Sarah Drasner and many others.

Generic

Anton Sten asks if Tech Sector Values are Broken? Analyzing the marketing strategies by Apple, Microsoft, Google, Amazon but also small other companies and how we can do really purposeful work and stick to our values instead of treating them as marketing-material that we don’t need to respect or stick to.
Now that the technology sector of the world is rapidly transforming all of the world’s things into digital things, many have called for more ethics in our field. That is in many instances quite a vague goal, so let’s apply it to one part of digital: front-end development. How can we be more ethical as front-end developers, what kinds of things can we do? Hidde de Vries wrote an article about that.

Security

Ticketmaster’s customer data has been compromised and as it seems, it’s due to a customized single line of code that includes a third-party script.

UI/UX

Eugen Eşanu shows ten small design mistakes we still make and what we can do instead to make our design more user-friendly.

what we design vs. what a user needs

Users do not have time to read more than necessary, and yet designers still tend to put a lot of text because they think people need to know that. (Image source)

Privacy

This is an interesting report about how Google allows outside app developers to read people’s Google emails when they grant permission during app authorization. The issue with that is that there is no way to easily prevent that and it might have quite some impact if you use Gmail for your company as it might affect privacy policies and is under subject of GDPR.

Web Performance

Max Böck on how we can build components that react to the actual device connection speed using the Network Information API. And despite it’s currently only available in Chrome and Samsung Internet browsers, it’s worth trying it out and maybe already serve it to these users.
From time to time, we can still read articles mentioning the importance of optimizing CSS selectors in order to improve performance. This originates in research done several years ago but Ivan Čurić researched this again and found out it doesn’t matter.

Accessibility

Microsoft’s developer team shares a video playlist about practical accessibility, including how to optimize presentations or language for inclusion or how to build a proper “skip navigation” functionality on your website.
Sara Novak shares how she managed to show empathy by experimenting with going colorblind to understand how other people experience the world differently.
The Developer Tools of Firefox now have an Accessibility Inspector mode. Here’s how to activate it and how to use it.

A form with color-based indicators

In her article, Sara Novak explains why it’s important not to rely on color alone as an indicator. Symbols and error message can be much more helpful to users. (The image above shows a form with color-based indicators. Left: How a person with normal vision sees a form with color-based indicators. Right: How a deuteranomalous person sees the same form.) (Image source)

JavaScript

Leon Revill show us how we can extend existing native DOM elements with Web Components. This is extremely helpful and useful as we can not only save a lot of time by using prebuilt templates for custom elements but also get all the optimizations and defaults (semantics, accessibility, browser functionality) for free and still can build our own behavior on top of it. At the very least, if we could use Custom Elements at all, but that’s a different story.
Gerardo Rodriguez shows how we can easily fail to optimize websites for performance with Service Workers and the Fetch API and how this can result in a quota exception in browsers. Luckily, he found out the reason of this and by setting the proper CORS headers, Gerardo finally solved the mystery of single-cached opaque responses and tells us how to avoid the issues.
Filepond is a nice open-source JavaScript file uploader. Rik Schennink shares the challenges faced building it.
Andrea Giammarchi about the problem of bundling JavaScript with Babel and why transpiling code isn’t the best solution anymore. Instead, we should think about how to serve different bundles depending on the browser support to decrease the bundle size and improve performance.
Justin Fuller shares three great new features coming to JavaScript soon that will help us write code that is easier to understand, such as operational chaining, nullish coalescing, or the pipeline operator.
Addy Osmani and Mathias Bynens wrote a primer introduction on how we can use JavaScript modules on the web today.

CSS

An article series that covers how we can fake an auto-placement grid with gaps in Internet Explorer.
CSS Grid is nice, but I often hear that people can’t use it because IE11 doesn’t support it well. But that’s not exactly true as IE11 has a prior version of CSS Grid available that we can easily transpile with autoprefixer. Daniel Tonon explains the CSS Grid differences and which features we can and cannot use and will continue with even more tips.
For many people, CSS Grid is still very new, and it’s very capable and helps us solve a lot of problems when creating grid-based layouts in CSS. But in the current version, there are a couple of things that are still not possible. CSS Grid level 2 will bring us sub-grids and Rachel Andrew explains what you need that for.
Is CSS-in-JS good? Is it just bad? Why we constantly fall into the trap of arguing when there are no clear winners and how we can do better by acknowledging evolution and seeing things in context.

Work & Life

Why the concept of patience and the strive to build something to last should gain more attention in business. Some thoughts that came into my mind when reading another article and it seems many people like the idea behind this.
Ethan Marcotte on how he approaches to choose clients and why he thinks it’s important to only choose clients that you can ethically support. But this also shows how difficult this can be sometimes, as recent discussions about Microsoft’s business cooperations with legal entities show.

Smashing Editorial
(il)

50 Fascinating Facts About Google You Probably Don’t Know

/0 Comments/in /by

Original Source: https://www.hongkiat.com/blog/interesting-facts-about-google/

Google is the most visited website on the planet, but you already knew that, right? However, do you know that Google does 65k+ searches every second? And it is not the only fascinating fact about…

Visit hongkiat.com for full content.

30 books every graphic designer should read – Amazon Prime Day edition

/0 Comments/in /by

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/J32twDhakC4/books-graphic-designers-11135231

There are hundreds of fantastic graphic design books out there, offering words of wisdom, design inspiration, and refreshers on key principles and techniques. Whether you're looking to swot up on design theory or recharge your creative batteries, we've curated the best titles here, in this essential reading list.

And with Amazon Prime Day launching on the 16th and 17th July, it should be possible to find some bargains on select books, too. Our price comparison tool will show you all the best Prime Day deals on our favourite books in the guide below – or you can peruse more deals directly on Amazon:

See more Amazon Prime Day deals: US | UK | Australia | India

You'll find plenty of classic titles in this list from the great names of graphic design, but there are also plenty of books you might be less familiar with. Whether you'd like to know more about logos, go further with type, or get to know more about your favourite graphic designers, this list of great books for graphic designers has something for you.

Get Adobe Creative Cloud
Logo and branding books

Logo Modernism by Jens Müller

Taschen produces some truly spectacular books, and Logo Modernism is no different. Bringing together approximately 6000 trademarks, registered between 1940-80, Jens Müller examines the distillation of modernism in graphic design and how these attitudes and imperatives gave birth to corporate identity.

Müller includes a variety of logos, organised into three chapters – geometric, effect and typographic – in order to both educate you as well as provide a comprehensive index of inspirational logo designs to inform your own work.

———————–

Branding: In Five and a Half Steps by Michael Johnson

Leading graphic designer Michael Johnson demystifies the branding process in his latest book, Branding: In Five and a Half Steps. Dividing the process into five key steps – investigation, strategy and narrative, design, implementation and engagement – Johnson also acknowledges the non-linear nature of branding with a crucial half step, which marks the fluid relationship between strategy and design.

A no-nonsense, six-question model structures the first half of the book; the second analyses the design process, using over 1,000 contemporary brand identities from around the world.

This is the ultimate step-by-step visual guide to creating a successful brand identity. It’s an essential read for anyone in the branding industry, and a particularly valuable resource for students and new designers.

———————–

Typography books

The Elements of Typographic Style (v4) by Robert Bringhurst

First published in 1992, this history and guide to typography from Canadian typographer, poet and translator Robert Bringhurst has quickly become a major typographic resource. Leading typographers Jonathan Hoefler and Tobias Frere-Jones call it "the finest book ever written about typography" – and it isn’t difficult to see why.

The Elements of Typographic Style is a beautifully written manual combining practical, theoretical and historical information, while also sharing a deeper philosophy and understanding of the topic. If you’re looking for a book covering the finer points of type and typography, you’ll save a lot of money by starting with this one.

———————–

Just My Type by Simon Garfield

Graphic designers are trained to look at typefaces, but Simon Garfield's book Just My Type will encourage you to look even closer, taking in the rich history of fonts, as well as looking at their powers. 

A well-chosen font communicates to the reader on an almost subliminal level and it can make (or break) a design.

———————–

How to be a graphic designer

How to be a Graphic Designer Without Losing Your Soul by Adrian Shaughnessy

Sound advice from Adrian Shaughnessy on gaining employment, setting up as a freelancer, forming a company, dealing with clients, pitching and loads more fills this book.

As graphic design books go, How to be a Graphic Designer Without Losing Your Soul is insightful, intelligent, accessible and simply full of great advice, with the author calling on such luminaries as Neville Brody, Natalie Hunter, John Warwicker and Andy Cruz to help pull together his ideas.

———————–

How to... by Michael Bierut

Veteran designer and Pentagram New York partner Michael Bierut released this inspiring, highly readable monograph, manual and manifesto in 2015. Featuring 35 projects, Bierut – who’s a protégé of design legend Massimo Vignelli – illustrates the varied role that graphic design plays in the modern world.

Rough sketches and rejected ideas sit alongside finished work. How To (full title How to Use Graphic Design to Sell Things, Explain Things, Make Things Look Better, Make People Laugh, Make People Cry, and (Every Once in a While) Change the World) is packed with insights into the creative process, making it a valuable resource to new and established designers alike.

———————–

Work for Money, Design for Love by David Airey

Inspired by the many questions that David Airey – author of Logo Design Love – receives on a daily basis, Work for Money, Design for Love is a refreshing, straightforward guide that tackles the essentials of starting your own design business.

Touching on everything from the mindset needed to be a designer and how to take that first step into being your own boss, to business basics, this is a must-have read for anyone thinking about going it alone.

———————–

The Art of Looking Sideways by Alan Fletcher

Alan Fletcher, the legendary co-founder of Pentagram, penned various thought-provoking tomes during his illustrious graphic design career, but The Art of Looking Sideways is perhaps the best known – questioning the way designers think about everything from colour to composition.

Once you've digested his seminal text, give Picturing and Poeting a go, exploring the link between imagery and meaning through a series of visual mind-teasers, games and visual puns, assembled from his personal notebooks and diaries. Another great work by Fletcher, Beware Wet Paint, is a more conventional monograph, looking back over 35 years of inspiring work and putting it all in the context of Fletcher's remarkable thought process.

———————–

A Designer's Art by Paul Rand

Heralded by many as one of the fathers of modern branding, Paul Rand has several inspiring books to his name. Design, Form and Chaos is unfortunately out of print, but if you can track down a copy it's worth it to immerse yourself in his talent for simplicity, and to explore the thinking behind some of his best-known identities.

A Designer's Art, meanwhile, probes more deeply into the process of graphic design in general: why it's important; the impact it can have on society; what works, what doesn't, and most importantly, why.

———————–

Perverse Optimist by Tibor Kalman

Written by Tibor Kalman and edited by Peter Hall and Michael Bierut, Perverse Optimist is another notoriously hard-to-obtain volume which, like Rand’s Design, Form and Chaos, is sadly out of print. But second-hand copies do appear…

Dedicated to the visionary editor-in-chief of Colors magazine and creative director of Interview, Perverse Optimist is a weighty tome by any standards, and packed with high-impact images and insightful analysis of the art direction process behind them.

———————–

Graphic Design: A User's Manual by Adrian Shaughnessy

Another insightful resource from designer and industry commentator Adrian Shaughnessy, Graphic Design: A User's Manual brings you everything you need to know to survive and prosper in the complex, ever-shifting world of graphic design.

Organised from A-Z, topics include annual reports, budgeting, kerning, presenting, dealing with rejection and more. This is an entertaining and invaluable resource that’s packed with pro advice on all the things you won’t have been taught at design school.

———————–

Show Your Work! by Austin Kleon

In his follow-up to New York Times best-seller, Steal Like An Artist (another must-read), author and writer Austin Kleon reveals what can be the most challenging part of your career as a designer – how to get your work seen. 

In Show Your Work! 10 ways to share your creativity and get discovered, Kleon is full of helpful hints and tips on how to become findable, how to appeal to the community and use the network to sell your work. If nothing else, it's a useful little pocket guide to remind you to be open, generous, brave and productive.

———————–

The Little Know-It-All: Common Sense for Designers

Don’t judge The Little Know-It-All: Common Sense for Designers by its cover or size – it’s possibly the most useful book you’ll own as a designer. Everything from light, colour and perspective to law and marketing are covered in succinct, beautifully carved chapters.

It’s the kind of book that you never stop reading once you start; the kind you’ll always refer back to, making it a winner on pretty much every level.

———————–

Design theory and history  

Grid Systems in Graphic Design: A Visual Communication Manual for Graphic Designers, Typographers and Three Dimensional Designers by Josef Mülller-Brockmann

Grid Systems in Graphic Design remains the definitive word on using grid systems in graphic design. Written by legendary Swiss graphic designer Josef Mülller-Brockmann, this visual communication manual for graphic designers, typographers and 3D designers is packed with examples on how to work correctly at a conceptual level. 

It’s a must-read resource for any student or practising designer – regardless of whether you prefer the David Carson approach.

———————–

Interaction of Color by Josef Albers

Conceived as a handbook and teaching aid for artists, instructors and students, Interaction of Color is an influential book that presents Josef Albers's singular explanation of complex colour theory principles.

It’s been over 50 years since this tome was first published, but it remains an essential resource on colour, demonstrating principles such as colour relativity, intensity and temperature; vibrating and vanishing boundaries; and the illusion of transparency and reversed grounds.

———————–

The graphic language of Neville Brody

You'll find this book on the must-read list on every self-respecting graphic design course, and with good reason. Neville Brody may have been president of D&AD and head of Research Studios' global studio network, but it was arguably his 1980s heyday that had the biggest impact on contemporary graphic design.

First published in 1988, The graphic language of Neville Brody explores the thought process behind some of his best-known work, including his genre-defining art direction of The Face magazine.

———————–

Designed by Peter Saville

Like Brody, Peter Saville famously built his reputation in the 1980s with iconic album artwork for Factory Records-signed bands such as Joy Division and New Order – but this 2003 publication was the first to chronicle his career.

Starting in 1978, Designed by Peter Saville inevitably covers the Factory era in detail but also explores Saville's design and art direction for the fashion and advertising industries, taking in brands such as Dior, Stella McCartney and London's Whitechapel gallery.

———————–

The End of Print: The Grafic Design of David Carson

If Brody and Saville defined the 1980s, Carson conquered the 1990s with his unconventional approach to page design, using distorted type and fragmented imagery that played with notions of legibility – particularly during his tenure as art director of Ray Gun.

He went on to work with a stellar client list that includes Pepsi, Nike, Armani, Levi's, Sony and MTV. While the approach outlined in The End of Print: The Grafik Design of David Carson is very much of its time, the insight that the book provides into the iconic surfer/designer's process is unrivalled.

———————–

Left to Right: The Cultural Shift from Words to Pictures by David Crow

Visual communication rests on the power of semiotics, a concept that David Crow examines in expert detail within this seminal text. 

Dealing with the principles of written communication and its relationship to imagery, and rounded off with an examination of audience understanding, Left to Right is a valuable assessment of academic yet essential design theory.

———————–

Designer monographs

Two-Dimensional Man by Paul Sahre

Paul Sahre is one of the most influential graphic designers of his generation and has operated his own design consultancy since 1997. Working out of his office in New York City, his clients have included The New York Times, Google and Marvel Comics and he lectures about graphic design all over the world.

His book, Two-Dimensional Man, is part monograph, part autobiography, part art book and part reflection on creativity. Combining personal essays discussing the realities of living creativity during his 30-year career, he proves that throughout highs and lows, humour can be a saving grace.

———————–

Things I Have Learned in My Life So Far by Stefan Sagmeister

Austria-born, New York-based designer Stefan Sagmeister has hit the headlines a couple of times in the few years with his nude promotional shenanigans, but his two monographs, published in 2008 and 2009, are all about his creative approach and output.

Things I Have Learned in My Life So Far revolves around 21 thought-provoking phrases, transformed into typographic works for various clients around the world and has been since updated. His second text, Made You Look, is fully illustrated with a red PVC slipcase and spans 20 years of his graphic design in depth. The two complement each other excellently.

———————–

Love Song by Non-Format

An iconic studio for the modern age, Non-Format is a fruitful transatlantic collaboration between Oslo-based Kjell Ekhorn and US-based Brit Jon Forss.

Their 2007 monograph, Love Song, is packed with awe-inspiring imagery and insight into the duo's creative process over five years between 1999 and 2003, from advertising work for Coke and Nike to stunning art direction for The Wire magazine.

———————–

Designer monographs: Pentagram: Marks

Unsurprisingly, given its status as arguably the world's most famous design agency, Pentagram has attracted its fair share of monographs over the decades: seven so far and still counting. 

Marks simply reproduces four hundred of the hugely diverse identities that the agency has created since 1972. An incredible cross-section of design history.

———————–

M to M of M/M (Paris) by Emily King

It was a long time coming, but this definitive 528-page monograph of the iconic Parisian duo Michaël Amzalag and Mathias Augustyniak, aka M/M (Paris), was worth the wait.

Chronicling two decades of stunning work spanning the worlds of music, fashion and fine art, M to M of M/M (Paris) is presented as a reshuffled alphabetical dictionary, starting and ending with M. The studio's highly distinctive, unique approach to type, print design, drawing and photography shines throughout.

———————–

Ideas and inspiration

The Graphic Design Idea Book: Inspiration from 50 Masters by Steven Heller and Gail Anderson

The Graphic Design Idea Book: Inspiration from 50 Masters covers all the key elements of great design, featuring seminal works from acclaimed designers such as Paul Brand, Neville Brody and Stefan Sagmeister. It's sure to spark inspiration and keep those creative juices flowing.

Honing in on those professional techniques, authors Steven Hiller and Gail Anderson refresh your knowledge on colour, narrative, illusion, humour, simplicity, ornaments and more.

———————–

Illustration Play by Victionary

First up, Illustration Play has one of the most beautiful, special and intriguing covers you’ll see, each one being individually stickered by hand. 

This is to echo the explorative approach taken by all of the illustrators featured in the book – looking at new ideas and ways to realise concepts within contemporary illustration. A lovely object.

———————–

Graphics Alive 2 by Victionary

Exploring the omnipresent power of graphic design and illustration in today’s society, Graphics Alive 2 (the first book also being great) is not only beautifully designed in itself, but also packed full of highly inspirational T-shirt graphics, shoes, signs, wallpaper and other everyday objects and ephemera that top designers have lent their eye to. An intense, head-hurting experience.

———————–

Palette No 4: Neon, New Fluorescent Graphics by Victionary

Picking the right colour palette for your design work is always a difficult decision. While some favour the more understated, others opt for the bold and bright. Palette No 4: Neon, New Fluorescent Graphics is a beautiful 296-page book (again by Victionary) showcasing the applications of fluorescent colours in the design world, examining where they work best.

Including branding, interior design, and fashion, a total of 110 loud and colourful projects by designers across the globe are featured.

———————–

A Logo for London by David Lawrence

London's Underground system is over 150 years old, and this book by David Lawrence tells you all you need to know about the famous London Transport logo design.

A Logo for London celebrates the instantly recognisable bar and circle, also known as the bullseye. With 250 colour illustrations, this charming and informative tome charts the history and development of the symbol from the early 20th century to the present day.

———————–

Super Graphic: A visual guide to the comic book universe by Tim Leong

What is the Joker's favourite question for Batman? Are there more deaths by human or by zombie in The Walking Dead? Those are just some of the questions answered in this book via an array of inspirational infographics. 

Even if you're not a comic book fan, the variety of infographic styles on offer in Super Graphic: A Visual Guide to the Comic Book Universe by Tim Leong will bring you tons of inspiration.

Liked that? Then read these next:

Best free fonts for designers25 logo design tips from the experts10 top design-related movies

Writing for the Modern Minimalist Website

/0 Comments/in /by

Original Source: https://www.webdesignerdepot.com/2018/07/writing-for-the-modern-minimalist-website/

They say that an image is worth a thousand words, and web designers certainly seem to have taken it to heart: the trend for image-rich, stylised page design means that there is now often little room for writing on a web page.

Looking at recent trends in web design, we see full-screen photos, minimalist split-screens and enticing overlays. It’s all very visual, and not one of the examples contains many words on the featured pages.

These trends are great for designers, who can let their creativity flow without being burdened by the need to include dull tracts of text. On the other hand, although these sites can undoubtedly be beautiful, the trend is dividing experts: many feel that by carrying little text, sites are losing the key function of being informative about a product or service. There is also the issue of Google ranking: the images might speak volumes to a human audience, but bots still need text to know what a site is about and rank it accordingly.

Certainly, the rise of mobile-friendly sites in the eyes of both users and Google means words are becoming less important than functionality and load time in ranking terms. However, a site still needs to tell bots and potential customers alike a little about the organisation behind it.

Is a Minimalist Website for You?

Minimalist websites can be a little like designer clothes: they look great on models, but when you try and squeeze your own body into them, you might find you lack the space to really express yourself.

For web designers, this can leave something of a dilemma when it comes to dealing with clients, who inevitably like the look of the sleek designs on offer but usually have different ideas about what they want to say about their product. Often, they end up with a slick homepage, and make up for that with wordy ‘about’ and ‘services’ sections that explain in detail what they do.

This is a reasonable compromise, but it’s the equivalent of wearing an Armani tie with a ‘regular cut’ shirt and comfy slacks: you’re not going to win any style awards.

The fact is, organizations which sell a specific, technical service need to be able to tell people about it. They might have to settle for the tie, or not go down the designer route at all. But website designs that place a premium on the visual are suitable for a surprising variety of clients, if the words you do have space for are made to count. Obvious examples include:

Businesses selling physical items which can be photographed. If it’s something that’s being sold on its looks—such as clothes or furniture, for example—then it really makes sense to let the images do the talking. Just look at this elegant site selling watches.

Organisations which have a simple idea, goal or product. If it can be summarized in few words, it’s arguably better to do so in a short but high impact way, rather than filling a site with waffle. “She is starving, you can help”, for example.

Organisations whose service is too complicated, abstract of tailored to describe within the confines of a website. This is a surprisingly large category in the modern marketplace: think law firms, PR agencies or accountancy firms, or even better, an avant garde restaurant.

Use Bespoke Images

Images only speak when they’re good. Not only that, when you’re relying on them to tell a story, they must be relevant. Therefore, it’s unlikely that you’ll have a set of stock images that is truly suitable for a great visual website that is also functional.

The first category of businesses highlighted above is unlikely to have a problem supplying images of its products. Indeed, retailers will often take the lead when it comes to setting out their wares with suitable style and a unifying theme.

Others may need convincing of the need to hire a photographer. You will need to convince them that this is a suitable investment in creating a powerful online brand image. You will also need to find a photographer that understands that, and brief them thoroughly on the ideas and concepts you are hoping to portray.

Craft Stunning Sentences

A retail site might be able to get away with nothing but simple text, but if you’re creating a site that needs to get a message across, you’ll need a few short sentences floating effortlessly on the pages to guide the visitor through the site. Just as an image can be worth a thousand words, so can a short sentence.

Ideally, you should concentrate on a single, powerful concept. This will essentially be your clients selling point. If they are a law firm, the concept they project could be ‘we are experts’. For accountants, it could be the more direct: ‘we can save you money’.

You can get away with focusing on different concepts for each section of the site, but beware of straying too far from what is known as ‘the power of one’: that single idea, in sharp focus, which is more compelling to people than a complicated set of rules, concepts or services.

In this in-depth article about how the power of one was used to ignite the Arab Spring in Egypt, the common thread of the “most contagious” messages are identified as: simplicity, unexpectedness, specificity, credibility, emotion and personal narratives.

Ideally, your sentences will appeal to customers on an emotional level carefully pitched to consider the raw psychological need the company is selling to. When you think about it, almost everyone is selling reassurance, happiness or hope. Surprise people by offering them that as confidently as you can.

Words Should Add to the Images

You also need to think about what aspect of a brand, story or ethos you want to tell in images, and what side will be better with a few powerful words. Sometimes, both will target the same need, desire or emotional selling point. But arguably, that is an unnecessary repetition, and the words should add a new aspect to the imagery.

Charities in particular are already good at striking this balance, with third sector websites finding ways to push the public’s emotional buttons with a combination of high quality imagery, words and design.

For example, this Charity: Water site is both slick and informative. It would have been easy for the charity to have gone down the avenue of telling compelling human stories in depth, but it decided to do that purely through the images. The smiling children and the parched landscape behind are informative and evocative. The words concentrate on the very simple premise of the charity, and lead directly to a button for donations: “100% of your money brings clean water to people in need. You can transform lives for families around the world. Every single penny will help bring clean water to communities in need.”

In 31 words and a number, they’re selling happiness, or if you’re a cynic, redemption. It’s short, powerful, and leaves room for great web design.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}