Innholdsfortegnelse for No. 271 i Web Designer

Be better at design hat makes a good web page/site/app design? It’s a pretty broad question but you can guarantee that it will include fonts, colour and layout. These are all essential components of the process and getting them right will go a long way to creating a design that works. This issue Web Designer has decided to bring together a swathe of tips, techniques and insight on fonts, type, colour and layout. It all kicks off on page 42 where we take a closer look at why you need to pick the right font, what a font portrays to the reader, the golden rules for picking font combinations and what is trending in the world of typography. UX/UI designer and Better Web Type author Matej Latin reveals his six…

01. New Japan Pro-Wrestling KEIBA umabi.jp/njpw-keiba Japanese horse racing promo. 02. Portfolio of Kadir Inan uix.me Cologne-based UI/UX designer showcases talent with smoking WebGL effects. 03. Dot Agency dot-agency.it Italian agency crowds out the white space here with oversized SVG rollovers. 04. Daijima daijima.jp How to choreograph impressive 3D animation skills to music. Graphics Thunder Rockets bit.ly/2EXDT6p Brazilian illustrators Thunder Rockets bring a wacky cartoonish style bursting with colour and packed full of charm. Colour picker Verdant Peninsula http://bit.ly/2FStA4w Typesetter Decoral bit.ly/2Djle4p Art Deco styling with a modern twist, Decoral by Lasko Dzurovski for Totem boasts 650 glyphs across three weights. WordPress Glytch bit.ly/2rrNuAt So called for the “glitch” effects employed throughout, Glytch is a set of music-themed homepage templates for selling sounds.…

“A good user interface design is characterised by aesthetics, ease of use, and functionality.” Apple devices are famous for their intuitive user interfaces and good design. The fact these two characteristics are so prevalent in their products is no accident. The late Steve Jobs was famous for his unflinching focus on good design, because he understood how critical design was to the user experience: “Most people make the mistake of thinking design is what it looks like. People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” Having a good user interface means that a customer will know intuitively…

1. Initiate HTML The first step is to define the HTML document. All of the document is contained within the HTML container, which consists of the head and body sections. While the head section is responsible for loading the external CSS and JavaScript resources, the body section will store the content created in step 2. 2. Content definition The HTML content consists of a header and main section. The header section is responsible for the 'cover' content that will be displayed to initially cover the full screen. The following main section will be used to store content that will move into view after the user starts to scroll the page. 3. Scroll listener Create a new file called 'code.js'. This JavaScript code must first wait for the page to load,…

1. Get started The first step is to define the document architecture that will be used to present the page content. This consists of a definition of the HTML document, which stores a head and body section. While the head section is used to load the JavaScript and CSS resources, the body section is used to store the content created in step 2. 2. Body content The page content consists of two child containers; an article container that stores a navigation and a figure for storing text corresponding to the navigation options. The navigation contains the interaction options, and each have a unique title attribute. The figure stores the caption text that corresponds to the equivalently positioned option located within the navigation container. 3. JavaScript listening Create a new file…

Typography and colour are the minimum components you would expect to use to form a design and create content that has a distinct look and feel. The wide range of typography and colour available to us enables any creative to design with a personality in mind for a brand or project. The way we compose our designs with textual matter hasn’t evolved a great deal but the resources and trends we use and follow do. The perfect combination of colour and typography comes from understanding the visual and tonal direction of a brand or message. COLOUR PERSONALITY BLUE • Intellectual • Trust • Efficiency • Coolness • Calm RED • Courage • Strength • Warmth • Warning • Excitement GREEN • Refreshment • Restoration • Reassurance • Environmental • Peace…

1 COMPLIMENT YOUR FONT PAIRING Don’t go mad with fonts, pick a couple that work together and set the tone and mood you want to portray. Contrasting fonts tend to work but be careful of readability and scale. 2 UNDERSTAND CONTEXT Where is your typography being displayed and who is going to read it? The right visual direction and tone is important when it comes to making your messages readable and relatable. 3 DON’T BE AFRAID OF SPACE Clarity and breathing space is important when making a message noticeable. Don’t make textual elements fight each other in a tight space. Nobody wins. Space helps keep focus. 4 SIZE MATTERS It’s important there’s not a huge variety of text sizes on a page. Consistency, hierarchy and readability are key. Ensure your…

ADOBE COLOR CC  adobe.ly/2wLilqq Adobe provides a range of rules that will help discover closely matched colours from selecting a primary colour. If you work with Adobe products, save your palette to a library to get rid of copying and pasting. COLBLINDOR  bit.ly/1qSSJSu A great tool to check your design against colour blindness. You can safely upload your artwork and get a feeling of how it is to have a colour vision handicap. WEB AIM COLOUR CONTRAST CHECKER  bit.ly/2ALPtTp Using this tool will help ensure that your chosen colours meet accessibility criteria. The AA and AAA web standards will make sure that your designs are compliant and user friendly.…

