While this tutorial was kindly sponsored by Serif, the creator of Affinity, we’d like to point out that it is written by an independent design professional who personally enjoys using the software and shares her lessons learned. In this article, Isabel Aracama would like to walk you through just some of its very user-friendly main tools and features as an introduction to the software and to show you how we can create a nice flat vector illustration of a Volkswagen Beetle.
Read more…
Designing interactive prototypes is the best approach to expressing your ideas and explaining them to clients and stakeholders. Prototyping is an important part of the modern UX design process. Greg Rog has tried many tools, and came to the conclusion that Framer Studio is one of the best when it comes to making user interface prototypes. So, in the following tutorial, he will show you some Framer basics By the end of this article, you should be able to create a mobile app prototype, and you will also learn some CoffeeScript code. Greg will guide you along the way and will provide you with files to help you getting started more easily. Learn how to create a mobile app prototype with Framer while also learning some CoffeeScript code.
Read more…
In this article, Jakub Mikita is going to guide you through the entire process of creating and handling AJAX calls. You will learn how to make an AJAX call, but also how to do it the best way using features that WordPress offers developers right out of the box. There are a lot of “without-page-refresh” solutions out there, but here’s one you can create with AJAX. by the end of this tutorial, you will know how to build a simple plugin which will allow readers to send a report without reloading the page.
Read more…
In part two of this two-part series, Brian Holt explains why large refactors are easy by using the Elm Compiler, how to handle side-effects, and how to work with JavaScript. He’ll work through large refactors by relying on the Elm compiler, and set up recurring events that interact with JavaScript to trigger drum samples. Elm has been the most invigorating language Brian has worked in lately. Using the Elm Architecture helps you focus on what matters to your users.
Read more…
Writing in a new language requires time and practice. Front-end developer Brian Holt guides readers through building a drum sequencer in Elm. In part one of this two-part series, he’ll walk through the foundational concepts in Elm, i.e. getting started, using types, rendering views, and updating state. You will learn how to work with the Elm architecture in order to create simple applications.
Read more…
Building your own app really gives you the ability to create anything you can imagine. If you are a designer, surely you have seen plenty of designs that are not perfect, and you should feel OK with your app’s design not being perfect too. You have to start somewhere, and with the help of other designers and developers, you will improve. In this tutorial, Craig Clayton is going to look at one page of an existing app and teach you how to get the design into Xcode. The design for this app was done using an app called Sketch. Sketch allows you to design anything from websites to mobile apps. It is my preference for designing mobile apps.
Read more…
In this article, Nikola Lazarević will show you how to create a very realistic and detailed vector illustration of a watch using basic shapes, layer styles and cool Sketch functions such as “Rotate Copies” and “Make Grid.” No bitmap images will be used, which means you will be able to easily adapt the final image to different sizes and resolutions. While Sketch is undoubtedly an excellent UI design tool, it can be used as a powerful illustration tool as well. So, in this tutorial, he’ll walk you through the process of creating the iconic Heuer Autavia wrist chronograph, all in vectors.
Read more…
Welcome back to the second part of this tutorial on Gravit Designer. In the first part Christian Krammer took you through a general look at Gravit and set everything up, created the background image in the weather app and the status bar, and then started to make the initial elements of the design’s content. Having created the main text layers of the content area in part one, let’s continue with the weather conditions for the different times of day.
Read more…
Today there are plenty of applications available for modern design that let you easily bring your ideas to the screen: Sketch, Affinity Designer, Adobe XD (beta) and Figma, to name just a few. Gravit Designer is a quite new app, that gives you all of the tools needed to create functional and elegant screen designs. It can also be used to make icons, designs for print, presentations and much more. In this tutorial, Christian Krammer will walk you through the creation of a neat weather app.
Read more…
Take a look on CSS grid layout for making websites with a demo to see different levels of enhancement. You can use the hottest cutting-edge technologies and fancy techniques, as long as you don’t forget who you are making websites for: users. Your users aren’t all the same, nor do they use the same device, OS, browser, Internet provider or input device. By providing a basic experience to begin with, you can get the best out of the modern web without compromising accessibility. In this article, Manuel Matuzović explains how floating, flexbox and grid work inviting to provide an accesible and usable experience for various browsers. Integrate progressive enhancement so you can build resilient websites!
Read more…
