Creating a clock in Sketch might not sound exciting at first, but we’ll discover how easy it is to recreate real-world objects in a very accurate way. You’ll learn how to apply multiple layers of borders and shadows, you’ll take a deeper look at gradients and you will see how objects can be rotated and duplicated in special ways. To help you along the way you can also download the Sketch editable file (139 KB).
This is a rather advanced tutorial, so if you are not that savvy with Sketch yet and need some help, I would recommend to first read “Design a Responsive Music Player in Sketch” (Part One⎪Part Two) that cover a few key aspects in detail when working with Sketch. You can also have a look at my personal project sketchtips.info where I regularly provide tips and tricks about Sketch.
Recently, I decided to rebuild my personal website, because it was six years old and looked — politely speaking — a little bit “outdated.” The goal was to include some information about myself, a blog area, a list of my recent side projects, and upcoming events.
As I do client work from time to time, there was one thing I didn’t want to deal with — databases! Previously, I built WordPress sites for everyone who wanted me to. The programming part was usually fun for me, but the releases, moving of databases to different environments, and actual publishing, were always annoying.
One of the biggest risks of building a product is to build the wrong thing. You’ll pour months (even years) into building it, only to realize that you just can’t make it a success. At Hanno, we see this happening time and time again. That’s why we’ve put together a Lean Validation Playbook.
“Lean” in this case means that you’re moving swiftly to figure out what you’re going to build and how you’re going to build it with as few resources as possible. These resources might include time, money and effort. The lean startup methodology is advocated by Eric Reis, who has massively influenced the way we work through his book The Lean Startup.
Any time a user’s experience is interrupted, the chance of them leaving increases. Changing from one page to another will often cause this interruption by showing a white flash of no content, by taking too long to load or by otherwise taking the user out of the context they were in before the new page opened.
Transitions between pages can enhance the experience by retaining (or even improving) the user’s context, maintaining their attention, and providing visual continuity and positive feedback. At the same time, page transitions can also be aesthetically pleasing and fun and can reinforce branding when done well.
Using a style guide to drive development is a practice that is gaining a lot of traction in front-end development — and for good reason. Developers will start in the style guide by adding new code or updating existing code, thereby contributing to a modular UI system that is later integrated in the application. But in order to implement a modular UI system, we must approach design in a modular way.
Modular design encourages us to think and design a UI and UX in patterns. For example, instead of designing a series of pages or views to enable a user to accomplish a task, we would start the design process by understanding how the UI system is structured and how its components can be used to create the user flow.
Are you passionate about something? Do you have a secret project? Not something that will change the world (though who knows?), but will definitely change you? Do you have a friend who complements your skills? Has anyone recently asked you for help with their project? Do you just have a digital dream, or is there also a plan to make it come true?
Every professional has something in common. It’s called the comfort zone.
Editor’s Note: Some people seem to have a magic touch when it comes to digging up design goodness. Veerle Pieters is one of them. As she explores print and web design, photography, art and type, she uncovers a lot of brilliant gems. And because they are too good not to share, she has compiled a selection of inspirational examples for you in this showcase. The plan is to bring out a new one every month, so let us know in the comments if you like what you see.
Augmented reality is generally considered to be very hard to create. However, it’s possible to make visually impressive projects using just open source libraries. In this tutorial we’ll make use of OpenCV in Python to detect circle-shaped objects in a webcam stream and replace them with 3D Earth in Three.js in a browser window while using WebSockets to join this all together.
We want to strictly separate front-end and back-end in order to make it reusable. In a real-world application we could write the front-end in Unity, Unreal Engine or Blender, for example, to make it look really nice. The browser front-end is the easiest to implement and should work on nearly every possible configuration.
Guess what: those tricky mystery riddles are never easy to design. The idea has to be evaluated and brought into life, just to be crushed by painful user tests and then adjusted over and over again until it’s easy enough to solve — but difficult enough to not solve fast.
When we started out with riddles, we wanted to have an entertaining yet challenging game that wouldn’t be easy to crack, and would keep our dear readers busy for quite some time.
Even though hooks in WordPress are amazing and everyone uses them knowingly or unknowingly, I get the impression that some advanced users and especially front-end developers still seem to avoid them. If you feel like you’ve been holding back on hooks, too, then this article will get you started. I am also going to reveal some interesting details to anyone who thinks they are familiar enough with hooks.
You’ll want to read this article especially if you’d like to: understand code snippets with hooks such as those found in forums, extend WordPress, plugins and themes without breaking updates, learn how to avoid common problems, allow others to extend your code.