Innholdsfortegnelse for No. 254 i Web Designer

“Swiss foundry Grilli Type are doing innovative work. They only have a small handful of families, but each one strives to do something different” THE WEB DESIGNER MISSION “To be the most accessible and inspiring voice for the industry, offering cutting-edge features and techniques vital to building future-proof online content” Typewolf tells us what’s trending in type Fonts, they’re everywhere. No site, app or printed publication can live without them. But, what’s the latest trend? What are the latest styles? What fonts are hot right now? To make sure you are on the trail of the hottest fonts, we spoke to the industry. Typewolf supremo Jeremiah Shoaf, web typography evangelist Richard Rutter and Bonne Marque creative director Alexander Engzell let you into their world. The talented trio reveal the fonts…

Agriculture visual.ly/agriculture Lifelike illustrations interjected with cutaways make the world of agriculture more fascinating than you can imagine. bacteria Dangerous tabletopwhale.com Who knew bacteria could be so interesting? This stylish flowchart is very engaging. Mourinho in the CL bit.ly/2cwBZ0Q This football infographic is beautifully crafted with lots of subtle additions. Evolution of the web evolutionoftheweb.com This example adds interactivity to entice the reader. Pop-ups add a plethora of useful info. Inspiring infographics bit.ly/2cU8ib1 Check out this collection of printed press infographics inspired by the Rio Olympics.…

1.Page structure The first step is to create a document structure for the web page. The document consists of two sections – the head and body. The head section is used to load resources such as the CSS. The body section is used to contain the page content elements, which will be created in the next step. 2.Navigation container The page content consists of a navigation and a main section containing each of the content articles. The navigation container contains navigation links to their associated articles inside the main container. These links referenced their associated article by using their href attribute to reference the article’s ID; hence their href value starting with the # symbol. 3.Start the CSS Create a new file called styles.css – this step will insert CSS…

Following best practices with regard to typography refers to line height, the spacing between the letters, the white space around the letters, the designer’s use of bold and italics, and hierarchy. This last matter of hierarchy concerns controlling the relationship between the words on the screen with other elements, such as logo, images, icons and anything else visible. Control is amongst the designer’s most valuable abilities.…

Like the white shirt or the cup of tea, there’s typography styles that never tire thanks to their simplicity and timeless design. But how is it some websites just look good and even reputable, despite you never having visited them before? Generally, it’s a case of finding fonts with classic looks. For example, using a sans serif Humanist font (e.g Gill Sans) create a look that says ‘“I’m established’ – part of the reason is that its used a good deal in London Underground’s signage. By then pairing this with an old style serif such as Garamond, Bembo or Baskerville, all of which have been used countless times in the printed form in books over the years you immediately cast and instant familiarity. They key to creating an established feel…

Single page websites have been growing in momentum for the past five years and often designers want each section of their site to fill the entire browser window. This can be a tricky feat to accomplish but thanks to fullPage.js it’s become incredibly simple. The kinds of pages that fit into this kind of site well, are the pages that have very little text and are really trying to impress the user with imagery. If there’s too much text then there’s a chance that at some point the text will require scrolling and that defeats the object of each section filling the browser. Sites such as Apple use this kind of effect well when they are showing off their iPhone and trying to show off the product with good…

WHAT DOES YOUR USER EXPECT TO SEE AND WHAT’S THE LOGICAL NEXT STEP IN THE USER JOURNEY? THE MORE USERS ARE FAMILIAR WITH PATTERNS, THE MORE THEY KNOW WHAT BEHAVIOUR TO EXPECT EXPAND YOUR PATTERN VOCABULARY TO RATIONALISE AND EXPRESS YOUR DESIGNS CUSTOMER FIRST. LISTEN AND UNDERSTAND WHAT YOUR CUSTOMER WANTS BEFORE EVEN CONSIDERING PATTERNS TO USE PATTERNS ARE NOT A CHECKLIST AND DO NOT AUTOMATICALLY CREATE GOOD DESIGN…

