netAugust 2019的目錄

No matter where you are in your career – whether you’re a fledgling designer just finding your feet in the industry or an experienced pro with decades of projects under your belt – all of us can benefit from adding strings to our bow. Picking up new skills is what helps us progress professionally and evolve alongside changes in the industry. That’s why this issue we’re focusing on skills and tools that significantly up your game in specific areas. To kick off, we’ve asked Louis Lazaris to rundown the 10 greatest frameworks to help you get more out of your CSS, allowing you to shape layouts, create components and craft animations with ease. But there’s a lot more where that came from. We’ve also asked Jamie Shanks to offer up…

SIDE PROJECT OF THE MONTH INFO JEREMIAH LEE job: Lee is an engineering manager at InVision. He grew under the Californian sun but now calls Stockholm, Sweden his home. w: https://www.jeremiahlee.com t: @JeremiahLee Tell us what Tab Tosser does. Tab Tosser is a Firefox extension that automatically closes browser tabs you have ignored. It tracks when browser tabs are last viewed and closes them when they have not been revisited for 1–90 days, based on your preference. If you go on vacation, Tab Tosser detects you have been away and pauses for a few days while you catch up. It also keeps a backup log of recently tossed tabs just in case. Why did you create it? A while ago, I reset Safari on my MacBook Pro while debugging a web…

WORKSPACE I have a thing for esoteric office spaces. A creative office space makes creative work easier. After getting sick of waiting in line for a bathroom in our old office, my wife set out to find us an esoteric new space. Fortunately, she succeeded. Our new office is located in an outdoor shopping mall in Chicago called Old Orchard. We run an ecommerce agency, podcast and apps business out of a traditional bricks and mortar retail location. I absolutely love the dynamic. I’ve made it a habit to go for daily walks through the mall. We hired an interior designer to help us plan the space. Knowing that we wanted to collaborate, host client meetings and create audio and video content, she came up with a layout that did…

INFO job: Front-end designer and developer w: github.com/szynszyliszys t: @szynszyliszys Could you briefly introduce yourself to anyone who doesn’t know you? I’m a front-end developer and designer living in Cracow (aka Kraków), Poland. For the past seven years I’ve been working for a software development agency (Lunar Logic) but, as of the beginning of July, I’m joining security solutions company Castle (castle.io) to help them fight account takeover attacks. Apart from that, I am a conference speaker; my talks usually revolve around web performance. I also used to help with running Rails Girls and WebMuses workshops back in the day, where I helped quite a few people to make a first step in changing their career. You’ve worked on a lot of fintech and NGO projects. What’s different about them,…

https://square.geex-arts.com With a web world where talent is waving uncontrollably for attention, traditional, established creative outlets are largely bloated, making it tough to make a statement whatever the discipline. Hoping to give web designers, UX makers and graphic artists a new platform for expression, Square comes courtesy of Geex Arts, a full cycle digital agency from Russia. Headed by Slava Kornilov, the project brands itself an ‘Interface Game’, with this dynamic site that doubles as call to arms and gallery of current submissions. Participants are invited to download and present front-end ideas within a single gridded square, hence the name, for public presentation and free feedback. The site itself boasts an inspirational blend of SVG animation, WebGL and GSAP techniques to hover engagingly through Square’s space. Its oversized title tilts…

The Zoom drone differentiates itself with better technology. On top of regular drone features, the Zoom drone is waterproof for beach shots, it’s 100 per cent buoyant, has advanced tracking and solar charging panels. The website layout is minimal, with one message per screen. The product and website are aimed at tech-savvy, sports-mad and styleconscious individuals. The website reflects this by using clean lines, attractive typography and stylish photography. Keeping the layout mono, apart from links, makes the video and photography content stand out. The Zoom drone uses state-of-the-art technology to ensure the content captured is immersive and the website is no different. It is built as a PWA with fast-loading, push notifications about live transmissions from your favourite content creators and PWA features for the user to track the…

