Category: UI Design

With such an abundance of free Photoshop tutorials online many UI designers tend to ignore the benefits of Adobe Illustrator. Vector workflow is one of the best methods for creating full-scale website mockups, icons, mobile apps, and really anything related to interface design.

Each of the following tutorials focuses directly on interface design from the perspective of vector shapes. With practice and repetition you’ll be able to master Adobe Illustrator and outperform yourself in just a few months’ time. Check out these examples and see which ones catch your attention. Remember that progress occurs over time so you’ll always want to push yourself into new areas whenever possible.

Weather App Design for iOS

ios iphone app weather illustrator tutorial

eCommerce websites are some of the most complicated and time-intensive projects. Each design requires many page styles like the products listing, single product page, user profile, and naturally the shopping cart. Adding onto the project is a concern of security, and just building a single eCommerce site can be quite draining and very stressful. But when you approach the whole design from a user experience perspective ideas tend to make a little more sense.

I’ve put together a few guidelines and free resources for enhanced checkout forms. These should prove useful on any website including responsive layouts. Checkout pages are certainly detailed but not overwhelming. Once you learn how to organize content the presentation becomes like second nature. Regular checkout forms work – enhanced checkout forms work even better.

It should come as no surprise that people love to pass the time in waiting rooms by fiddling on their smartphones. These little devices have become a technological gateway to a library of applications and a sprawling metropolis of websites. This means a whole lot of people are visiting websites on the smallest screen imaginable – and it’s a touch-only screen to boot.

tappable iphone safari mobile app website layout

As more people are latching onto touchscreens web designers need to craft new solutions for mobile Internet browsing. In this post I want to cover a few guidelines for helpful touch-based web design trends. The design process will always be improving as designers innovate with new concepts and UI techniques. But starting with the fundamentals will make touchable web design more approachable and easier to accomplish.

Most designers would agree that it’s crucial to understand the purpose of navigation. Understanding what a typical visitor is looking for can influence the design itself. But you also need to construct layouts in an easy-to-use fashion that serves a greater purpose.

website wireframe sketch user interface vimeo video page

The ‘flat‘ design style is one we hear about everywhere now, and I believe it’s here to stay. I don’t see flat design as something trendy or flavor-of-the-month – rather it’s what design should be; focussing on how things work rather than how things look, keeping things clean and minimalist.

So, we decided to create our very own UI kit, it’s called FlatPix and it is available to purchase exclusively through the DesignM.ag network.

FlatPix UI Kit