Table of contents for No. 291 in Web Designer

Ave http://ave.liquid-themes.com A host of fullscreen image led themes, all offering contemporary colour schemes, fonts and typography. Brook https://brook.thememove.com Forty plus homepage designs, mega menus, parallax effects and contemporary fonts for all types of site styles.. Homey https://demo01.gethomey.io Want to create your own version of AirBNB? This theme has integrated search facilities and featured sections. Zeen 2 https://codetipi.com/zeen A collection of contemporary templates to get started quickly, or try the layout builder to create custom options. Bomby http://bomby.webtm.ru Big, bold and colourful themes with a host of templates and sites including Freelancer, Business, Wedding and Agency.…

“A 3D-laden brochure experience for a highflying aeronautical brand offering a service of planes for wet lease services.” www.hifly.aero https://burocratik.com Colours Tools  jQuery, Three.js, GSAP Fonts Theinhardt font by François Rappo is used in Thin, Light Regular and Medium typefaces throughout. GT Pressura, designed by Dominik Huber and March Kappeler, appears in Light variety across site headings.…

1. HTML document definition The first step is to define the structure of the HTML document. This consists of the HTML document container used to store the head and body sections. While the head section is used to load the external JavaScript and CSS files, the body section will store the HTML content elements defined in step 2. 2. Body content The page’s body content consists of several articles that will be used to define the screen segments. The first article contains the initial display content, while the following articles store the split screen content. The split screen sections will animate into view as the user scrolls down the web page. 3. Listen and search Create a new file called “code.js”. This step initiates he JavaScript code…

The duration for the project totalled four months overall, which included one month of work after delivery to the client. While the main deliverables were due in January of this year, having started in November 2018, aftercare is still continuing to be provided to the client. “We always give support and maintenance on every project we take on, and in this case we were so in love with the beast that we really invested ourselves into making it something prize-worthy,” said Raul Uranga, tech director. “It’s this pride and inspiration that makes the ongoing aftercare so great, and our team is as inspired in taking care of this project as when they were creating it.” A big part of Grupo W’s attitude here is attributed to their attention to detail,…

HTTPS://EATGENESIS.COM Genesis originally approached us after seeing the site we produced for Two Chimps Coffee. They were impressed by the speed and overall UX of the website, and felt that the illustration and animation style aligned with their vision. We worked with Genesis to create a brand that would attract vegans and meat eaters alike by generating intrigue through design — positioning the brand as cool and mysterious rather than the traditional health-focused approach that many vegan brands take. Instead, we created a monochrome site that was as visually striking as possible and would help to create a distinct and recognisable style. The main focus of the site was the mystical characters, which we brought to life through SVG and waypoint animation, with the finished product providing a very unique…

