Web Design

Viewing posts from the Web Design category

My thoughts using Sketch

First some background information on myself.

I’m a big adobe creative suite user. I use the adobe suite for all aspects of creating designs for user interface, web, illustrations and print. I was finding that for rapid UI creation and creating screens for projects, illustrator was getting a little bloated. Illustrator is great for general creation but, with specific UI creation (rapid screen design) it’s a little slow. I did a couple of small projects for comparison purposes.

My Approach
My workflow for UI design is typically as follows: Requirements Documents, Balsmaiq, Illustrator and Silverlight (for high fidelity interactive prototypes). Using Sketch I found it simplified the process of by combing aspects of my workflow and being more of a lightweight product. The process for Sketch would be requirements docs, sketch and InVision.

Sketch is the ultimate tool for iOS, Android and Web design. It barely weights 41MB in disk space, compared to Illustrator’s 1.6GB. As soon as you open it, you are greeted with an infinite canvas. No window will ask you about what units to use or what size your canvas should be. Just like native OS X apps, you have a familiar user interface with a Toolbar, Navigator and Inspector. As a result, new users will find Sketch far more approachable because it doesn’t get in the way of producing simple designs.

Designing for Screens
You’re not overwhelmed by a Toolbar where half of the options were intended for photo editing, digital painting and 3D all screens are in pixels only.

There’s nothing wrong with them, but focusing on just user interface design will allow you to be more efficient and less distracted.

UI Templates
Sketch comes preloaded with a number of user interface templates for iOS, Material Design and Responsive Web. To access them for example you simply have to go File >New From Template > iOS UI Design.

A great place to download a unique templates for a specific requirements is:

Working With Text
If you’re new to typography, I suggest heading to the Typography section and start downloading a few modern fonts. The good ones that comes with OS X or free on Google Fonts are San Francisco, Avenir Next, Open Sans and Roboto. If you have a subscription to Typekit, download Museo and Proxima Nova.

Working With Icons
Last but not least, you’ll need in your arsenal a nice library of vector icons. The ones by PixelLove and Streamline will work well for iOS. Sketch is entirely vector-based so you can easily import SVG icons (a universal vector format), and edit them as you see fit. If you’re uncomfortable working with vector paths, you can at least change the color and size to fit your project. To get an introduction to vectors in Sketch, I suggest heading to the section

Working with Pages
Each Page represents a platform or a completely different resolution. For most projects, you’ll have twenty something Artboards for a platform like iOS. Then, you’d create another Page for Android, Web, Apple Watch, tvOS, etc. That way, you can have an entire project within a single Sketch file, saving you a ton of time switching between screens and platforms.

Working Symbols
I found this to be very powerful if not the most powerful feature. When I downloaded a bootstrap template it had all the buttons and states already in a library, before I would have to recreate this and now they are already available. This reminds me of coding the same feature is HTML CSS e.g. calling a particular class. Symbols work much the same way, I could call in the design with the appropriate state already based on the design requirement. Symbols makes it easy to share the same elements across multiple Artboards. This is especially useful when you re-use the same elements multiple times like for Status Bar, Navigation bar or Tab Bar. You won’t need to go back and edit those elements one by one. As you update one, it’ll synchronize to all the other ones that share the same Symbol.

Quick Export to Multiple Resolutions
Perhaps my favorite new feature is the ability to easily export at multiple screen resolutions. By using Make Exportable in the bottom right of the screen, you can export at any scale (1x, 2x, 3x) and 6 file formats (JPG, PNG, SVG, PDF, TIFF and EPS). PDF in particular is useful for iOS assets, and SVG is a fantastic format for the Web. For many users, this is what makes Sketch shine from the other apps.
Click Make Exportable to set up your slices. By default, it’ll set the scale at 1x, but click again and you’ll quickly get 2x, then 3x. You can also set the scale to a width (w) or height (h). For instance, if you wish your asset to export at maximum 800 px wide, set 800w.

Using Sketch and InVision
Sketch feels more like an open source product than illustrator. When combined with Invision a user can easily add interactive designs that come to life. Previously, a designer would have to design the screens before in illustrator than re-create them in another fashion like HTML, silverlight, PDFs etc to simulate some sort of interactivity. With Invision using the Craft plugin a designer can combine a couple of these steps and as a bonus can create interactive prototypes on a variety of platforms iOS, Android and iPad. The bonus of using InVision is the collaboration aspect, clients are able to draw on the prototype and individual screens which is much faster than sending emails back and fourth.

Web and App Design Trends for 2017

Some top predictions on what will be web and app design trends for 2017. It’s hard to predict. So let’s see what top industry experts are saying.

Adham Dannaway, UX/UI Designer & Front-end Developer

Adham is half UX/UI Designer, half Front-end Developer, 100% interface jedi. His work has been featured on Smashing Magazine, Web Designer Magazine and Awwwards

Style Guides and UI Patterns:

Adham believes in more of a focus on UI pattern libraries and style guides. Making user experiences more consistent, practical and usable. Designers will become more involved in strategy rather than visuals.

Prototyping Tools:

More demand for prototyping and interaction design tools.

Virtual Reality and Augmented Reality (AR) Opportunites:

We are at the start of Virtual Reality (VR) and Augmented Reality industry. This will create new opportunities for UI and Product designers.

Nir Eyal, Author of “Hooked: How to Build Habit-Forming Products“

Conversational UIs:

Nor believes that computer software will become more natural like in the way it interacts with a user. Currently, There are a wave of startups that promises to radically simplify our lives by making it harder to determine whether we’re communicating with a person or computer code.

Adi Mazor Kario, UX Architect and Founder of Wizard UI Consulting

Natural User Interfaces and Bot Interfaces:

She believes the industry will see more social collaboration & shared economy applications. Users trust strangers more and this will lead to new services and applications (mainly mobile apps that could add location-based options)

Mobile features added to web interfaces:

Adi believe that the trend for web interfaces with more mobile features, and look-n-feel, will grow.

James Archer, VP of Sales & Marketing at Crowd Favorite & UX Expert

James is an expert and design, content and marketing in the digital space, frequent conference speaker and part-time fiction writer

Death of the hamburger menu!:

By now it’s been pretty well established that the hamburger menu doesn’t work, but we’re still waiting for app and responsive web designs to catch up. As the year goes on, we’ll start to see the hamburgers being methodically replaced with tab bars, Priority+ menus, and other alternative forms of navigation.

Device-appropriate design:

Designers seem to keep getting mobile-first wrong by leaving desktop experiences feeling weak and incomplete, and users are feeling the pain. Next year will see a renewed interest in designing not primarily for mobile at the expense of desktop, but rather in creating experiences appropriate to whatever device they’re used on.

Tighter design/developer relationships:

As interface technology continues to advance, the static mockups of yesteryear become increasingly obsolete, requiring a renewed focus on tight collaboration between designers and developers. Neither one can get very far without the other, but together they can change the world.

Joanna Ngai, UX Designer at Microsoft

Joanna released her first book, ‘UX for Beginners: A practical handbook on the space of user experience design and strategy‘, on Kindle this year

Mobile first / Mobile only markets:

Millions of consumers have leapfrogged the PC era altogether, joining the connected world in earnest through their mobile phones. Product designs should be reimagined for a mobile environment, not just adapted to fit a small screen.

Special thanks to

Justinmind: Prototyping tool for web and mobile apps