TABLES Tables in HTML should be used for tabular data — elements that are presented in a table, a package comparison for example. In the early days of web design, tables were used in order to create complicated layouts using background images sliced to fit each table cell. These layouts are definitely a thing of the past now, even before we had the responsive web. BLOCK Understanding the box model is imperative when learning frontend development. Block and inline-block level elements are used to enable content to display next to each other or one after another. These properties can be used to create full grid systems like the one used in inuitcss and older versions of Bootstrap, but newer technologies like Flexbox and CSS Grid are now taking over for…

“CSS GRID’S NEW TEMPLATING ENGINE ALLOWS FOR QUICK AND EASY EXPERIMENTATION WITH LAYOUT AND DESIGN. BY SIMPLY CHANGING THE TEMPLATE WE CAN RE-ORDER THE CONTENT.” “CSS REGIONS ALLOW FOR ELEMENTS TO BE PLACED INSIDE OF FLOWING CONTENT, THIS ALLOWS ELEMENTS BELOW THE FOLD ON MOBILE TO BE SHOWN AS PART OF THE CONTENT, ABOVE THE FOLD.” “CSS SHAPES ALLOW US TO WRAP TEXT AROUND A SHAPE BRINING YET MORE DESIGN ELEMENTS FROM THE PRINT WORLD OVER TO THE WEB” 4 MUST-READ RESOURCES 1 THE EXPERIMENTAL LAYOUT LAB OF JEN SIMMONS  http://labs.jensimmons.com/index.html Jen Simmon site provides a host of experiements that reveal what can be done CSS Grid. It’s not just CSS Grid that is included take a look at Whitespace, Flexbox & more. 2 A COMPLETE GUIDE TO GRID…

01 Follow the instructions on screen to create an account with our secure FileSilo system. Log in and unlock the issue by answering a simple question about the magazine. You can access FileSilo on any computer, tablet or smartphone device using any popular browser. However, we recommend that you use a computer to download content, as you may not be able to download files to other devices. If you have any problems with accessing content on FileSilo, take a look at the FAQs online or email our team at the address below. filesilohelp@futurenet.com…

Carl Cahill Carl is a creative who has been in the industy for over 10 years with a passion for UID and has previously been awarded Creative of the Year. This issue Carl uses his knowledge to reveal how to pick the right font, the rules for combining fonts, how to choose the right colours and the tools and resources to help. Page 42 Steven Roberts Steven is a multi-disciplined creative developer from Teesside. He’s been designing and building layouts for over 10 years. This issue he’ll be revealing how to create layouts with a practical focus on CSS Grid. Page 62 Mark Shufflebottom Mark is a Professor of Interaction Design at Sheridan College near Toronto. This issue he is exploring CSS4 variables and how they can help designers experiment…

Travelmatic  travelmatic.purethe.me/ Get Google Maps integration for plotting stop-off landmarks. This theme is ideal for a journey with photos and stories. Susastho  bit.ly/2F4CWJm Susatho offers an elegant and clean design perfect for marketing yoga, health and gym services. Halena http://bit.ly/2n6lgFK Want to add a touch of sophistication to your eCommerce? Halena offers minimal & modern in abundance Esquise http://bit.ly/2rwXqsl Big, bold and beautiful. This magazine theme will ensure that your content stands out and will get seen. Ambesten MarketPlace bit.ly/2DyTKMv Ambesten is a flexible WooCommerce theme ideal for responsive shop fronts.…

“This catalogue and eShop for the outerwear brand marries a reduced colour palette and readable page text with bold product placement” www.open-wear.com Designer: Build in Amsterdam – buildinamsterdam.com Development technologies jQuery, Squarespace, WordPress, WooCommerce…

“BELIEVING THAT “CREATION STARTS WITH AN IDEA,” INCULERATE PRIDE THEMSELVES IN HELPING EXCITING STARTUPS TO GROW AS QUICKLY AS POSSIBLE” It’s fair to say the modern internet experience is dominated by a clutch of incredibly successful companies. Each has cleverly found a highly profitable niche within the online world to become clear leaders in areas of search, social media, eCommerce, video and more. These enduring brands, which we need not mention, very often rose out of the dotcom bubble in the late 1990s and swerved being burst on the rise to the top. They outlasted the tidal wave of lesser competitors by seeing the future and evolving accordingly to conquer rapidly shifting territories. However, none of them did it without cost, and an equally important driver to success is always…