“ Delicate, high-contrast display serifs set at large sizes look gorgeous on Retina screens. This is a trend we’ll see more of in the future ” Jeremiah Shoaf Jeremiah is the kingpin at the excellent type site Typewolf. This issue he talks what’s trending and recommends classic and new fonts. Elsewhere we have web evangelist Richard Rutter and Bonne Marque creative director Alexandere Engzell on new fonts and the future of fonts. Page 40 Guy Stradling Guy is the digital director at award-winning agency Thinking Juice. This issue he tackles the world of UI design. He reveals invaluable practical advice on how to use UI patterns the right way, as well the best tools needed. Page 66 Tam Hanna Tam’s career has seen him wrestle with a variety of stacks…

Web Designer’s latest digital addition to its burgeoning collection is The Developer’s Guide to JS. Check out how to get started with ES6, use Babel to compile code to work everywhere and get started with npm. Don’t forget Animate with HTML & CSS and 3D and the Web. We cherry-pick a collection of the best animation and 3D techniques to add interest to any project. Plus, check out Advanced Angular, 20 Quickfire HTML & CSS techniques and Amazing Websites and How to Build them Vol 03. How can you get your hands on a Web Designer digital edition? Head to bit.ly/1hsGYgl to download the free Web Designer app and find them waiting for you as an in-app purchase.…

ffconf 2016.ffconf.org A conference with a difference. It’s a one-day event (run twice on consecutive days) focused on dev and CSS. Gather North gathernorth.com A weekend conference for web designers, graphic designers, developers, bloggers, project managers and more. HalfStack halfstackconf.com Staged in a pub, it features talks on contemporary front-end dev tools: ES6, TypeScript, React.js, Dojo 2 and more. Frontier www.frontierconf.com Eight speakers cover the many aspects of front-end design. And there’s an after party when you can meet other creatives. Adobe Max max.adobe.com Three days of fun and frolics, MAX brings together over 200 expert speakers covering a myriad of creative subjects.…

“ Your visitor has a set of predefined actions they expect from your website” Online sales psychology comes down to seven fundamental core principles that aim to reduce the amount of ‘friction’ generated on a website and to also subconsciously improve the trust that your website generates. Online sales psychology is heavily based around ‘pattern recognition’ – which is our brain looking to match what we are seeing to what we already know, and looking for a short cut to complete the action/journey in front of us. When your visitors interact with your website, they look to match it with what they already know. For example, people are used to navigating around an eCommerce website in a certain way: experience tells them where they should expect to find an item…

1.Page initiation First, create the web page document structure. This consists the HTML document, which has two containers – the head and body. The head section is used to load resources and store descriptive information. The body section is used to contain the page content elements. Content will be added in the next step. 2.Page content The page content consists of two content containers – header and main. The header container is the banner area, which contains a content image and an empty span element, which will be used for the background effect. The main container will be used to store the main page content – feel free to insert your own HTML here. 3. Initiate the CSS Create a new file called styles.css – this step will insert CSS…

Year 2000 No. of employees 3 Odopod is founded back at the beginning of a new century. Exciting times ahead. Year 2005 No. of employees 3 After five years in their old home it was time to move on to their new home in Hayes Valley. Year 2006 No. of employees 3 The work produced for Nike Skateboarding puts Odopod on the map. Year 2008 No. of employees 15 Odopod is a founding Member of SoDA (Society of Digital Agencies). Year 2009 No. of employees 15 With Odopod on the up it was time to give something back. The birth of Hack Days. Year 2010 No. of employees 50 It’s Odopod’s ten year anniversary. Time to celebrate with a Bash at Bimbos. Year 2011 No. of employees 50 Recognition for…

THE LEGAL LIMIT One font for an entire website is fine, albeit tricky to get a real sense of emphasis. Two fonts is recommended – one for headings/titles and another for body copy. Three fonts is pushing it. Ask yourself why you’d need three. LINE HEIGHT There are many viewpoints on line height. The typeface which should always determine the best choice. On a sans-serif paragraph of text, 130-160 per cent is considered best. Remember to read it a few times – don’t judge purely on appearance. WORDS PER LINE Set your paragraph widths so that your readers don’t spend their time losing track of where they are, or get fatigue through constantly moving eyes (too short lines). As a rule, ten to 15 words (50-75 characters) per line. SIZE…