Up to 15 million people in the UK alone face digital accessibility issues when they use websites from many leading organisations. It’s a huge problem, as evidenced by new Ovum research that found over 815,600 WCAG (Web Content Accessibility Guidelines) on Fortune 100 companies. From our experience, over 94 per cent of websites globally are failing basic disability accessibility checks and have been for some time. It’s becoming an expensive problem. During 2018 in the US, over 5,000 lawsuits were filed against companies for non-compliance with the Americans with Disabilities Act (ADA). European companies are also targeted, as evident in the case brought against Scandinavian Airlines for ADA non-compliance. They are not alone. The airline industry has specific regulations about compliance accessibility and yet 98 per cent of web pages…

UX animation has always had a reputation for being timeconsuming and complex. Most of the time people feel that a lot of JavaScript code needs to be written to achieve decent results. But with recent technological innovations, software has emerged to make the process easier. Here are some to try… Principle https://principleformac.com This software, for Mac users, consists of an animation timeline that can be used to illustrate basic movement such as bounce, ease and pop. InVision Studio https://www.invisionapp.com InVision offers a range of prototyping tools, enabling the users to easily design interactive mock-ups as well as mobile prototyping with gestures. You can also test these using an iPhone. Framer https://www.framer.com/ Use this software to design, animate and share work via preset interactive interactions and animations.…

Neural networks Anin-depth plunge into the theory behind neural networks: Wikipedias coverage of neural networks is also expectantly vast, and great for getting lost in a rabbit hole: ForPython enthusiasts, TensorFlow is the de facto neural network framework: Thepaper-passionate may also enjoy the academic approach of O’Reilly’s ISBN9781491925607 brain.js GitHub Colourcontrast neural network demo: Anexcellent 19-part interactive video series covering the basics of neural networks with brain.js: Extra GoogleAI serves to inspire and terrify: AI Machine learning? Deep learning? Search: “AI, Machine Learning, & Deep Learning Explained in 5 Minutes” by Dhruv Shah on Use your judgement to train another brain.js neural network that learns when to use black text vs white text on colour backgrounds…

CLIENTS FROM HELL I’d just finished designing a website for the museum in my hometown. The client who ran the museum was a bit of a jerk and was entirely convinced that he knew all about using computers because he had worked for a computer company for two years over a decade prior. Client: I want this site to be blue – as blue as you can get – with red and white lines. Me: I’m not sure that’s going to work visually – it’ll be a really busy layout. He didn’t believe me. After everything was done, he made me go through all 200 links on the page to make sure they were working, had me refresh the page 16 times and then had me open and close the…

Use our exclusive code db65crv at checkout DOES NOT APPLY TO DIGITAL ONLY SUBSCRIPTIONS SAVE UPTO 73% ON YOUR BUNDLE SUBSCRIPTION WITH OUR EXCLUSIVE CODE SAVE MONEY AND NEVER MISS AN ISSUE! CHOOSE YOUR PACKAGE!* *DOES NOT APPLY TO DIGITAL ONLY SUBSCRIPTIONS SUBSCRIBE TODAY myfavouritemagazines.co.uk Voucher Code: db65crv (online use only) Terms and conditions: This offer is available to all new subscribers. Applies to print and bundle subscription only for Imagine FX, Computer Arts, 3D Artist, 3D World, net and Web Designer. Voucher code db65crv provides a further 12% discount on my favourite magazines online sale pricing. The code can only be redeemed online via https://www.myfavouritemagazines.co.uk. Prices and savings quoted are compared to buying full-priced print and bundle issues. You will receive 13 issues in a subscription year. You can…

INFO job: Independent creator of data visualisations w: sxywu.com t: @sxywu Shirley Wu was introduced to data visualisation JavaScript library D3.js during her first job as a front-end software engineer at a big data company in San Francisco. She slowly fell in love with the tool because it combined her two main passions: art – Wu started drawing and painting when she was four years old – and maths. No wonder she describes herself as three-quarters code and one quarter art on Twitter. Just four years after graduating from university, Wu took the plunge and went freelance to create data visualisations fulltime. She visualises a wide variety of topics covering culture, politics, art and more. Wu names three projects, all released in 2017, as major influences on her career. The first…

