How the mockup drives design, not dictate it.
During my time as a Ui designer/developer intern at LemonStand, I was challenged to sketch, design, mockup, and develop a set of 4 themes for eCommerce stores.
LemonStand is a cloud based eCommerce platform for online retailers that are serious about growing their business, and offers web designers a ton of flexibility in design. The biggest challenge in creating these 4 themes was to provide that flexibility.
It takes time to mockup, find ways to shorten it.
In the beginning stages of my process, it came to my attention that mocking up my designs take a hefty amount of time. After reading the article “From Photoshop for Sketch” written by Richard Child, I thought to myself that there is no way another tool can streamline the design process better than Photoshop. I was wrong.
The Typical Process
When I am challenged with a design problem, my typical approach to solve it would be to research, sketch, mockup, design, and finally prototype. Before I discovered Sketch I thought that my workflow was as good as it could get. There were no hiccups, and everything sailed smoothly.
A New Discovery
I had been exposed to Sketch during my time interning at LemonStand, reading articles about it, seeing interesting tweets, and designers falling in love with the software. As a result, for this project I decided to give Sketch a test run. It was like love at first sight.
While playing with Sketch for a couple of hours, I felt at home (aside from my frustration clicking the “v” button a few more times than I should have). The greatest thing for me would be the difference in the way Sketch handles art boards and layers. It’s an absolute gem to work with. The way that Bohemian Coding organized the file structure and toolbars was sleek and intuitive. They understand designers.
Cutting Time
In all honesty, I thought that playing around with Sketch and learning it would take more time than mocking up in Photoshop. To my surprise, even after playing around with Sketch (although I am probably not a guru) and mocking up my designs, it took less time than it would have if I used Photoshop. I didn’t have to worry about multiple files, using Illustrator for icons then transferring, and huge files sizes. All in all, Sketch helped me to design multiple mockups and examine various routes for these themes. It helped me pump out more content for critiques and improvements.
The Result
Whenever I create a mockup, I don’t expect it to follow through with the final design. I feel that the mockup should drive the design, not dictate it. Mockup’s should aid the design process.
As a designer, I love free resources. In order to give back to the community, I created a micro-site explaining my process of using Sketch and the mockup to drive the final design. Also included, are my original Sketch files that you can download yourself to use in your eCommerce designs! Visit SketcheComm.com for the free templates.
How I Feel Today
There are obviously some cons in using Sketch, but in my opinion the pros of Sketch outweigh the pros of Photoshop. Sketch is in its early stages of development and the team behind it are working on some great new improvements in order to streamline the design process. I can recommend this tool for any designer who is working on interfaces. If you are a designer who is not currently using Sketch and cannot leave Photoshop to burn behind you, all I ask is to give it a try. Again, you might be frustrated that the “v” shortcut is not what you want it to be, but I assure that there is more to love than to hate.
Happy Sketching!