One of the key giveaways when it comes to seeing how considered a design is, is not only the typeface selection, but also the typesetting. Finding the right font isn’t the be all and end all, it’s just as important that you set it on the page in the right manner, might need some CSS tweaking. Always consider the line height. The standard line height can be acceptable for some typefaces but by and large, it’s advisable to increase it some. It just allows the copy to ‘breathe’ more and, particularly for longer paragraphs, when the reader is required to sit for several minutes or more, consider shortening the line length to around 15 words maximum. Choose the colour of the type carefully so that contrast is neither too low…

Cascading Style Sheets (CSS) is without doubt one of the most enjoyable and easy to learn languages on the web. With the power of CSS3, we can create animations that only JavaScript could manage. And when we look over the world wide web, we see plenty of (if not all) websites using some type of animation that CSS is powering. How many times have we seen complex hover effects, flip effects and other elements transforming into eye-catching animations? So CSS has come a long way and any web designer/front-end developer worth their salt would at least be able to add some animation using it. In this tutorial we will learn how to harness CSS3 and create an eye-catching flip animation that is inspired by a business card. Let’s say…

UI patterns are not a barrier to good design. It’s only a design if it works. You have to take advantage of users’ general understood knowledge and behaviour to save people’s time in learning new interfaces. Jerry Cao, content strategist at UXPin, concludes: “Good design makes your users happy and eager-to-return, gives a feeling of familiarity, and can be used mostly by intuition. But these seemingly natural aspects are anything but – they must be crafted with effort and know-how to give them that ‘natural’ feeling. Patterns are the tool to this end, and knowing how to use them is knowing how to create the illusion of natural.” For experienced web designers, all these familiar UI patterns would appear like déjà vu. If you’re just starting your career, just remember…

Web browsers today are more capable than they have ever been. We are now able to access system-level interfaces like drag and drop using JavaScript alone. However functionality, such as file access, is remaining a no-go for web browsers. For those applications then, we would need to write it in a new language for each platform that we wanted to target. Electron does away with these complexities. By writing applications using HTML, CSS and JavaScript we can use existing skills to create native desktop applications. Atom, Visual Studio Code, Slack and several other applications are made with Electron. This just goes to show what complex operations the framework is now capable of. Behind the scenes it runs an up-to-date version of Chromium and because we are controlling that environment we…

GitHub is the web design/ developer community’s go-to repository, and a recent report from GitHub reinforces its popularity. The GitHub Octoverse 2016 report takes a look back at the last 12 months and takes a peek at the highlights across that period. So, what has been happening? Straight from the Open Source section, users are reliably informed that the code that sent Apollo 11 to the moon (github.com/chrislgarry/Apollo-11) is there, along with an open source curriculum that helps non-profits among many others. The online report can be found at octoverse.github.com and reveals what are the most starred open source repositories on GitHub – effectively the most popular. Browsing through what’s on offer, you will see that React, React Native, Bootstrap, D3 and Swift are all very popular repositories. The interactive…

01. COBAYES cobay.es/en/ Simple but engaging animations populate the journey 02. Shapish shapish.com Draw on the screen and see your effort transformed into an animated pattern 03. Create Your Cocktail russellandcodrinks.com Create a cocktail in a virtual space. Then try at home 04. The Hidden Worlds of the National Parks http://bit.ly/2d9wPsq Smart video tells a story Graphics Coffe Side http://bit.ly/2dCUOBx Coffee and Star Wars has to be a winning combination, surely? Jady Salvatico thinks so and so do we. Colour picker Internet Princess http://bit.ly/2dkcJfR Typesetter TT Lakes myfonts.com/fonts/type-type/tt-lakes/ Inspired by an unusual sign spotted in a former Finnish town, TT Lakes is a simple and functional sans-serif that has style without even trying. It consists of 54 typefaces and can take on any challenge. WordPress Travelia travelia.softhopper.net A responsive travel…

1.HTML initiation The first step is to initialise the HTML document with a head and body section. The head section contains any page description information and links to resources – a CSS stylesheet in this example. The body section is used to store the main content – this HTML is defined in Step 2. 2.Noise content Areas of the page that will have the noise effect applied to them will have a “noise” class applied to them. In our example, we will display an image that will have the noise effect over it. The final element inside the noise effect is used to display the distortion over the content. 3.CSS initiation Create a new file called styles.css. We start this file with CSS rules to describe the initial document state…