https://mendeleev.me/ For those of us who remember a time before HTML5 was ubiquitous, when CSS was hardly a standard, the <table> tag was king. It seems archaic but the table element was the web designer’s go-to for page layouts. We’ve come a long way folks. But it’s an ironic segueway to this wonderful URL, which thankfully uses sophisticated modern markup to render the periodic table. An educational project by Bucharest-based Agile Flex Agency, the site blends mixed media content with slick transitions to produce an immensely valuable experience. If schools aren’t using this, they should because it’s a rich learning tool with an app-like performance across devices. The presentation and interactivity is consistent from desktop to touchscreen, with every table element accessible with a click or tap. Each has its…

The VolleyUp! app relies on your phone’s GPS location and connects you to other nearby beach volleyball players. Through the app you are able to locate courts near to you, create a team(s) by inviting fellow players on the app, as well as set the time and date. Once you have the required number of players, it’s time to VolleyUp! VolleyUp! also aims to enhance the game by enabling users to sync the app on wearable tech, using their health apps. This will allow players to track their physical excursion per game and monitor the value of adding volleyball to their exercise regime, bringing the popular beach game into the current digital age. The look and feel of the brand is visually appealing, using the vibrant colour palette inspired by…

tribalworldwide.co.uk INFO Location: London, UK Established: 1996 Team size: Approx. 160 Expertise: Business consultancy, data science, customer experience, tech engineering, creative, social Clients: Volkswagen UK, ŠKODA, Wren Kitchens, Adidas, Biogen Awards: Creative pool, D&AD, The Webby Awards, BIMA Awards, Cannes Lions You’ve heard of UX: user experience. You’ve probably heard of XD: experience design, also known as UXD or UED. But you probably aren’t overly familiar with TX. Unless, that is, you work for Tribal Worldwide. The global network of interactive agencies – established in 2000 when the advertising company DDB integrated all its digitally focused properties under the Tribal brand – underwent a major restructure in 2018. This was entitled TX or ‘total experience’ and the idea was that it covered employee experience as well as customer experience. We…

It’s not uncommon to hear people bash CSS. With its focus on the cascade, global styling and the idiosyncrasies of its layouts, it has attracted its fair share of ire from frustrated developers. For these people, frameworks and libraries that modify vanilla CSS to make it more intuitive are an absolute godsend. Meanwhile, for some CSS purists, frameworks simply add a layer of abstraction to something that needs no adornment. Neither side is right or wrong. There’s great value in understanding the core language (especially some of the new features like flexbox and Grid Layout) but there’s also great value in being able to build something quickly that’s scalable and maintainable. That’s where CSS frameworks and libraries can help. In this feature, I’m going to help you get familiar with…

WebGL Integration https://docs.unity3d.com/Manual/webglinteractingwithbrowserscripting.html Once you master the basics, Unity also includes an interface for communicating between JavaScript running on your page and WebGL instance. This enables you to fit Unity WebGL in as you need, whether it’s as a complete solution or a single piece to a larger web-based application. Unity User Manual https://docs.unity3d.com/Manual/index.html The Unity User Manual includes detailed docs on every aspect of the user interface, tools and platforms. The detailed scripting API contains syntax and examples for virtually every function and command in the Unity C# language. Integration in the scripting environment (Visual Studio) makes jumping into the content a seamless process. Unity Tutorials https://unity3d.com/learn/tutorials These video tutorials are in indispensable resource for getting started with Unity. Whether jumping into game dev or building out a site…

Since the rise and rise of Google, search engines have changed the way we find information, make purchases and connect with others. It can therefore be challenging for those of us who work in the digital industry to keep up to date with the latest on-page guidelines and ensure that the websites we create have been optimised to reach maximum search engine visibility. You will often hear that ‘SEO is dead’ but why would you create an all-singing, all-dancing website if nobody can find it? THE OLD AND THE NEW In 2018, Google reported an incredible 3,234 improvements to its algorithm. The good news is that many of the SEO tactics that worked over 10 years ago are still relevant today (black hats look away). And once you have the…