PICKING THE RIGHT FONT There are a few things to consider when choosing a font and it has a great deal to do with personality. Before starting a project, it’s good to think about values and words that describe the feeling of what you’re creating. They can be anything! For example; is the design going to be friendly, intelligent or confident? By limiting these values, say to three or five, we can start to get a sense of a direction that our chosen font needs to relate to. So a friendly font might be one that’s nice, round and really legible. Confident might be angular, perhaps full caps? This might be sucking eggs but running this type of exercise can help you focus your decision and so choose the right…

Colour and accessibility are key things to be mindful of, but are too often forgotten about by designers. You may be designing something on your nice shiny iMac with an incredibly glossy Retina display but not everyone will have one of those. Screens render colours differently and you can count on older screens having a harder time telling the difference between closely matched colours. Not only that, you have accessibility considerations whereby the viewer may have eye sight difficulties or colour blindness. Contrast will always save you here and there are many good guides to avoid these issues. Check out Web AIM (Web Accessibility in Mind) to see how your chosen colours rate within the AA and AAA web standards. SCREENS RENDER COLOURS DIFFERENTLY AND YOU CAN COUNT ON OLDER…

WIREFRAMES SHOULD BE USED TO FLESH OUT INITIAL IDEAS; THE GOOD, THE BAD & THE UGLY These structural designs are meant to be kept simple and they need to be quick and easy to make. They serve as a visual representation of the data that’s to be provided to the user on a particular page. Multiple iterations on the same page can be made at this stage. Wireframes should be used to flesh out initial ideas; the good, the bad and the ugly. Wireframes aren’t meant to be beautiful and the initial wireframes don’t even need to be shown to the client or stakeholders. Write down a list of elements and content you need to include and create every variation you can think of — it’s very rare that your…

WHEN FLEXBOX IS APPLIED THE BROWSER WILL ALIGN ALL OF THE DIRECT CHILDREN OR FLEX-ITEMS AS THEY ARE CALLED Flexbox is great for creating single-axis layouts, either vertically or horizontally. Supported by the browser’s powerful layout algorithm, spacing and sizing elements along an axis has never been more satisfying. The syntax can be confusing sometimes and there is a lot to learn but once you are familiar with this new way of aligning items you’ll wish it had always been this way. Flexbox shares some similarities with CSS Grid in that applying the value of ‘flex’ or ‘inline-flex’ to the ‘display’ property will have an effect on direct children in the DOM. When Flexbox is applied the browser will align all of the direct children, or flex-items as they are…

CSS REGIONS  http://bit.ly/2n6D6cE The CSS Regions module, a working draft, allows content from multiple elements to flow through multiple boxes. CSS SHAPES  http://bit.ly/2DB6r8L This specification allows the use of geometric shapes in designs. Currently supported in Chrome and Safari but not Firefox. CSS BOX ALIGNMENT  http://bit.ly/2BqrtS1 A working draft this module relates to the alignment of boxes within their containers in various CSS layout models. CSS EXCLUSIONS  http://bit.ly/2F9UR18 Currently a working draft this specification defines arbitrary areas around which inline content can flow.…

OCTOPRESS  http://octopress.org Octopress is a framework for Jekyll which tailors specifically for blogging, and bundles a number of commonly-used plugins. If you like Jekyll’s style, it may take some of the setup work off your hands. PUBLII  https://getpublii.com If you don’t want the trouble of setting up a command-line tool, Publii is a desktop application with GUI designed to develop static sites. Think of it like a CMS that sits on your local machine rather than a server. HAKYLL  https://jaspervdj.be/hakyll/index.html Someone made a Haskell library for static site generation? It might not be that widely used, but fans of Haskell (and there are many around) will love this.…

“When you are ready to purchase hosting, check that you have enough resources” Featured host: tidyhosts www.tidyhosts.com / 05603 674610 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 it a highly reliable and trusted reputation from its customers, making it the 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 –…

.concat() 2018 2018.conc.at Inviting the web dev and UX community to Salzberg, this one day event boasts 18 industry speakers. ngVikings 2018 ngvikings.org This travelling Angular conference hits Helsinki Finland with a band of speakers including Google experts. SXSW 2018 sxsw.com The world-famous Interactive, Film and Music conference and festival open its doors in Austin Texas with a packed schedule. UX In The City bit.ly/2Dsd4Xs This community-led UX conference hosts keynote speakers Sarah Richards, Molly Watt and Chris Atherton. UX Camp Brighton bit.ly/2BoSUfm A smaller, more personal “barcamp” event, that appeals to UX designers.…