WHAT’S THE MESSAGE? Always start with the message. This informs everything in design – including the font selection. Ask ‘what’s the vibe’ and frame it as an emotion: is it excitable, sombre, relaxed or tense? HOW HAVE OTHERS DONE IT? There’s no shame in taking a long look at competitors and other brands or people doing a similar thing to see how they’ve elected to deliver their message. Try to prepare a list and highlight the good and bad points. CREATE A MOODBOARD Dont jump into the design yet, simply create a large canvas and start typing. Take the key words from the content and try it out in various different fonts – you’ll soon see which is starting to work best. TEST YOUR PAIRINGS It’s usually good to select…

OpenType Variable Fonts, jointly developed by Microsoft, Google, Apple, and Adobe will be the future of web fonts. It is a single typeface file that behaves like multiple fonts but a fraction of the file size. They work by defining the variations to a font that make it bold, condensed, etc. See more at medium.com/@tiro/12ba6cd2369…

DIN NEXT SLAB bit.ly/2cB3uU2 This industrial strength sans-serif font was created in the early 20th Century for railroad cars. 100 years later, Kobayashi’s 2009 revamp made it attractive to web designers again, retaining its powerful simplicity and ensuring the typeface is always legible. TUNGSTEN bit.ly/1KkHb3S This rare sans-serif typeface is known for being persuasive, standing for unashamed modernity and passion. It can be a bold choice. Using it means going for a high-impact font that communicates style and wit at the same time. BASKERVILLE bit.ly/2czd4Xj Everyone knows John Baskerville’s story. This clean version of the famous typeface gives it a more modern edge, which offers an interesting spin on the rough original, known for being the official typeface by the US Federal government after the revolution. EDITOR CONDENSED bit.ly/2djKZYI Born…

As developers, the ability to store common values for reuse is extremely valuable, it saves time in both authoring and maintaining a codebase. This is why you’ll find variables a key part of any CSS preprocessor, such as Sass or LESS. The CSS Variables spec finally introduces this ability natively to CSS and there’s a good level of browser support available to start using them. However, you may have been thinking, since CSS preprocessors have variables already and are so prevalent these days, what’s the big deal? Fuelled by this, this tutorial will take a look at what CSS Variables will offer developers beyond simply storing values for reuse. There are two interesting aspects that we’ve found lately when working with CSS Variables. Firstly they, like all CSS, are…

Client: Wyke Farms UI pattern: Carousel wykefarms.com Problem: Explain 150 years of family farming heritage. Solution: Use a carousel to tempt the user to browse each key date. Client: DW Fire and Rescue UI pattern: Forgiving format dwfire.org.uk Problem: Easily search for content across the website. Solution: As user types into text field, possible answers are anticipated and listed. Client: AMIN Worldwide UI pattern: Collapsible panels aminworldwide.com Problem: Create a simple interface for 50+ agencies. Solution: Content annotates, modifies and explains relationship of agencies. Client: Marshall Amps UI pattern: Fill in the blanks marshallamps.com Problem: Get users to find an suitable amp for them. Solution: Arrange fields in the form of a prose sentence to be filled by the users. Client: Williams Jet Tenders UI pattern: Responsive Disclosure buildmytender.com Problem:…

PATTERN TAP Designer’s don’t live in a vacuum and this comprehensive collection of patterns provides inspiration to help create something impressive. zurb.com/patterntap UI Patterns ui-patterns.com Welie welie.com Capptivate capptivate.co Patternry patternry.com Pattern Browser patternbrowser.org UseYourInterface useyourinterface.com pttrns pttrns.com Inspired UI inspired-ui.com Mobile UI Design Patterns bit.ly/2doIYYm Web UI Design Patterns (Free e-book) bit.ly/2cyH7i1 Site Inspire siteinspire.com…

“When you are ready to purchase hosting, check that you have enough resources ” About us Tidyhosts has become a leading cloud hosting provider throughout the world. It boasts a feature-rich selection of services including domain registration, shared web hosting, WordPress hosting, hosted exchange email, cloud virtual servers and media streaming. Its passion and drive for success has gained a highly reliable and trusted reputation from its customers making us number one for hosting services. Founded in 2004 by three developers who wanted to build hosting infrastructure for developers, years on, the company has expanded to offer much more. What we offer • Domain names – Simple domain registration with a large choice of TLDs. • Shared web hosting – Includes one-click application installers and a choice of Windows or…