Designers, developers, marketers and SEOs all have their own skills and roles when it comes to online marketing. With that comes individual or role-specific agendas, often leading to miscommunication or single-sided strategies. Silo culture in business or within specific projects limits innovation by decreasing collaborative opportunities that can lead to change, greater productivity and a unified effort. For example, SEOs prioritise ranking factors, devs prioritise the build, designers want things to look and function beautifully and marketers are all about ROI. These are valid descriptions and it is certain that for online marketing to be effective, we need all of these components. So how can we ensure smooth and successful digital marketing projects when there are so many factors and people with differing expertise involved for both in-house and remote…

https://angle2.agency/ Angle2 is a Ukrainian digital design agency, with a team that believes wholeheartedly in the power of brand. Apparently nothing excites them more than crafting unique, bespoke experiences that “exude your brand’s DNA” while pushing the UI envelope. This new online home for its services certainly backs the claim, introducing not only some stellar work but also two awesome effects. Opening onto some massive Montserrat fonts drenched in #2AF8EB – or turquoise to humans – we get a typographic workout worth savouring. The trick becomes a feature throughout and conveys the ‘angular’ sentiment with a superb slanted text illusion. This essentially uses left and right <div> elements to form a 50/50 split down the middle of the viewport. From here a series of tilted text lines wrapped in <span>…

From kiteboarding to windsurfing, this site offers a fresh new image for Surft, the Surfers Paradise of online stores. I have created an eye-catching design that offers users an easy way to view and purchase products as well as share the Surft. brand across multiple social channels. A 12-column grid layout has been used to enable elements to easily stack across the multiple device breakpoints. React.js and Styled Components have been used to create a component driven front-end, which means that developers can easily share common front-end styles and functionality across the entire site. To offer a high level of search engine optimisation, the back-end utilises Microsoft’s .Net Core to server-side render the React components on the initial page load. In keeping with the Microsoft back-end, the site is hosted…

Over the last 20 years, I’ve worked with some great brands across multi-discipline experiences. When doing this, you tend to pick up a heap of knowledge along the way that you use on a daily basis without even thinking about. The sort of things that become ingrained. Whether you are new to user experience and UI design or an all-rounded design veteran, I hope this is a small insight into my top 20 pro tips for creating the best possible experiences for your users. Create thorough user profiles Know your users #1 As a designer, it’s really important to design how your users are likely to interact with a website, product or mobile application when exploring it. Don’t just use analytics and stats; get into the shoes of your users.…

Inside by Playdead https://connect.unity.com/p/games-inside Inside is a puzzle game built in Unity that was developed by Playdead studio. Players solve environmental puzzles to control a boy in a dystopian world. The tone and overall imagery are beautiful and engaging. Ori and the Blind Forest By Moon Studios https://www.orithegame.com A beautiful example of the capabilities of the Unity platform when it’s combined with amazing artists and storytelling. Ori is a 2D platform game with incredible visuals. Unruly Heroes By Magic Design Studios https://www.unrulyheroes.com Unruly Heroes takes its inspiration from the Chinese novel A Journey to the West, which is also known as the Monkey King legend. This is another incredible example of 2D side-scrolling adventure gaming.…

Skeuomorphism. Was it really that bad and can it exist alongside minimalism? That’s the burning question. First of all, no, skeuomorphism wasn’t that bad. In fact, in terms of usability, it offered far more clarity than any other visual aesthetic and also made UI design feel more meaningful. Personally, as an avid reader, my favourite example of skeuomorphism has always been the original design for the iBooks app on Apple’s iOS, which featured a wooden bookshelf design and was simply fun to use. But it invites the question… why did we ever move away from skeuomorphism? Well, once upon a time, design was very bitmap-y. If we wanted rounded corners or shadows, they had to be designed in Photoshop and hacks were required to make them work on the web.…

The user experience of a product or application is about much more than usability. The interface or the interactions need to be more engaging and that’s how micro-interactions can play a major role, in addition improving the look and feel of the product. Here is when to use micro interactions: Visual feedback Providing visual feedback is very important for any user interface. This helps users to experience a sense of control and understand the context wherever they are in the app. Communicating system status Often when you are using an app, there are loads of processes that happen in the back-end (eg downloading server data, numerous calculations, etc). These operations usually consume some time and good design always lets the user know about the status of an ongoing process. User…