“It’s important to be mindful of visual hierarchy and how this base size distinguishes itself” FONT SIZE When it comes to legibility and readability, the minimum acceptable font size as defined by the WCAG 2.0 Web Content Accessibility Guidelines is 18pt (or 14pt bold). We couldn’t really tell you what font size to use, as this largely depends on the font itself, but it’s important to be mindful of visual hierarchy and how this base size distinguishes itself from summarised text such as headings (<h1>, <h2>, <h3>, etc.). With your UI design tool of choice (InVision Studio is used here. Free version at https://bit.ly/2KlXtNW), create a series of text layers (T) and adjust the sizes to correlate with the following template: • <h1>: 44px • <h2>: 33px • <h3>: 22px…

CREATING COMPONENTS Components are a huge time saver and all UI design tools offer this feature (e.g. in Sketch, they’re called Symbols). In Studio, we can create components by selecting all of the layers that should make up the component and using the K shortcut. USING COMPONENTS Now, we can reuse this component by dragging it onto the canvas from Libraries Document on the left-hand side, although bear in mind that this workflow may differ depending on your UI tool. This method of creating design systems (and eventually creating the design itself) works especially well with modular/card-based layouts, although “common areas” — such as headers, footers, and navigations — will also be excellent candidates for a component. Like we’ve done with our typographic styles, colours, and buttons, we must remember…

Stencil provides a testing framework to create unit and end-to-end tests without any extra set up. All tests are written with Jest, which allows us to use the useful platform features it provides, including mocks, snapshots and clear syntax. Each test runs on a page object supplied by Stencil. Unit tests run inside a “SpecPage”, which takes the component under test and the HTML it should display and creates an initial render. We can then check this result to know if the component works correctly. For more complex interactions, the “E2EPage” uses Puppeteer to create a page for end-to-end tests. Interacting with this object allows us to control a real browser page and make sure all interactions work in the real world.…

Doing parallelisation professionally requires an understanding in the realms of technical informatics and microprocessor design. A large German publisher runs a series of tradeshows solely dedicated to this topic. Nevertheless, start out by looking at the description of the various event loops found in https://flaviocopes.com/javascript-event-loop. Furthermore, make sure to study race conditions in software (see https://en.wikipedia.org/wiki/Race_condition), which is the source of the image accompanying this boxout, and contains a great introduction covering these highly annoying software problems that occur if more than one thread tries to access a resource in parallel.…

“Premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK” Netcetera netcetera.co.uk 03330 439780 About us Formed in 1996, Netcetera is one of Europe’s leading web hosting service providers, with customers in over 75 countries worldwide. As the premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK, Netcetera offers an array of services designed to more effectively manage IT infrastructures. A state-of-the-art data centre environment enables Netcetera to offer your business enterprise-level colocation and hosted solutions. Providing an unmatched value for your budget is the driving force behind our customer and managed infrastructure services. From single server to fully customised data centre suites, we focus on the IT solutions you need. What we…

“No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks” Featured: Northcoders northcoders.comTwitter : @northcoders Facebook: Northcoders About us Northcoders is the coding bootcamp for the north, based in the heart of Manchester and built upon northern values of grit, determination and community spirit. No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks at their full-time bootcamp, or fit their course around your life with their 24-week part-time bootcamp. Their internal career support team will help find you work as a developer, setting up interviews with your choices of Northcoders Hiring Partners across the north of England. What we offer • Full-time: Fast-track your career in just 12 weeks •…

Daniel Schwarz Daniel is a UX/UI designer, web developer, and maker by background, but a teacher at heart. He travels and writes remotely. In this issue, he is going to teach you about designing the foundations of your user interface by starting a design system. Plus, he reveals a selection of top tools and resources. Page 46 “UI design is misunderstood. It’s not only about visual design, however, it doesn’t quite encompass UX in its entirety either. Great UI design is in fact a mixture of clarity and efficiency” Hannah Thorpe Hannah is Head of SEO at UK-based digital marketing agency Found. She has over five years of experience, having devised and managed successful online campaigns. She reveals the strategies to win the race to top spot. Page 84 Mark…

Scrollama https://russellgoldenberg.github.io/scrollama/ sticky-overlay Scrollama is a modern and lightweight JavaScript library for ‘scrollytelling’. The library uses IntersectionObserver in favour of scroll events. The aim of scrollama is to provide a simple interface for creating scroll-driven interactives. The site boasts a host of examples which show off the talents of the library. Color Thief https://lokeshdhakar.com/projects/color-thief Got an image and want a colour palette to match? Try this out. It displays the dominant colour and a representative colour palette. Try the demo to see it in action. Fullscreen Lightbox https://fslightbox.com This modern plugin (vanilla JS or React) lets you create responsive galleries or slideshows in a clean overlay box. It can also embed YouTube videos as well. Mavo https://mavo.io Want to build an app with just HTML & CSS? No JavaScript! ‘Mavo…

“Californian-based freelance interactive developer serves up a dynamic story of his skills with this brand new online home.” https://aaronmcguire.co https://aaronmcguire.co Colours Tools  jQuery, CreateJS, GSAP Fonts Esteban font by Angélica Díaz, available via Google Fonts, is used for subheadings and paragraph text. Designed by Julieta Ulanovsky of ZkySky, Montserrat is used in Black variety for styling page headings.…

1. Web page Initiation The first step is to initiate the document structure of the web page. This consists of the HTML container used to represent the page document. A head and body section is placed inside the HTML container. While the head section is used to load the external CSS file, the body section stores the page content elements. 2. Body content The body content consists of two buttons. Each button has the “icon” class applied. The second button uses the “another” class. This setup allows the icon effect to be applied to each of the buttons, with the second having additional styling to present an alternative icon. 3. CSS: button Create a new file called “styles.css”. The first step of this file initiates the default…

PROJECT DETAILS PROJECT NAME Muscle Cars “UnleashtheBeast” PROJECT URL dodge.com.mx/muscle Agency Grupo W Agency URL grupow.com Follow instagram.com/grupow PROJECT STATS PROJECT DURATION 4 months NO. OF PEOPLE INVOLVED 14 Miguel Calderon Concept & Art Direction Raul Uranga Direction & Development Rosy del Rio Definition & Concept Ivan Oñate Design & Art Direction Efrock Martinez Design & Art Direction Sebastian Mariscal Motion Graphics Paul 3D Art Jose Luis Esquivel Video Post Production Edgar Espero Music & Audio Heidi Lopez Development Carlos Seca Development Jose Alberto Córdoba Development Jose Luis Sandoval Development Claudia Fuentes Copywriter In automotive terms, the definition of the “muscle car” is a uniquely transatlantic phenomenon. You don’t need to be a devout petrol head to appreciate the typically American, and not wholly undesirable, traits. Muscle cars are bulging,…

WHO Herdl WHAT Agile Marketing, Digital Marketing, Marketing Strategy, Search Engine Optimisation, Pay Per Click, Web Design, E-commerce, Social Media Management, Social Media Training, Digital PR, and Viral Videos WHERE 4 Pass Courtyard, Ashby-dela-Zouch, Leicestershire LE651AG, GB WEB www.herdl.com KEY CLIENTS Two Chimps // QAccounting // Genesis // Design4Retail // Capita ged Day and Gareth Morgans started Herdl six years ago. Ged has a wealth of experience on both sides of the fence, working with digital agencies throughout his career in the music industry, where he founded the award-winning music download services People’s Music Store and Bleep.com. Ged was also instrumental in the creation of Warp Films, one of the UK’s most successful independent film and television companies, amongst other achievements. “I studied Creative Industries at University and then went…

HTTPS://WWW.CAPITAPEOPLESOLUTIONS.CO.UK We’ve been working with Capita over the last few months as part of a significant overhaul to how they present their HR solutions. The project has transformed the digital presence for Capita’s HR division, developing the overarching Capita People Solutions brand and website along with four pillar sites for various departments. We have worked to support Capita’s internal marketing team across several areas, including web design, development, SEO and copywriting. As part of this, we’ve conducted numerous rounds of research and competitor analysis and shared our findings with the broader team, taking a consultation style approach during decision making and independently implementing actions after that. Our core focus area during the project has been SEO, and we’ve helped Capita redefine their service offering with search in mind. We’ve worked…

When it comes to UI design, colour is habitually one of the first things that we enjoy dabbling with, but we’re taught that diving straight into visual design is a bad thing. This is still true, however, when it comes to creating design systems — colour should be a top concern because it plays many different roles. Colour in UI design can be mighty effective, but since some users (many, actually) suffer from various types of visual disabilities, it’s not always reliable. That being said, it’s not necessarily about the specific colour that’s being used, but rather the type of colour. This may not be true when it comes to branding — since colour is used for emotional impact in this regard — but with UIs, colour can also be…

“Essentially, this means that every element needs to be a component, even if it consists of only one layer” USE A DESIGN SYSTEM MANAGER InVision have a tool aptly named Design System Manager (DSM) (https:// www.invisionapp.com/ design-system-manager) that helps teams maintain, version-ise, and collaborate on design systems, although it’s yet to be supported on InVision Studio.Sketch has better support for managing design systems, where InVision’s DSM works well, or else there’s also the Lingo app www.lingoapp.com/use-cases/ design-system-manager COLOURS Step #1 is to save all of the colours to the “Document Colors” swatch if we haven’t done so already — this will make them easier to access when we need to apply them in our design. To do this, open the colour chooser widget from the inspector, choose “Document Colors” from…

A great way to be creative with the displacement effect in the tutorial is to try using a variety of different images as displacement maps. Simply using a greyscale image will give you a good result — it will work even better if the image can tile without any visible edges. In the tutorial, the image ‘map.jpg’ was used, but there are also a couple of other images that you might like to look at. Try using ‘disp.png’, which has slightly more contrast — this will give a deeper amount. You can also look at ‘water.jpg’, which is a special type of image known as a normal map. A free tool called CrazyBump (http://www.crazybump.com/) will allow you to make your own normal maps from greyscale images.…

One of the main purposes of a content management system is to make publishing of blog posts, news articles and other content easy for non technical people. Grav is no different in this and supports several ways of adding and displaying this content. The first is by using a listing page. Similar in nature to an archive page in WordPress, the listing page shows a block for each of its child pages and allows users to click through to the main article. Unlike WordPress, articles are not stored as a separate “post” type, but are sub pages. Create a new page called News and assign the “blog” template. Save the page, then immediately add a new page, setting the News page as the parent. This new page will become the…

“Search, as we understand it now, is becoming less and less common. The way users interact with Google is moving more and more into discovery, as Google pushes information to users, rather than waiting for them to pull it”Hannah Thorpe https://found.co.uk 01. ANALYSE YOUR COMPETITORS SEO iS a cOmpEtitivE landScapE SO rEvErSE-EnginEEr cOmpEtitOr STRATEGIES TO GAIN AN ADVANTAGE. Healthy competition is part of everyday life, and business is no different. It encourages innovation and makes you want to do better in every aspect of your business. Figuring out how to beat your competitors on the search engine results page (SERP) follows the same principle — discover your top competitors, identify why they are outranking you, and evaluate how to beat them to number one. Analysing your competitors is different when…

Essential assets and resources Get textures, fonts, backgrounds and more Exclusive video tutorials Learn to code/create with HTML, CSS & JS Tutorial project files All the assets you’ll need to follow our tutorials Plus all of this is yours too… • All-new tutorial files to help you master this issue’s HTML, CSS and JavaScript techniques • AI Architecture Sketches – 10 Photoshop actions from Sparklestock (worth $14) • 32 Neon Lightroom presets from Sparklestock (worth $19) • (www.sparklestock.com) Register to get instant access to this pack of must-have creative resources, how-to videos and tutorial assets The home of great downloads – exclusive to your favourite magazines from Future! Secure and safe online access, from anywhere Free access for every reader, print and digital Download only the files you want, when…

Generate — the conference for web designers — is back in the London on 26th September. Not only that, but it’s coming to you in a new form. Brought to you by yours truly, net and Creative Bloq, generateCSS (generateconf.com) will bring you everything you’ve come to expect from previous years, but this time as a concentrated single-day event focused on delivering skills and insight from leading lights in the CSS world. Taking place at Rich Mix in Shoreditch, generateCSS will bring you great sessions on everything CSS, covering everything including the latest specifications, creating revolutionary new layouts or assembling smooth UI animations. But that’s not all there is to enjoy: you’ll also get to meet fellow designers, pick the brains of CSS experts, get hands on with the latest…

AngularConnect https://angularconnect.com A two day Angular extravaganza involving a host of speakers, including members of the Angular team. GenerateCSS www.generateconf.com A bespoke CSS conference for web designers with a host of expert speakers including Cassie Evans and Natalie Weizenbaum. Full Stack Fest https://2019.fullstackfest.com A three-day, single track conference with a workshops day on GraphQL, WebAssembly, the JAMStack and Automation Testing. iOSDevUK www.iosdevuk.com If you want to get the lowdown on the skills needed to build iOS apps, then head to Aberystwyth and check out the 30 speakers. Web Unleashed https://fitc.ca/event/webu19 If you work in front-end web development, then come along and get a step up in your career at this conference.…

1. Document initiation The first step is to define the structure of the web page document. This consists of the HTML container that represents the document, which stores the head and body sections. While the head section link the external JavaScript and CSS, the body section stores the content created in step 2. 2. Body content The example content is made from a paragraph element that is used to present a sentence. The first letter in the sentenced is placed inside a span element that contains the “dropcap” class. The code will be set up to allow you to have multiple drop cap elements on the page using this class. 3. JavaScript modification Create a new file called “code.js”. The JavaScript waits for the page to complete…

“Packaging sellers RajaPack present a timely, stylish warning message around the threat of plastic waste on our environment.” www.rajapack.co.uk/swimming_in_plastic.html www.greenlightdigital.com Colours Tools HTML5, jQuery, SVG Fonts Arca Majora 3 font by Alfredo Marco Pradil is a wholly free sans serif typeface used here across slide titles. Playfair, designed by Claus Eggers Sørensen, provides the distinctive italicised accent font styling the various headers.…

In order to create an authentic experience, much of the “Unleash the Beast” project’s production work was geared around video and animation. This made the nuts and bolts technical development not overly tough, but naturally shifted considerable effort and time onto 3D design instead. “With all that in mind, we arrived at every 3D artist’s nightmare — rendering, which in our case took more than 2,000 hours,” admits Tech Director Raul Uranga. “That’s a lot of coffee and lots of calls home to tell them we were arriving late for dinner or not arriving at all! But we love it. It’s our passion to make things look the very best they can be, and it’s what made this project possible. We are committed, we love our work, and as a…

HTTPS://WWW.QACCOUNTING.COM We’ve worked with Qdos Accounting for many years in a marketing capacity, but this year we had the opportunity to lead the creative work for their new brand update. The new company, QAccounting, aim to solidify their position as the top accountants for UK contractors by modernising their approach both internally and externally. We were chosen to take the lead with the visual design and create a modern, ‘’appy’ experience with the project scope stemming from logo to UX design and everything in between. Our solution was a bright and colourful digital experience that centred around playful illustrations and animation. QAccounting were over the moon with the new design and couldn’t be happier with the reception it has gone on to receive. QAccounting now stands out in a crowded…

“UI design is about usability. While visual design is solely about form, UI design is about how the form aids the function.”Daniel Schwarz https://uxtricks.design Great typography boils down to accessibility. Visual design — i.e. colours and fonts — certainly add to the user’s overall experience, but at the end of the day users are using the UI, not looking at it as art. Legible letters result in clarity, and readable words are what help users digest content efficiently. However, well-designed typography can still be aesthetically satisfying. There’s a side to the science that we often forget about, and it’s the side where form and function become one. In fact, you’d be extremely surprised at how beautiful black-on-white Helvetica (or a similar font) can be after only a few simple typographic…

SIZE Buttons and links, much like typography, should have a few variations. After all, not all actions are of equal level of importance, and as we discussed earlier, colour is an unreliable method of communication, so it cannot be our main method of influencing visual hierarchy. We also need to think with size. Generally, it is recommended that button text be declared as 18px (same as the body text), but have three variations in size: Normal: 44px in height (rounded corners: 5px) Large: 54px in height (rounded corners: 10px) Extra large: 64px in height (rounded corners: 15px) This allows us to make certain buttons appear to be more important without reliance on colour, and also to nest buttons (for example, use a button inside a minimal-looking form field). “After all,…

“A 5-star app is obviously making users happy, so it’s worth taking a look at what they’re doing in order to make that happen” Daniel Schwarz  https://uxtricks.design Daniel is a UX/UI designer, web developer, and maker by background, but a teacher at heart. After years of writing for magazines and design blogs, as well as being an editor at both SitePoint and Toptal, Daniel now creates content for brands like InVision, UXPin, and Adobe while traveling and working remotely. Here he offers some expert advice and answers common questions. Q. Where do you go for inspiration? When it comes to app design, I like to search for apps on the actual app store within the niché that I’m designing for. This means that I can discover real, working examples of…

One of the benefits of Stencil— and web components in general — is that they can be taken and then used across multiple different projects. This also includes those written using major frameworks such as Vue, Angular and React. The level of support depends on both the component and framework that is involved. Both Vue and Angular handle web components as first-class citizens. Any data or events passing from or to them will work out of the box. React will also work with them, but, due to its synthetic event system, it will require refs. In all cases, all new components will need to be registered with the browser before using them. Exported Stencil projects provide a “defineCustomElements” method to do this while bootstrapping the application. To find out more…

Adding more processors to a system does not, usually, lead to a linear increase in performance. This is caused by Ahmdahl’s law — it postulates that many, if not most, tasks cannot be parallelised, at least not completely. The remaining serial part, no matter how small, then limits the maximum amount of speed-up which can be reached — its execution time stays constant even if the parallel task gets run in an infinitetisimally small time. The diagram here shows example speedups for a few percentages — keep in mind that many, if not most tasks tend to have rather large serial portions.…

1 SEMrush semrush.com This all-in-one marketing toolkit allows you to identify your organic competitors and displays the proportion of branded to non-branded traffic. 2 Ahrefs ahrefs.com This is one of the best link analysis tools that also has a fantastic competitor analysis tool based on keywords. 3 SimilarWeb similarweb.com A great tool that shows you exactly how a website attracts traffic across all channels like social, search and more. 4 Buzzsumo buzzsumo.com This popular tool allows you to analyse what content performs best for any topic, as well as for any competitor. 5 Moz moz.com One of the most popular applications on the market, it gives you plenty of ways to analyse your competitors.…