Innholdsfortegnelse for No. 250 i Web Designer

1.Create HTML foundations The page is initialised with the creation of the HTML document structure. This consists of the head section and the body section. The head section is used for containing non-visible definitions, such as page description details and references to external CSS and JavaScript files. The body section is where the page content is stored – to be defined in the next step. 2.Write navigation content Our example consists of a navigation component to contain the navigation content. The first element inside this container is the hamburger element as the navigation icon. Each of the following elements will be clickable links that will be visible when the navigation has been opened to show on the full page. 3. Detect click events Ability to detect when the user clicks…

who onformative what Generative design, interaction design, data visualisation, creative coding, interactive installation, generative corporate designs where Frankfurter Allee 53 Berlin, 10247 Germany web onformative.com Key clients Nike Google Porsche Expo Korea Audi Founded in 2009 by Julia Laub and Cedric Kiefer in Berlin, onformative is a studio specialising in generative design solutions between art and technology. Both founders studied communication design and tackled the theme of generative design from early on in their careers. It was this fascination with rule-based design forms which brought the duo together while Laub was working on the seminal publication Generative Design. The book Laub co-published has become one of the key reference works on the subject, with the term ‘generative design’ proving particularly influential in Germany. Kiefer was first drawn to the…

1x creative lead 1x strategy manager 3x creatives 1x research and communication 1x web developer 1x office manager + a wide network of developers, 3D artists, producers and creatives In keeping with this premise from Actelion, the brand consultancy firm Interbrand in Zurich conducted an initial review and discovered a generic image world with scientific motifs that lacked differentiation from those of the competition. Based on the concept ‘from medical industry to medical magic’, a new visual identity was developed that uncovers the invisible magic moment of medicine. Kiefer explained their approach: “The new imagery is based on the smallest possible unit: digital molecules. These capture the magic moment when medical discoveries arise from mere atoms to create an original design for a company that supplies the world with innovations.…

THE GOLDEN RULES OF DESIGN RULE #1: FOCUS ON CLEAR NAVIGATION The user shouldn’t be lost in a maze of webpages. RULE #2: KEEP IT SIMPLE Don’t be too sophisticated. Simplicity is beauty. RULE #3: ALWAYS THINK RESPONSIVE Your website should be adjusted to smartphones as well as tablets. RULE #4: FOCUS USERS’ ATTENTION Know your audience to create an eye-catching design. RULE #5: PAY ATTENTION TO LITTLE THINGS Check everything: the devil is in the details. #1: FOCUS ON CLEAR NAVIGATION USER TESTING IS THE KEY Ask someone to test your website for you. You have been working on this project for so long that you probably won’t see some obvious things that need to be fixed. It will allow you to step back a little and bring a…

THE GOLDEN RULES OF LAUNCHING RULE #1: REVIEW DESIGN BASED ON ANALYTICS Identify opportunities to improve design and usability through analytical data. RULE #2: IMPLEMENT RESPONSIVE DESIGN Implement industry trends, usability, search engine priority and visibility. RULE #3: FOCUS ON NAVIGATION Fall in line with your audience’s search queries and their use of navigation RULE #4: CONTENT IS KING Drive profitable customer action and positive brand association through content. RULE #5: THE SEARCH Review crawlability, the ability to index as well as the page interaction. This guide is designed to help you confidently launch and market your website. Providing that you follow these golden rules you’ll avoid having to deal with any costly mistakes, improve visibility, create a better visitor experience to and through your website and pick up a…

Many websites feature large full-screen images and some even feature the same with video. All of this can take a huge amount of time to load, with sites adding preloader panels over the screen hiding the content until this has loaded. This tutorial will feature taking a small video and scaling it up to fill the screen, obviously the problem with doing that is that it becomes heavily pixelated and distorted. So instead of scaling the video up, the pixel data from the video will be used to draw smooth graphics that will fill the screen. To start with, the first effect the tutorial will create is a dot effect like those low-res screens that you find as display boards in sporting events. The image of the video will be…