1. HTML initiation The first step is to create the page document architecture from HTML. This consists of the HTML document definition, which holds the head and body sections. While the head section is used to load the external CSS file, the body section is used to store the HTML created in step 2. 2. Visible HTML The visible content consists of a series of containers using the 'slant' class. You can place any content inside these containers. This example uses an individual image for each example container. The HTML is designed to be kept to a minimum, without any unnecessary elements for formatting or embedded styling. 3. CSS initiation With the HTML now complete, create a new file called 'styles.css'. The first definition in this file sets the HTML…

GRIDLOVER  gridlover.net Grid Lover is awesome at gauging font sizes and spacing on a web page when you’re considering how big your H1 and H2 titles need to be. This free tool enables you to dynamically set scaling rules that apply to your headers and tinker with the CSS. It’s also a great tool for when you need to hand over designs to a developer since the output CSS and rules are really useful for getting consistency between design and code. CANVA FONT COMBINATIONS  bit.ly/2rfTqfU Canva is a useful tool if you want to simply see font pairings and get some inspiration. Select your starter font and see where it takes you, providing you with a list of useful ideas of great font pairings. A great advantage of this tool…

1 READ THE CONTENT Meaningful typography starts with one thing —the content. Typographers know this since they’ll always read the book before they start typesetting for it. Unfortunately, it seems that many web designers underestimate the importance of content in a web design process. They will often find excuses in the fact that the website doesn’t exist yet so there’s no content to work with. When that’s the case, use content that is similar. If you’re designing a website about finance and economics, for example, find an article about that and read it. 2 CHOOSE A TYPEFACE BASED ON CONTENT Now you have read the content, you’re ready to choose your main typeface. If a website is about technology, but is expected to have medium to long articles, use a…

1 BEST FIT Colours can be very subjective but are nevertheless important when it comes to look and feel. The personality of your project still has a complete hold of the colours you choose. The first step would again be to think about your values and what colours best fit. It’s best to acknowledge colour psychology before you start picking any colour. This is because you can really influence human behaviour and perceptions of what is being seen by the colour used — take warm and cold colours, for example. Although obvious, we have the ability to control a reader’s feelings and behaviour just by the colours we use. 2 LESS IS MORE As with text, hierarchy is important. Having some ground rules for colour usage prevents your artwork looking…

Inspired by http://project-redspace.com Main navigation The main navigation is available, hidden behind the main burger menu. Clicking this animates the overlay menu down from the top of the screen. Video background The site is set up to tell a story, very similar to a documentary, and the main background is a full screen video. Overlaid SVG images When the video starts to play, the crisp SVG images spring forward and expand into place in the centre of the display. Call to Action After the images have animated onto the screen, the text and call to action button appear on the screen enabling the user to go deeper into the experience. Keeping you orientated The bottom of the screen has three stages of the story and locates the user where they…

You can save yourself hours of time in development since frameworks have been battle-tested by a number of developers and users. However, they can also add an unnecessary amount of code bloat to the project. When using a framework it is worth spending time choosing only the elements that you want. This will help keep down the size of the files to be used. However, thanks to the widespread adoption of CSS Grid and Flexbox these systems are starting to fall out of favour. These frameworks usually offer much more than just a grid system, but since we’re discussing layout we’ll concentrate on the most popular frameworks grid system. BOOTSTRAP The Twitter Bootstrap grid works much like old design grids — they apply 12 columns onto the container and you…

Web designers have had access to variables for some time when using CSS preprocessors to create style sheets. Now with major browser support, CSS4 variables are poised to take the power of CSS preprocessors and place this natively in the browser for designers to harness. CSS preprocessors work by compiling their variables down to regular CSS. The benefit of having a variable in the browser is not part of what they offer, and that’s where CSS4 variables have the advantage over their preprocessor counterparts. It’s completely possible to change the value of variable by the user at any time. In this tutorial, a few different use cases are going to be explored. The first just being for the designer to change the colour in one variable and see every instance…

“No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks.” “Becoming part of this vibrant, caring community was something I hadn’t expected before the course, but now I couldn’t be without it. To be a Northcoder is to be enlightened, inspired and supported.”Joanne Imlay Primary school teacher to software developer at Careicon “Northcoders delivered their part of the bargain in spades. They provided tremendous assistance in turning me into the full product – a well-rounded, capable future tech employee – and they have the contacts to deliver the opportunities for such people.”Joe Mulvey Maths teacher to software developer at Auto Trader Featured: Northcoders www.northcoders.com Twitter : @northcoders Facebook: Northcoders About us Northcoders is the coding bootcamp for the north,…