Magzter Gold (Sitewide Promotion)

Magzter Gold (Sitewide Promotion)

Digital Delivery

net April 1st, 2019 Digital Back Issue Cover

net (Digital)

(Write a Review)

Single Digital Issue

June 2020

$6.99

Powered By Zinio

Zinio

Satisfaction Guaranteed

Instant Start

Also available on ZINIO Unlimited logo

Get unlimited access to net (Digital) & 5000+ other magazines

1-month free trial

Renews at $8.99/month after trial.
Cancel anytime.

Get unlimited access to net (Digital) & 5000+ other magazines. Renews at just $8.99/month after trial. Cancel anytime.

Start Trial Learn more

57 Articles

EDITOR’S NOTE

Heard of Bing, Yahoo, Ask, AOL, DuckDuckGo, Baidu and Yandex? You probably have, but none of them hold a candle to the world number one search engine, Google, when it comes to market share. According to Statcounter (https://netm. ag/2Jrqac0), Google has just over 92 per cent of the market share with Bing coming a very distant second with less than three per cent. As for the rest they don’t even hit two per cent market share. So it would seem to make perfect sense to focus on Google when considering SEO. And this is exactly what our lead feature on page 48 does in this edition of net. SEO consultant Carl Hendy has been in the business for over 15 years and he gives some invaluable insight on the questions…

EDITOR’S NOTE

Heard of Bing, Yahoo, Ask, AOL, DuckDuckGo, Baidu and Yandex? You probably have, but none of them hold a candle to the world number one search engine, Google, when it comes to market share. According to Statcounter (https://netm. ag/2Jrqac0), Google has just over 92 per cent of the market share with Bing coming a very distant second with less than three per cent. As for the rest they don’t even hit two per cent market share. So it would seem to make perfect sense to focus on Google when considering SEO. And this is exactly what our lead feature on page 48 does in this edition of net. SEO consultant Carl Hendy has been in the business for over 15 years and he gives some invaluable insight on the questions…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING… ROBYN LARSEN A former nuclear engineer from British Columbia, Canada, Larsen is a UX speaker currently working as a front-end developer for Shopify in Singapore. w: www.robynlarsen.ca t: @robyn_larsen CHRISTIAN HEILMANN A developer evangelist, presenter and JavaScript lover living and working in Berlin, Heilmann is principal program manager for browser tools at Microsoft. w: christianheilmann.com t: @codepo8 TRINE FALBE Living in Esbjerg, Denmark, Falbe is a UX consultant, teacher, speaker, writer and co-author of The Ethical Design Handbook. w: ethicaldesignhandbook.com t: @trinefalbe Should I work for a client I don’t align with or shut up and take the money? Maybe I can influence from the inside? Leslie Haverford, Cumbria, UK TF: It depends on whether the misalignment is in the core business model, an internal process, or on a smaller scale. It also depends on what position you…

When designing your UX to work globally, how do you deal with the difference in word lengths between different languages? English vs German comes to mind. Ben Furfie, Merseyside, UK Focus on extremities RL: It’s really helpful to understand the design extremities. Focusing on English to Japanese or German really brings light to the design practice. Use pseudo-localisation Using pseudo-localisation as a design and development practice helps if you don’t have access to the actual translation. There is an amazing article from the Netflix design team that talks about scaling UIs with pseudo-localisation (bit. ly/pseudo-local). UI illustrations In some of our marketing collateral at Shopify, we use UI illustrations (HTML representations of the product) where text and imagery scale. COOL STUFF WE LEARNED THIS MONTH DESIGN MOBILE APPS FOR ONE-HAND USAGE The ever-expanding size of smartphone screens presents new challenges…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING… ROBYN LARSEN A former nuclear engineer from British Columbia, Canada, Larsen is a UX speaker currently working as a front-end developer for Shopify in Singapore. w: www.robynlarsen.ca t: @robyn_larsen CHRISTIAN HEILMANN A developer evangelist, presenter and JavaScript lover living and working in Berlin, Heilmann is principal program manager for browser tools at Microsoft. w: christianheilmann.com t: @codepo8 TRINE FALBE Living in Esbjerg, Denmark, Falbe is a UX consultant, teacher, speaker, writer and co-author of The Ethical Design Handbook. w: ethicaldesignhandbook.com t: @trinefalbe Should I work for a client I don’t align with or shut up and take the money? Maybe I can influence from the inside? Leslie Haverford, Cumbria, UK TF: It depends on whether the misalignment is in the core business model, an internal…

WHICH UX ERRORS ARE THE MOST IRRITATING?

From our timeline Which books should web designers read? Not strictly ‘web design’ but User Friendly by @ cliffkuang & @fabtweet should be on the list. It explores applied user experiences, tells myriad fantastic stories, and gives practical advice to explore the concepts it presents. It’s so well written to boot! @tomjepsoncrtv Don’t Make Me Think by Steve Krug may be usability focused but is essential reading for anybody who works in web design and development. If a client questions a web design decision, I can usually point them to a chapter in this book. @TheArtOfAwe Thinking, Fast and Slow by Daniel Kahneman – an absolute classic and invaluable for designers. The Design of Everyday Things by Don Norman – another design/psychology staple, and one that changed how I think about design. Designing for Emotion by…

WHICH UX ERRORS ARE THE MOST IRRITATING?

When designing your UX to work globally, how do you deal with the difference in word lengths between different languages? English vs German comes to mind. Ben Furfie, Merseyside, UK Focus on extremities RL: It’s really helpful to understand the design extremities. Focusing on English to Japanese or German really brings light to the design practice. Use pseudo-localisation Using pseudo-localisation as a design and development practice helps if you don’t have access to the actual translation. There is an amazing article from the Netflix design team that talks about scaling UIs with pseudo-localisation (bit. ly/pseudo-local). UI illustrations In some of our marketing collateral at Shopify, we use UI illustrations (HTML representations of the product) where text and imagery scale. COOL STUFF WE LEARNED THIS MONTH DESIGN MOBILE APPS FOR ONE-HAND…

HOW NOT TO MAKE A WEBSITE

Tell us what your side project does I decided to write a book (How NOT to Make a Website) aimed at developers and business owners to help introduce them to the wonderful world of making websites. Why did you create it? I have over 12 years of experience as a web developer and I have seen some pretty bad sites in my time. I thought it would be helpful to share my knowledge to help others get the most out of their website. What technologies were used in building it? I originally wrote the book in 2014 with Word but have updated it this year, rewriting it using AsciiDocs. This enabled me to output both HTML for the Kindle store, as well as PDF format, which I used to create the paperback. I normally…

HOW NOT TO MAKE A WEBSITE

WHICH UX ERRORS ARE THE MOST IRRITATING?

From our timeline Which books should web designers read? Not strictly ‘web design’ but User Friendly by @ cliffkuang & @fabtweet should be on the list. It explores applied user experiences, tells myriad fantastic stories, and gives practical advice to explore the concepts it presents. It’s so well written to boot! @tomjepsoncrtv Don’t Make Me Think by Steve Krug may be usability focused but is essential reading for anybody who works in web design and development. If a client questions a web design decision, I can usually point them to a chapter in this book. @TheArtOfAwe Thinking, Fast and Slow by Daniel Kahneman – an absolute classic and invaluable for designers. The Design of Everyday Things by Don Norman – another design/psychology staple, and one that changed how I think…

WHICH UX ERRORS ARE THE MOST IRRITATING?

SOMETHING FROM NOTHING

I’ve just finished developing a site for a client who has been a pain in the ass since day one. The client worked in the publishing industry and was trying to set up an independent copyediting service. Apparently he was very well known, and claimed to have designed the logo for the publishing house that he had worked for previously. Even though I had a bad feeling about him, he paid upfront without even batting an eye, so I went ahead. I have since learned I don’t charge enough. Once I get a client, I have a very organised system for content submissions, including a client portal with detailed instructions for how to submit everything that is needed – copy, images, content, etc. I set up links and reminder emails from day one asking for…

SOMETHING FROM NOTHING

HOW NOT TO MAKE A WEBSITE

Tell us what your side project does I decided to write a book (How NOT to Make a Website) aimed at developers and business owners to help introduce them to the wonderful world of making websites. Why did you create it? I have over 12 years of experience as a web developer and I have seen some pretty bad sites in my time. I thought it would be helpful to share my knowledge to help others get the most out of their website. What technologies were used in building it? I originally wrote the book in 2014 with Word but have updated it this year, rewriting it using AsciiDocs. This enabled me to output both HTML for the Kindle store, as well as PDF format, which I used to create…

HOW NOT TO MAKE A WEBSITE

QUAD TECHNOLOGY

The studio is based at Romney Marsh Kent (aka the Fifth Continent), famous for its panoramic landscape/coastline views and wildlife. The studio location provides a connection with the countryside and blends into its surroundings thanks to the cladding of Siberian Larch. The unique building uses oversized windows to create panoramic views in every direction. This creates an immersive and inspiring experience to work from. The windows achieve bags of natural light and prevent eye strain, while the surroundings offer many glorious sights, from wildlife walking past, to being mesmerised by weather extremes. A perfect work/life balance is achieved by positioning the studio within private/gated grounds but yet far enough away from the residence to ensure a professional working environment is maintained. [1] The Herman Miller desk provides a great work platform,…

QUAD TECHNOLOGY

SOMETHING FROM NOTHING

I’ve just finished developing a site for a client who has been a pain in the ass since day one. The client worked in the publishing industry and was trying to set up an independent copyediting service. Apparently he was very well known, and claimed to have designed the logo for the publishing house that he had worked for previously. Even though I had a bad feeling about him, he paid upfront without even batting an eye, so I went ahead. I have since learned I don’t charge enough. Once I get a client, I have a very organised system for content submissions, including a client portal with detailed instructions for how to submit everything that is needed – copy, images, content, etc. I set up links and reminder emails…

SOMETHING FROM NOTHING

HOW TO SHOWCASE YOUR DEV SKILLS

Developers, the validation of your technical skills will be what convinces a recruiter to hire you 90 per cent of the time. But when it comes to a job interview, how can you make yourself memorable (for all the right reasons)? Here we run through what recruiters are looking for and how to ensure you stand out during that all-important interview. 1 POLISH UP YOUR PROGRAMMER’S PORTFOLIO A programmer’s portfolio is essential in any tech-recruiting process. It is your personal business card and enables you to showcase your coding skills through personal projects. In terms of format, you have options! You can go from single web pages to complex software projects. As a candidate, your portfolio will show your development level, your career goals and the skills you wish to acquire. It…

HOW TO SHOWCASE YOUR DEV SKILLS

QUAD TECHNOLOGY

The studio is based at Romney Marsh Kent (aka the Fifth Continent), famous for its panoramic landscape/coastline views and wildlife. The studio location provides a connection with the countryside and blends into its surroundings thanks to the cladding of Siberian Larch. The unique building uses oversized windows to create panoramic views in every direction. This creates an immersive and inspiring experience to work from. The windows achieve bags of natural light and prevent eye strain, while the surroundings offer many glorious sights, from wildlife walking past, to being mesmerised by weather extremes. A perfect work/life balance is achieved by positioning the studio within private/gated grounds but yet far enough away from the residence to ensure a professional working environment is maintained. [1] The Herman Miller desk provides a great work…

QUAD TECHNOLOGY

HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH

Historically, the tech industry has borne the hallmarks of an all boys’ club. Although the tide is changing elsewhere in the workforce, as recently as December 2019, research has found that the ratio of men to women in IT has been largely static, with the percentage of female IT professionals hovering at around 16 per cent for ten years. Even with more tangible barriers to diversity in the workplace broken down, such as access to higher education, the number of women working in the sector remains woefully low. According to recent research by Studio Graphene, 62 per cent of women in tech think that the image of the technology industry being maledominated is a deterrent for women to enter the sector. And for those women who have chosen a career in…

HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH

HOW TO SHOWCASE YOUR DEV SKILLS

Developers, the validation of your technical skills will be what convinces a recruiter to hire you 90 per cent of the time. But when it comes to a job interview, how can you make yourself memorable (for all the right reasons)? Here we run through what recruiters are looking for and how to ensure you stand out during that all-important interview. 1 POLISH UP YOUR PROGRAMMER’S PORTFOLIO A programmer’s portfolio is essential in any tech-recruiting process. It is your personal business card and enables you to showcase your coding skills through personal projects. In terms of format, you have options! You can go from single web pages to complex software projects. As a candidate, your portfolio will show your development level, your career goals and the skills you wish to…

HOW TO SHOWCASE YOUR DEV SKILLS

Camille Gribbons

Camille Gribbons had always pictured herself on Broadway. At 18, she had done musical theatre for six years, performing in community shows in her home of Phoenix, Arizona, and had become a local celebrity. She auditioned for acclaimed theatre programmes all over the US but failed to get into the big universities, so she entered Arizona State University to pursue an exploratory major. “It’s for people who have no idea what they want to study,” Gribbons chuckles. “For the first couple of years I switched my major probably every six months. I started out with Mandarin because I wanted to travel the world but it turned out the programme at my school feeds people directly into the CIA, and I didn’t want to spy on people! Then I looked into political…

Camille Gribbons

THE 5G UI REVOLUTION

5G is a data revolution about to change every aspect of modern life, connecting everyone in real-time with unparalleled flows of data. For web developers, 5G UI is set to revolutionise the web GUI equilibrium… as soon as it has the national coverage we see with 4G. The web has been stuck in a 2D world with the same top nav, hero and boxes of content, but what if there was another way? What if the client didn’t have to rely on the users’ hardware to deliver the experience, and instead we hoisted it up to the cloud? WHY IS 5G ANY DIFFERENT? 5G has two benefits over 4G. The first is latency small enough for everything to feel responsive, with early tests from Verizon hitting the 30ms mark (10x quicker than the…

THE 5G UI REVOLUTION

HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH

Historically, the tech industry has borne the hallmarks of an all boys’ club. Although the tide is changing elsewhere in the workforce, as recently as December 2019, research has found that the ratio of men to women in IT has been largely static, with the percentage of female IT professionals hovering at around 16 per cent for ten years. Even with more tangible barriers to diversity in the workplace broken down, such as access to higher education, the number of women working in the sector remains woefully low. According to recent research by Studio Graphene, 62 per cent of women in tech think that the image of the technology industry being maledominated is a deterrent for women to enter the sector. And for those women who have chosen a career…

HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH

Camille Gribbons

Camille Gribbons had always pictured herself on Broadway. At 18, she had done musical theatre for six years, performing in community shows in her home of Phoenix, Arizona, and had become a local celebrity. She auditioned for acclaimed theatre programmes all over the US but failed to get into the big universities, so she entered Arizona State University to pursue an exploratory major. “It’s for people who have no idea what they want to study,” Gribbons chuckles. “For the first couple of years I switched my major probably every six months. I started out with Mandarin because I wanted to travel the world but it turned out the programme at my school feeds people directly into the CIA, and I didn’t want to spy on people! Then I looked into…

Camille Gribbons

ANDREW COULDWELL

Could you briefly introduce yourself to anyone who doesn’t know you? I’m a Yorkshire-born, Los Angeles-based designer and developer with 15+ years experience creating digital experiences for everyone from NASA to Harvey Nichols. I recently returned to freelance life after several years leading design at Adobe and WeWork in New York City, and I recently published a book about design systems called Laying the Foundations (designsystemfoundations.com). What gave you the idea of writing a book about design systems and who’s it aimed at? During my time at Adobe and WeWork, I learned a lot about leadership and the dynamics of working with multiple teams and individuals. Unfortunately, it’s not as simple as just doing your best work. You have to learn to build a team, sell, earn trust and support, play politics, work…

ANDREW COULDWELL

THE 5G UI REVOLUTION

5G is a data revolution about to change every aspect of modern life, connecting everyone in real-time with unparalleled flows of data. For web developers, 5G UI is set to revolutionise the web GUI equilibrium… as soon as it has the national coverage we see with 4G. The web has been stuck in a 2D world with the same top nav, hero and boxes of content, but what if there was another way? What if the client didn’t have to rely on the users’ hardware to deliver the experience, and instead we hoisted it up to the cloud? WHY IS 5G ANY DIFFERENT? 5G has two benefits over 4G. The first is latency small enough for everything to feel responsive, with early tests from Verizon hitting the 30ms mark (10x…

THE 5G UI REVOLUTION

HOW DO YOU KEEP UP WITH DEVELOPMENTS IN YOUR FIELD?

GEORGE HADFIELD Head of digital, Mobas mobas.com From UI/UX research and trends, to knowing about the latest Google Search algorithm change, as head of digital at a full-service agency it’s vital I’m in the know. Always an issue when facing day-to-day workload pressures. So I use a Chrome extension called Panda 5, which replaces my ‘new tab’ page with the most popular content from credible platforms. It helps me stay on top of industry news. Attending relevant meetups and conferences immerses you into a world of excellent talent, too. MELIN EDOMWONYI Director of product delivery, Illustrate Digital illustrate.digital For me it’s about finding balance. I don’t chase UX design trends, but I’m aware we need to keep an eye on what’s new and experiment to see what works for us. Going to events and listening to talks…

HOW DO YOU KEEP UP WITH DEVELOPMENTS IN YOUR FIELD?

TYPEKIT, TWEENMAX / GSAP, JQUERY ILLUMINATING RADIOACTIVITY https://illuminating-radioactivity.com There’s no doubt that the notion of radioactivity strikes fear into most people’s hearts. But how much do we really know about what radioactivity is and why it’s bad? This engaging website is dedicated to answering such questions with rich references to science, politics and popular culture. Single-page and seemingly infinitely scrollable in structure, Illuminating Radioactivity starts with a charming interactive header that figuratively clears things up. Random, multicoloured PNG flakes bearing popular phrases are vanished on rollover or tap, revealing the title and dispelling the myths. This inventiveness and dynamism continues therein, using GreenSock-soaked animation thoughtfully to manipulate colour, images and typography. Delivering a large quantity of text, the font work is a significant triumph with distinctive sets like Opposit, Lexend Deca and Share Tech…

ANDREW COULDWELL

Could you briefly introduce yourself to anyone who doesn’t know you? I’m a Yorkshire-born, Los Angeles-based designer and developer with 15+ years experience creating digital experiences for everyone from NASA to Harvey Nichols. I recently returned to freelance life after several years leading design at Adobe and WeWork in New York City, and I recently published a book about design systems called Laying the Foundations (designsystemfoundations.com). What gave you the idea of writing a book about design systems and who’s it aimed at? During my time at Adobe and WeWork, I learned a lot about leadership and the dynamics of working with multiple teams and individuals. Unfortunately, it’s not as simple as just doing your best work. You have to learn to build a team, sell, earn trust and support,…

ANDREW COULDWELL

HOW DO YOU KEEP UP WITH DEVELOPMENTS IN YOUR FIELD?

GEORGE HADFIELD Head of digital, Mobas mobas.com From UI/UX research and trends, to knowing about the latest Google Search algorithm change, as head of digital at a full-service agency it’s vital I’m in the know. Always an issue when facing day-to-day workload pressures. So I use a Chrome extension called Panda 5, which replaces my ‘new tab’ page with the most popular content from credible platforms. It helps me stay on top of industry news. Attending relevant meetups and conferences immerses you into a world of excellent talent, too. MELIN EDOMWONYI Director of product delivery, Illustrate Digital illustrate.digital For me it’s about finding balance. I don’t chase UX design trends, but I’m aware we need to keep an eye on what’s new and experiment to see what works for us.…

HOW DO YOU KEEP UP WITH DEVELOPMENTS IN YOUR FIELD?

lusion.co It’s become somewhat of a cliche to complain that ‘all websites look the same these days’ and ‘all the creativity has gone out of web design’. Visit the website of Lusion (lusion.co) to see how this certainly isn’t the case. Founded in 2017, the Bristol-based, development-focused studio is on a mission to build “epic real-time interactive experiences to blow people’s minds”. And a quick scroll through the ‘Work’ section of the site makes clear that it’s very much succeeding, from an immersive spatial audio experience for Opera North to an cinematic exploration in global storytelling for filmmaker Julius Onah. We caught up with founder Edan Kwan, to discover how he works to bring such spectacular digital experiences to life. Could you briefly introduce yourself to anyone who doesn’t know you? I’m a self-taught…

TYPEKIT, TWEENMAX / GSAP, JQUERY ILLUMINATING RADIOACTIVITY https://illuminating-radioactivity.com There’s no doubt that the notion of radioactivity strikes fear into most people’s hearts. But how much do we really know about what radioactivity is and why it’s bad? This engaging website is dedicated to answering such questions with rich references to science, politics and popular culture. Single-page and seemingly infinitely scrollable in structure, Illuminating Radioactivity starts with a charming interactive header that figuratively clears things up. Random, multicoloured PNG flakes bearing popular phrases are vanished on rollover or tap, revealing the title and dispelling the myths. This inventiveness and dynamism continues therein, using GreenSock-soaked animation thoughtfully to manipulate colour, images and typography. Delivering a large quantity of text, the font work is a significant triumph with distinctive sets like Opposit, Lexend…

What’s on your desktop today? Medicine and client’s contract. Three little things that make your life worthwhile. My toddler’s manic laugh, the internet, and Wotsits. What do you have on the walls? At the office: a TV and some abstract art. At home: some drawings that my kid did at nursery. What will you do for lunch? Probably one of the food stalls at St Nick’s Market in central Bristol. What hours do you work? I usually do 9-6. It used to be way longer, but I need to balance work and home life now I’m a dad. What else do you do in the office? If I’m not working, I’m drinking coffee or playing Nintendo Switch with my colleagues. How often do you hang out with other designers? I should meet up with fellow designers more often, but there isn’t a huge scene…

lusion.co It’s become somewhat of a cliche to complain that ‘all websites look the same these days’ and ‘all the creativity has gone out of web design’. Visit the website of Lusion (lusion.co) to see how this certainly isn’t the case. Founded in 2017, the Bristol-based, development-focused studio is on a mission to build “epic real-time interactive experiences to blow people’s minds”. And a quick scroll through the ‘Work’ section of the site makes clear that it’s very much succeeding, from an immersive spatial audio experience for Opera North to an cinematic exploration in global storytelling for filmmaker Julius Onah. We caught up with founder Edan Kwan, to discover how he works to bring such spectacular digital experiences to life. Could you briefly introduce yourself to anyone who doesn’t know…

What’s on your desktop today? Medicine and client’s contract. Three little things that make your life worthwhile. My toddler’s manic laugh, the internet, and Wotsits. What do you have on the walls? At the office: a TV and some abstract art. At home: some drawings that my kid did at nursery. What will you do for lunch? Probably one of the food stalls at St Nick’s Market in central Bristol. What hours do you work? I usually do 9-6. It used to be way longer, but I need to balance work and home life now I’m a dad. What else do you do in the office? If I’m not working, I’m drinking coffee or playing Nintendo Switch with my colleagues. How often do you hang out with other designers? I…

One of the big commercial and critical hits of 2019, Knives Out takes the classic Agatha Christie-style whodunnit and gives it a modern twist. Directed by Rian Johnson and boasting an all-star cast led by Daniel Craig, it’s one of the most original and inventive movies of modern times, and so demanded a website that could pull off a similar trick (https://knivesout.movie). Based in Portland, Oregon, Oblio is a digital studio specialising in the use of digital technologies as design tools. Its award-winning team of inventors, artists, designers and developers has worked on countless projects, including over 50 major motion picture campaigns, so was the perfect fit for Lionsgate. Here, Oblio’s art director Cody Staudenmier and senior developer Scott Agrimson explain how they brought their client’s vision to life. How did you…

JULY 1986 Born in Hong Kong. AUGUST 2006 Signed as a contract singer in Hong Kong. MAY 2009 First freelance gig building Flash experience for Logitech. MAY 2010 First contract job remotely working for an UK agency. OCTOBER 2011 First time moving abroad working fulltime in New York. JUNE 2013 Moving to the UK to work freelance. JUNE 2016 Get married. JUNE 2017 My son is born. AUGUST 2017 Open up creative studio in Bristol, Lusion. MAY 2019 Release new studio website.…

JUNE 2019 Oblio receives the brief and begins ideating initial concepts for the Knives Out main site. JUNE 2019 Initial script read and kick-off meetings. JUNE 2019 Oblio sends through initial ideas and rough comps of site concept. JULY 2019 Client signs off on the concept of a 3D digital family tree. JULY 2019 Cody Staudenmier, the art director on the project, designs each page of the site with motion demos to show the client and to hand off to the developer. AUGUST 2019 The initial development of the site begins. At the same time so does the creation of the 3D knife asset that will be featured on the site. AUGUST 2019 The design of the site gets final sign off from the client and filmmakers as content creation gets started. AUGUST 2019 Site goes into client and internal QA while final features get…

Google SEO secrets

Search Engine Optimisation (SEO) refers to the process of improving the signals a website sends to Google in order to improve its visibility within the search results – therefore sending more traffic to a website. The more traffic a website has, the greater the chance for more website conversions, an increase in sales or an increase in website revenue. The ‘SEO’ search results, also known as ‘organic search results’, are shown below the Pay Per Click (PPC) results that appear at the top of nearly every search query. Google search results are no longer ‘10 blue links’, and the search result design and function can change depending on the type of query that is searched, previous search history and the user’s geolocation. Google has moved more towards being an ‘answer engine’;…

Google SEO secrets

WordPress: 20 best plugins

It could easily be argued that plugins were what made WordPress big. Without them, it’s just a blog platform that supports pages. Yet the majority of the problems and bad press cast towards the CMS are caused by the plugin ecosystem. While the possibilities are endless when almost anyone with an internet connection can find out how to write plugins, it does open the door for poorly written code and mistakes that can prove critical in terms of security. To help steer through the ever-growing maze of what’s available, we’ve handpicked 20 of the best plugins. Some are well known while some are up-and-coming but all of them are recommended against three factors: minimal bloat, maximum function and minimal footprint – meaning no intrusive dashboard adverts or messages. From caching solutions…

WordPress: 20 best plugins

One of the big commercial and critical hits of 2019, Knives Out takes the classic Agatha Christie-style whodunnit and gives it a modern twist. Directed by Rian Johnson and boasting an all-star cast led by Daniel Craig, it’s one of the most original and inventive movies of modern times, and so demanded a website that could pull off a similar trick (https://knivesout.movie). Based in Portland, Oregon, Oblio is a digital studio specialising in the use of digital technologies as design tools. Its award-winning team of inventors, artists, designers and developers has worked on countless projects, including over 50 major motion picture campaigns, so was the perfect fit for Lionsgate. Here, Oblio’s art director Cody Staudenmier and senior developer Scott Agrimson explain how they brought their client’s vision to life. How…

JUNE 2019 Oblio receives the brief and begins ideating initial concepts for the Knives Out main site. JUNE 2019 Initial script read and kick-off meetings. JUNE 2019 Oblio sends through initial ideas and rough comps of site concept. JULY 2019 Client signs off on the concept of a 3D digital family tree. JULY 2019 Cody Staudenmier, the art director on the project, designs each page of the site with motion demos to show the client and to hand off to the developer. AUGUST 2019 The initial development of the site begins. At the same time so does the creation of the 3D knife asset that will be featured on the site. AUGUST 2019 The design of the site gets final sign off from the client and filmmakers as content creation…

BUILD A 3D INTERACTIVE INTERFACE WITH THREE.JS

It’s possible to create 3D content for the web entirely in CSS but this is always going to be constrained to flat planes. While there is nothing inherently wrong with this, as designers we often want so much more. Using the three.js library affords us the opportunity to have lighting, shading, reflection maps and genuine 3D shapes to give a sense of depth to an otherwise flat screen. To push the design even further, there is also access to shaders to apply some filters to the image and give the design a final polish. In this tutorial, a 3D interactive animation will play in the background while the foreground will contain the regular 2D interface as normal HTML elements purely for accessibility, as we could also easily make parts of the…

BUILD A 3D INTERACTIVE INTERFACE WITH THREE.JS

CREATING INTERACTIONS

In the tutorial a 3D model is loaded, comprised of several individual elements including materials. It’s really straightforward to get access to any of these individual elements in the code. The first step is to name the elements in the 3D package that you choose. All 3D modelling applications should enable you to rename individual objects. Then export the model in a format that can be loaded into three.js. In our tutorial the COLLADA model format has been chosen just because it’s easy to read afterwards as it’s in XML format. Once the model has been loaded, it’s a simple case of finding that model. Three.js comes with a command ‘getObjectByName(‘name’, true)’. If you have added the model to your scene, prefix this with ‘scene’ and join with a period. The…

CREATING INTERACTIONS

Google SEO secrets

Search Engine Optimisation (SEO) refers to the process of improving the signals a website sends to Google in order to improve its visibility within the search results – therefore sending more traffic to a website. The more traffic a website has, the greater the chance for more website conversions, an increase in sales or an increase in website revenue. The ‘SEO’ search results, also known as ‘organic search results’, are shown below the Pay Per Click (PPC) results that appear at the top of nearly every search query. Google search results are no longer ‘10 blue links’, and the search result design and function can change depending on the type of query that is searched, previous search history and the user’s geolocation. Google has moved more towards being an ‘answer…

Google SEO secrets

MODELS FOR FREE

Not everyone is a skilled 3D modeller or has the time to learn how to become one. If you need 3D content for your WebGL scene, then you can probably find something for free online. First off you need to make sure that you can load the format of model into WebGL, thankfully the three.js library has a number of extensions for loading almost any kind of model that you can think of. Check out the threejs.org site for examples of how to do this. There are some great models for free on the CG Trader site (www.cgtrader.com). The site does contain paid models, but when making a search, just be sure to click the ‘free’ option. There will be premium and ‘on sale’ content interspersed with your search results,…

MODELS FOR FREE

WordPress: 20 best plugins

It could easily be argued that plugins were what made WordPress big. Without them, it’s just a blog platform that supports pages. Yet the majority of the problems and bad press cast towards the CMS are caused by the plugin ecosystem. While the possibilities are endless when almost anyone with an internet connection can find out how to write plugins, it does open the door for poorly written code and mistakes that can prove critical in terms of security. To help steer through the ever-growing maze of what’s available, we’ve handpicked 20 of the best plugins. Some are well known while some are up-and-coming but all of them are recommended against three factors: minimal bloat, maximum function and minimal footprint – meaning no intrusive dashboard adverts or messages. From caching…

WordPress: 20 best plugins

A QUICKSTART GUIDE ON HOW TO USE SVG

This tutorial is for designers and developers – whether you create graphics or are given them to build sites, it pays to know how to optimise them and add animation where applicable. You don’t need to know anything about the main graphics programs such as Illustrator or Sketch, though we will cover how these programs export SVG. This tutorial does assume you have a basic knowledge of HTML/CSS. SVG code is very similar and so even if you have never looked at the insides of an SVG, you should be able to follow along. After completing this tutorial you will know more about how SVGs work, the best ways to optimise them and how to add movement to them. This tutorial is a great starting point to extend your knowledge in one…

A QUICKSTART GUIDE ON HOW TO USE SVG

BUILD A 3D INTERACTIVE INTERFACE WITH THREE.JS

It’s possible to create 3D content for the web entirely in CSS but this is always going to be constrained to flat planes. While there is nothing inherently wrong with this, as designers we often want so much more. Using the three.js library affords us the opportunity to have lighting, shading, reflection maps and genuine 3D shapes to give a sense of depth to an otherwise flat screen. To push the design even further, there is also access to shaders to apply some filters to the image and give the design a final polish. In this tutorial, a 3D interactive animation will play in the background while the foreground will contain the regular 2D interface as normal HTML elements purely for accessibility, as we could also easily make parts of…

BUILD A 3D INTERACTIVE INTERFACE WITH THREE.JS

ADD REALISM TO ANIMATION WITH EASING

If you look at any moving object in real life, you’ll notice it doesn’t move at a constant speed. A ball will accelerate as it falls to the floor, slowing as it compresses and then speeding up as it rises into the air again. We can use easing functions in our animations to add realism. We tend to use ease, ease-in, and ease-out but you can make custom cubic-bezier eases, too. When you use ease-out, you will be starting fast and ending slow. Generally this works well when something is moving in. Ease-in acts in the opposite way, starting slow and finishing fast, which is good for objects moving away. You can use cubic-beziers in easing too. You may have heard of the Bézier tool (Pen tool) in Illustrator. This is the same…

ADD REALISM TO ANIMATION WITH EASING

TAKING THINGS FURTHER

SVGOMG https://jakearchibald.github.io/svgomg This tool, built by Jake Archibald, is a real must-have for your optimising arsenal for SVGs. It can remove unneeded tags and minimise code without affecting the visual appearance of the SVG. You can upload your source image or just paste in the markup if you are using your SVGs inline. Accessibility and SVGs https://simplyaccessible.com/article/7-solutions-svgs SVGs have a DOM similar to HTML and can be embedded in your pages in a variety of ways. As such there is quite a lot to take into account regarding accessibility. SVG Path Builder https://codepen.io/anthonydugois/pen/mewdyZ This path builder pen by Anthony Dugois is great fun to use and more importantly, is an excellent way to see how SVG paths are constructed. You can drag your points around and play with altering the parameters, all the while being able to see…

TAKING THINGS FURTHER

CREATING INTERACTIONS

In the tutorial a 3D model is loaded, comprised of several individual elements including materials. It’s really straightforward to get access to any of these individual elements in the code. The first step is to name the elements in the 3D package that you choose. All 3D modelling applications should enable you to rename individual objects. Then export the model in a format that can be loaded into three.js. In our tutorial the COLLADA model format has been chosen just because it’s easy to read afterwards as it’s in XML format. Once the model has been loaded, it’s a simple case of finding that model. Three.js comes with a command ‘getObjectByName(‘name’, true)’. If you have added the model to your scene, prefix this with ‘scene’ and join with a period.…

CREATING INTERACTIONS

MODELS FOR FREE

Not everyone is a skilled 3D modeller or has the time to learn how to become one. If you need 3D content for your WebGL scene, then you can probably find something for free online. First off you need to make sure that you can load the format of model into WebGL, thankfully the three.js library has a number of extensions for loading almost any kind of model that you can think of. Check out the threejs.org site for examples of how to do this. There are some great models for free on the CG Trader site (www.cgtrader.com). The site does contain paid models, but when making a search, just be sure to click the ‘free’ option. There will be premium and ‘on sale’ content interspersed with your search results,…

MODELS FOR FREE

USE SAPPER AND SVELTE TO BUILD A FAST SITE

Frameworks such as React, Angular or Vue have become the new normal for front-end development. By breaking parts of a website into components, we can more easily control how a website looks and operates, while at the same time making great experiences for the end user. This approach is not without its flaws, though. Speed is a big issue, with large JavaScript bundles slowing down their delivery. Techniques such as code splitting and server rendering go part way towards solving the issue, but this can be tricky to set up and it can end up having a worse impact if it’s not maintained. Svelte is a framework with a difference. It analyses the code at compile time and creates a set of modules in vanilla JavaScript, which avoids the need for a…

USE SAPPER AND SVELTE TO BUILD A FAST SITE

A QUICKSTART GUIDE ON HOW TO USE SVG

This tutorial is for designers and developers – whether you create graphics or are given them to build sites, it pays to know how to optimise them and add animation where applicable. You don’t need to know anything about the main graphics programs such as Illustrator or Sketch, though we will cover how these programs export SVG. This tutorial does assume you have a basic knowledge of HTML/CSS. SVG code is very similar and so even if you have never looked at the insides of an SVG, you should be able to follow along. After completing this tutorial you will know more about how SVGs work, the best ways to optimise them and how to add movement to them. This tutorial is a great starting point to extend your knowledge…

A QUICKSTART GUIDE ON HOW TO USE SVG

DEPLOYING TO STATIC HOSTS

Sapper has the added ability of being able to generate a static site without any extra development effort. This means it can be hosted anywhere that hosts static files, such as GitHub Pages, Netlify or Amazon S3. It can be cheaper and faster if the site’s content rarely changes because it can be cached on servers around the world. Running “sapper export” will build the site. Once complete, it then hosts it on its own server and starts to crawl the site, clicking on any links it finds. Every page it visits it will save and create its own HTML file. Of course, not every site is a candidate for static rendering. If it requires authentication, or has lots of content that frequently changes, a server-backed approach is the one that will…

DEPLOYING TO STATIC HOSTS

ADD REALISM TO ANIMATION WITH EASING

If you look at any moving object in real life, you’ll notice it doesn’t move at a constant speed. A ball will accelerate as it falls to the floor, slowing as it compresses and then speeding up as it rises into the air again. We can use easing functions in our animations to add realism. We tend to use ease, ease-in, and ease-out but you can make custom cubic-bezier eases, too. When you use ease-out, you will be starting fast and ending slow. Generally this works well when something is moving in. Ease-in acts in the opposite way, starting slow and finishing fast, which is good for objects moving away. You can use cubic-beziers in easing too. You may have heard of the Bézier tool (Pen tool) in Illustrator. This…

ADD REALISM TO ANIMATION WITH EASING

TAKING THINGS FURTHER

SVGOMG https://jakearchibald.github.io/svgomg This tool, built by Jake Archibald, is a real must-have for your optimising arsenal for SVGs. It can remove unneeded tags and minimise code without affecting the visual appearance of the SVG. You can upload your source image or just paste in the markup if you are using your SVGs inline. Accessibility and SVGs https://simplyaccessible.com/article/7-solutions-svgs SVGs have a DOM similar to HTML and can be embedded in your pages in a variety of ways. As such there is quite a lot to take into account regarding accessibility. SVG Path Builder https://codepen.io/anthonydugois/pen/mewdyZ This path builder pen by Anthony Dugois is great fun to use and more importantly, is an excellent way to see how SVG paths are constructed. You can drag your points around and play with altering the…

TAKING THINGS FURTHER

USE SAPPER AND SVELTE TO BUILD A FAST SITE

Frameworks such as React, Angular or Vue have become the new normal for front-end development. By breaking parts of a website into components, we can more easily control how a website looks and operates, while at the same time making great experiences for the end user. This approach is not without its flaws, though. Speed is a big issue, with large JavaScript bundles slowing down their delivery. Techniques such as code splitting and server rendering go part way towards solving the issue, but this can be tricky to set up and it can end up having a worse impact if it’s not maintained. Svelte is a framework with a difference. It analyses the code at compile time and creates a set of modules in vanilla JavaScript, which avoids the need…

USE SAPPER AND SVELTE TO BUILD A FAST SITE

DEPLOYING TO STATIC HOSTS

Sapper has the added ability of being able to generate a static site without any extra development effort. This means it can be hosted anywhere that hosts static files, such as GitHub Pages, Netlify or Amazon S3. It can be cheaper and faster if the site’s content rarely changes because it can be cached on servers around the world. Running “sapper export” will build the site. Once complete, it then hosts it on its own server and starts to crawl the site, clicking on any links it finds. Every page it visits it will save and create its own HTML file. Of course, not every site is a candidate for static rendering. If it requires authentication, or has lots of content that frequently changes, a server-backed approach is the one…

DEPLOYING TO STATIC HOSTS

In This Issue

Description

Details

Reviews

Recent Digital Issues Browse all

Recent net Digital Issues Browse all back issues

net (Digital) Subscription November 1st, 2019 Issue

net (Digital) November 2019: $6.99

net (Digital) Subscription October 1st, 2019 Issue

net (Digital) October 2019: $6.99

net (Digital) Subscription September 1st, 2019 Issue

net (Digital) September 2019: $6.99

net (Digital) Subscription August 15th, 2019 Issue

net (Digital) Summer 2019: $6.99

net (Digital) Subscription May 1st, 2020 Issue

net (Digital) May 2020: $6.99

net (Digital) Subscription April 1st, 2020 Issue

net (Digital) April 2020: $6.99

net (Digital) Subscription March 1st, 2020 Issue

net (Digital) March 2020: $6.99

net (Digital) Subscription February 1st, 2020 Issue

net (Digital) February 2020: $6.99

net (Digital) Subscription January 1st, 2020 Issue

net (Digital) January 2020: $6.99

net (Digital) Subscription December 1st, 2019 Issue

net (Digital) December 2019: $6.99

net (Digital) Subscription November 1st, 2019 Issue

net (Digital) November 2019: $6.99

net (Digital) Subscription October 1st, 2019 Issue

net (Digital) October 2019: $6.99

net (Digital) Subscription September 1st, 2019 Issue

net (Digital) September 2019: $6.99

net (Digital) Subscription August 15th, 2019 Issue

net (Digital) Summer 2019: $6.99

net (Digital) Subscription May 1st, 2020 Issue

net (Digital) May 2020: $6.99

net (Digital) Subscription April 1st, 2020 Issue

net (Digital) April 2020: $6.99

net (Digital) Subscription March 1st, 2020 Issue

net (Digital) March 2020: $6.99

net (Digital) Subscription February 1st, 2020 Issue

net (Digital) February 2020: $6.99

Customers Also Viewed

Audio Esoterica Magazine (Digital) Subscription October 28th, 2024 Issue

Audio Esoterica Magazine (Digital)

2 Issues: $3.66 ~~$7.32~~

PC Powerplay Magazine (Digital) Subscription February 17th, 2025 Issue

PC Powerplay Magazine (Digital)

6 Issues: $20.31 ~~$23.64~~

Focus D&R (Digital) Subscription June 1st, 2021 Issue

Focus D&R (Digital)

2021 / 06: $4.16

PC & Tech Authority (Digital) Subscription October 1st, 2018 Issue

PC & Tech Authority (Digital)

October 2018: $3.32

Hyper (Digital) Subscription

Hyper (Digital)

Issue 271: $2.94

Web Designer (Digital) Subscription November 1st, 2019 Issue

Web Designer (Digital)

No. 293: $5.99

Custom PC UK (Digital) Subscription April 1st, 2023 Issue

Custom PC UK (Digital)

April 2023: $4.28

Web Design For Beginners Magazine (Digital) Subscription October 17th, 2016 Issue

Web Design For Beginners Magazine (Digital)

Web Design For Beginners 8th Edition: $7.99

Windows 10 Tips, Tricks & Apps Magazine (Digital) Subscription December 1st, 2016 Issue

Windows 10 Tips, Tricks & Apps Magazine (Digital)

3rd Edition: $8.99

Computer Shopper Magazine (Digital) Subscription January 1st, 2021 Issue

Computer Shopper Magazine (Digital)

12 Issues: $43.99 ~~$60.36~~

Audio Esoterica Magazine (Digital) Subscription October 28th, 2024 Issue

Audio Esoterica Magazine (Digital)

2 Issues: $3.66 ~~$7.32~~

PC Powerplay Magazine (Digital) Subscription February 17th, 2025 Issue

PC Powerplay Magazine (Digital)

6 Issues: $20.31 ~~$23.64~~

Focus D&R (Digital) Subscription June 1st, 2021 Issue

Focus D&R (Digital)

2021 / 06: $4.16

PC & Tech Authority (Digital) Subscription October 1st, 2018 Issue

PC & Tech Authority (Digital)

October 2018: $3.32

Hyper (Digital) Subscription

Hyper (Digital)

Issue 271: $2.94

Web Designer (Digital) Subscription November 1st, 2019 Issue

Web Designer (Digital)

No. 293: $5.99

Custom PC UK (Digital) Subscription April 1st, 2023 Issue

Custom PC UK (Digital)

April 2023: $4.28

Web Design For Beginners Magazine (Digital) Subscription October 17th, 2016 Issue

Web Design For Beginners Magazine (Digital)

Web Design For Beginners 8th Edition: $7.99

Reviews

0

0

0

0

0

No reviews yet

Ask a Question

Click stars to rate

Please select a rating for the review.

Please enter title for the review.

Please enter content for the review.

Please enter order number.

Please enter your first name and last name.

Only letters allowed for first name and last name.

Please enter your email.

Upload photo

Cancel Submit

Processing...

Thank you for your feedback! Your review has been submitted and will be published soon.

OK

Be the first to ask a question about this product

Please enter content for the question.

Please enter at least 10 characters.

Your question can not be more than 150 characters.

Please enter your first name and last name.

Only letters allowed for first name and last name.

Please enter your email.

Submit Processing...

Thank you for your question! Your question has been submitted and will be published soon.

Answer this question

Please enter content for the answer.

Please enter at least 10 characters.

Please enter your first name and last name.

Only letters allowed for first name and last name.

Please enter your email.

Submit Cancel Processing...

Thank you for your answer! Your answer has been submitted and will be published soon.

OK

×