SUPERCHARGE SUBLIME TEXT Get 25 tips and tricks to power up the editor for a faster workflow INTERACTIVE 3D VR INTERFACES Step into the future with virtual reality UIs for desktop and mobile HOW TO CODE CSS FLIP EFFECTS The techniques needed to add animation to a single element BUILD REACT APPS WITH REDUX Use the predictable state container to build better JavaScript applications Visit the WEB DESIGNER online shop at imagineshop.co.uk for back issues, books and merchandise ALL IN YOUR NEXT WEB DESIGNER Issue 251 on sale Thursday 21st July 2016…

“ Plan animations in the early stages of your design as they could replace a part of the UI and improve the UX ” The Golden Rules experts Our mammoth 20-page lead feature brings together a host of industry experts. Eric Meyer kicks of the feature, before Tom Wittlin from Folk, Theo Beauvallet of Sweet Punk, the team at Crowd and Guy Stradling and Peter Betteridge from Thinking Juice guide you to the perfect site. Page 40 Tam Hanna Tam’s career has seen him wrestle with a variety of stacks ranging from the commonly used to the archaic. This issue he delves into the world of YouTube and reveals how to customise embeds, live stream and more. Page 72 Sean Tracey Sean is a technologist and author. Sometimes, his JavaScript…

Animated Transitions bit.ly/1PqKjie CSS transitions have come a long way in a short time, but building from scratch is still time-consuming. This collection of animated transitions provides some very impressive effects including Fire Extinguisher, Scrub, Gooey and our favourite: Glitch. RespImageLint ausi.github.io/respimagelint A bookmarklet that checks images on a webpage against common mistakes and best practices. Head to a site and select the bookmark, it’s as simple as that. Vital doximity.github.io/vital A CSS framework for modern web applications that keeps it very simple. Instead of adding everything, it includes only the necessary. Gutenberg matejlatin.github.io/Gutenberg Everyone wants to create better web typography, so try out Gutenberg. This is a flexible and simple-to-use web typography starter kit.…

1.Create document template The first step is to create the basic HTML document. This consists of the HTML declaration, complete with the head and body sections. The head section is used to include external resources – ie JavaScript and CSS, while the body section will be used to store the visible page content. 2. Write page content The page content consists of the navigation and the visible map – this also has elements for each point that can be navigated to. Each navigation point will be referenced by a unique ID for styling at a later stage. Everything is contained within an article container to allow the scrolling map to be repositioned if required, as well as for clipping content overflow. 3. Begin CSS styling Create a new file called…

Cedric Kiefer, Cofounder and creative lead “We don’t want to limit ourselves with sticking to specific techniques, but challenge ourselves to work on the boundaries of technology. [It’s not] the use of digital tools in general [that] excites us, but the fact that we are finally able to develop our own tools” Julia Laub, Cofounder and managing director “There are so many different facets to our work, so we can’t say there is one typical project that defines our ethos. Some of our [best] work is definitely our self-commissioned independent work, which we do out of curiosity and without any clients involved”…

THE GOLDEN RULES OF MARKETING RULE #1: UNDERSTAND YOUR AUDIENCE Communicate with your audience successfully using demographic insights. RULE #2: SEO Improve visibility in search and encourage the synergy between all sources. RULE #3: ENGAGEMENT Build up your relationships and a community that trusts in your brand. RULE #4: NEVER FORGET THE CONTENT Create immersive content that keeps a good hold of your user’s attention. RULE #5: REACH Convert visitors into customers and subsequently turn them into loyal advocates. #1: UNDERSTAND YOUR AUDIENCE ACTIVELY LISTEN TO YOUR AUDIENCE What do we want them to remember and how are we perceived? Find this out first and foremost. TARGET CUSTOMER GROUPINGS Use demographic profiling and segmentation to target groupings according to characteristics and motivations. CHOOSE CHANNELS WISELY Communicate with your audience based…

YOUR BONUS RESOURCES ON OUR BRAND NEW FILESILO THIS ISSUE YOU WILL FIND AN UNMISSABLE COLLECTION OF VIDEO GUIDES AND RESOURCES • 70 Minutes of expert guides on Beginner PHP from WebMentor (webmentor.org) • 20 Vibrant Photohop effects from SparkleStock (sparklestock.com) • 8 Real photo poster mockups from SparkleStock (sparklestock.com) • 3 HTML5 and Responsive web templates layouts from HTML5UP and W3 Layouts (html5up.net) (w3layouts.com) www.filesilo.co.uk/webdesigner FILESILO – THE HOME OF PRO RESOURCES DISCOVER YOUR FREE ONLINE ASSETS A rapidly growing libraryUpdated continually with cool resourcesLets you keep your downloads organisedBrowse and access your content from anywhereNo more torn disc pages to ruin your magazines No more broken discsPrint subscribers get all the contentDigital magazine owners get all the content too!Each issue’s content is free with your magazineSecure online access…

FIRST PRIZE TP-LINK GIGABIT ROUTER C3200 The C3200 (worth £170) offers Tri-Band technology that creates three separate Wi-Fi bands for connecting more devices to your network without a drop in performance. It offers 3200Mbps Wi-Fi speed over one 2.4GHz (600Mbps) and two 5GHz (1300Mbps each) bands. Six high-performance antennas maximise coverage area and stability, and a 1GHz dual-core CPU and three co-processors handle simultaneous connections with no interruption. Find out more at uk.tp-link.com/products/details/cat-9_Archer-C3200.html. THE TYPOGRAPHY IDEA BOOK Be inspired by the masters with this great collection of typography worth £12.95. WEB DESIGNER SUBSCRIPTION Get your hands on a 6-month subscription worth over £35. CODEPEN PRO PLAN Unlock the full power of the code playground plan worth $75 (52). SECOND PRIZE TP-LINK POWERLINE KIT Instantly create a quick home network with…

PROJECT VISIT HUMBOLDT WEB VISITHUMBOLDT.COM AGENCY BUKWILD WEB BUKWILD.COM FOLLOW @BUKWILD PROJECT DURATION 4 MONTHS NO. OF PEOPLE INVOLVED BUKWILD = 5 MISFIT AGENCY = 3 TOTAL MAN HOURS 400 Among very many things, one of the defining wonders of the World Wide Web has been its ability to make our planet smaller. The connectivity and rapid sense of sharing, not just of black-and-white information but colourful, vivid experiences is something to behold. We can look at and learn about real locations from all corners of the globe from our armchairs, irrespective of physical distance. That sense then of transporting online audiences to exciting destinations has obvious value on industries such as tourism, where the promotion and marketing of places is key to attracting new visitors. One such hotspot would…

THE GOLDEN RULES OF PLANNING RULE #1: BE PREPARED Personal preparation is vital, get yourself in order first so that you can be free to think clearly about the project ahead. RULE #2: GET IMMERSED Work with the client to understand where it is that they want to go with the project. RULE #3: TAKE IT ONE STEP AT A TIME A collaborative session for the team will help you to draw out the project masterplan with the assistance of the rest of your team members. RULE #4: SING THE SAME SONG Ensure that everyone involved in the project is on board with the idea. RULE #5: FOLLOW THE MAP Always refer back to your plan to make sure that you’re on the right path. #1: BE PREPARED GET THE…

Changing images The main background image at the top changes with each load so that content appears fresh each time you visit. Masking the text The mask that covers the background and image reveals the same heading in black over the top of the other content. Animated mask Once the page is loaded the white section of the page animates in from the bottom of the page, hiding the background. Header section The main heading of the site is always a striking image with white text over the top, standing out with maximum impact. Curaterz is a subscribed-for newsletter sent direct to your email account and it provides a random assortment of culture and lifestyle. Before signing up you have the ability to read some of the previous newsletters and…

Adding well-done streaming videos to a website makes the difference between amateur and professional outfits: customers are much more likely to purchase products if they can see them in action. But simply providing a YouTube channel along with a subscribe button is very 2010. Embedding a custom YouTube player into your website provides a lot of additional interactivity: first of all, the display of similar content can be suppressed, thereby ensuring that customer attention is not diverted to other channels or competing products. Secondarily, the look and feel of the player widget can be adjusted to blend into your website’s layout more efficiently. When done right, your YouTube video looks just as if it were hosted natively – the only difference is that Google gets to foot the bill. Finally,…