Sketch 41.1

1. Sketch 51.1
2. Sketch 41.1 Code
3. Sketch 43.1
4. Sketch 41.1 7
5. Sketch 41.1 9

The rise of Sketch as the visual tool of choice for digital designers is undisputable. It's left a lot of products in its wake.

Created with Sketch. Created with Sketch. Created with Sketch. $30 and under. Created with Sketch. Latin American. Top tags: Neighbourhood Gem. Good for a Date. Blue Corn Cafe has been serving the Triangle area for 17 years. We offer a locally sourced twist on Latin American cuisine. ITA 101 is an authentic Italian restaurant that serves a limited, rotating menu with fresh, local ingredients. Chef Kevin Maher and the ITA101 staff invite you to bring your favorite bottle of wine and enjoy gourmet Italian cuisine.

First, a product shoot-out

Axure Preamble

For what seemed like a lifetime for me (1999-2014) I was a hardcore Adobe Photoshop user. I'd tried Fireworks, Flash, and others but never really felt at home. To be honest, Photoshop was always a hack but it became a familiar friend despite being bogged down as a photo tool. No amount of Adobe's tweaking ever moved it away from that.

In 2012 I started to push out Axure work as I was more interested in directing work at a structural level than the visual design elements.

Axure has an obtuse interface that is scary to newcomers and immediately unintuitive. That's a shame as it puts off would-be users. 3d chess game full version.

(compare that to the beauty of Adobe's XD – a ‘Sketch rival').

I've introduced many newcomers to Axure over the last 2 years and some of them have been devout Sketch users. Invariably, they've all come back to me in less than 24 hours saying:

'Hey, I'm really enjoying myself. I'm quite surprised actually. Why haven't I used this before?'

But those euphoric moments are also invariably met within days with:

'OK, so I've got the hang of it, how do I import some of my Sketch assets?'or worse still 'I've done some work that I really like, now how do I export it to Zeplin, or how do I get it into Sketch to polish it?'

At this point, the user tends to fall away and shelf Axure as a great tool for specific jobs e.g. my product owner needs to see this mocked up so they can grasp the concept better, or we need it so we can get more insightful user testing done.

Sadly, Axure is now in a box and stays there.

Axure probably want it to be this way to an extent.

No UI/UX product has ever really nailed all collaborative interactive design requirements. Maybe they never will. By Axure holding onto its ‘rapid interactive prototyping' space, it puts up a wall to others and says 'we're the best at this and we'll keep optimising what we're good at'. I get that! But I also see that as a ‘head in the sand' issue, and eventually, users will stop opening that box that Axure is already in. The key reason for this is the lack of integration with what appears to be a rapidly evolving open market for plugins and platforms in Sketch. Already I can see Sketch users dismissing prototyping as it's so easy to nail really nice finished visuals. But oftentimes they're missing the value of real interaction, pivoting on ideas, and trying to disconnect from visual (sometimes personal) ideals that emerge as an emotional investment.

How does EVOLVR fix the Axure-Sketch gap?

Spoiler: we don't… We have to run 2 streams as seperate disciplines

Sketch 51.1

'We usually work on enterprise grade UX/UI for products and platforms that are subject to continuous improvement or large corporate projects. This tends to mean we are required to work collaboratively, be rationalised, documented, and efficient at scale.'

We've taken a deliberate decision to see the strengths in each tool (Axure and Sketch) and to run streams of work that make the most of the disciplines each tool can exploit and assist. Our approach works best with a paired designer set. Not to say that you couldn't do it all on your own, but we like the tension between two designers challenging each other to refine work holistically.

Axure user:

'I love how your stuff looks, but I've built is and it just doesn't feel right… see here when these panels move about… I lose my place'

Sketch user:

'That interaction is interesting but I think you're getting carried away with the tool rather than seeing the simplicity of this content layout…'

Objectives

Sketch 41.1 Code

In order to reach higher efficiency levels whilst maintaining the quality of our work, we refine our design thinking process in retrospect with every successful project. This has allowed us to evolve a systematic process that both fits into and guides our workflow. It allows us to reach the following objectives in an efficient and timely manner:

1. Rapidly realise interaction ideas (try, pivot, refine)
2. Develop prototypes with ‘apparent' high fidelity to decrease test barriers
3. Demonstrate how a product feels (convey interaction styles, responsiveness) such that stakeholders (often product owners) can live the dream
4. Be developer friendly by the time we shift into dev integration

Sketch 43.1

Our approach

1. Collaborative uncovering of user needs, context, and priorities (see user experience methodology)
2. Red route (MVP) per form-factor
3. IA vs red route use cases i.e. priority
4. Paired designers & design thinkers
5. Split streams of Axure alongside sketch

The missing link

A mystical, yet to be made Sketch to Axure plugin: Skechure

Sketch 41.1 7

There is an obvious market need for a cloud-based asset management platform that places a core focus on bridging the gap between Sketch and Axure. Where sketch-created symbols and the Axure library are published to a combined cloud-based library with git version control. Where each iteration to a component — made either in Sketch or Axure — is automatically converted and updated to all files. A hybrid of Folio and BrandAI for both Mac and Windows.

Closer prototyping competition

If Axure isn't quick with bridging the gap between Sketch and their product, another may take the reigns. With their effortless Sketch importing facilities, Flinto, Principle, Kite Compositor or a completely new prototyping product may begin to take custom maths, adaptive views, dynamic data, variables and conditional logic into consideration. Flexibility among these powerful capabilities are seemingly Axure's only point of difference within the collection of prototyping applications and may be overrun if the vector-based competition catches up to their speed.

Sketch Postscript

From a work process perspective, many experience designers believe that static low-fidelity digital wireframes still often sit at the very beginning when designing a component. I too used to think that design does not start until these wires are done. In later times, I've begun to realise that this model is flawed and outdated. Wireframes are still a necessary part of the design process: but in my design process as a UX and visual designer, they look much different. I call them designframes. A much more seamless process is possible as they allow me to see a component from sketching right through to prototyping.

'The dreaded sign off 'lock down' between the two disciplines does not have to occur — and shouldn't. The user experience should always be in a constant state of flux, easily changed, deleted and recommitted alongside the visual design — to create an optimal flexible breeding ground for innovation in the creative process.'

In the majority of cases, I don't create a divide between wireframes and design. I don't see them as a low-fidelity tool that formalises early stage designs. Sketch has become advanced enough to almost completely remove the need for this step in the process. When I know the product I'm designing for well, I go directly from pen-and-paper basic non-digitised scampy sketching to the first iteration of a Sketch symbol. Why? Because ultimately, some components just won't suit a certain visual style. Being used to the Sketch workflow, I'm able to efficiently work in a triangular position: quick, accurate and high-fidelity and produce an entry-levelblockframe design that prioritises solving baseline user needs, while also incorporating colour, type and style necessities of the brand. By thinking about the type of content, I assume a content area size. In many cases, the component is not standalone: a strong focus on consistency within the entire whole piece must be placed.

Within the first few iterations, I dive straight into convergence: how the component looks. To aid in showcasing an overall perspective to the component, I create Sketch canvases: generically-sized large desktop, medium desktop, tablet and mobile artboards fitted out with other previously-created components. The key questions for this sprint revolve around:

'How does the component compete with other components: what is the user seeing first? Where am I directing hierarchy? What is contrasted? Am I removing hierarchy from other components? What is above the fold, what is below?'

Spoiler: we don't… We have to run 2 streams as seperate disciplines

Sketch 51.1

'We usually work on enterprise grade UX/UI for products and platforms that are subject to continuous improvement or large corporate projects. This tends to mean we are required to work collaboratively, be rationalised, documented, and efficient at scale.'

We've taken a deliberate decision to see the strengths in each tool (Axure and Sketch) and to run streams of work that make the most of the disciplines each tool can exploit and assist. Our approach works best with a paired designer set. Not to say that you couldn't do it all on your own, but we like the tension between two designers challenging each other to refine work holistically.

Axure user:

'I love how your stuff looks, but I've built is and it just doesn't feel right… see here when these panels move about… I lose my place'

Sketch user:

'That interaction is interesting but I think you're getting carried away with the tool rather than seeing the simplicity of this content layout…'

Objectives

Sketch 41.1 Code

In order to reach higher efficiency levels whilst maintaining the quality of our work, we refine our design thinking process in retrospect with every successful project. This has allowed us to evolve a systematic process that both fits into and guides our workflow. It allows us to reach the following objectives in an efficient and timely manner:

1. Rapidly realise interaction ideas (try, pivot, refine)
2. Develop prototypes with ‘apparent' high fidelity to decrease test barriers
3. Demonstrate how a product feels (convey interaction styles, responsiveness) such that stakeholders (often product owners) can live the dream
4. Be developer friendly by the time we shift into dev integration

Sketch 43.1

Our approach

1. Collaborative uncovering of user needs, context, and priorities (see user experience methodology)
2. Red route (MVP) per form-factor
3. IA vs red route use cases i.e. priority
4. Paired designers & design thinkers
5. Split streams of Axure alongside sketch

The missing link

A mystical, yet to be made Sketch to Axure plugin: Skechure

Sketch 41.1 7

There is an obvious market need for a cloud-based asset management platform that places a core focus on bridging the gap between Sketch and Axure. Where sketch-created symbols and the Axure library are published to a combined cloud-based library with git version control. Where each iteration to a component — made either in Sketch or Axure — is automatically converted and updated to all files. A hybrid of Folio and BrandAI for both Mac and Windows.

Closer prototyping competition

If Axure isn't quick with bridging the gap between Sketch and their product, another may take the reigns. With their effortless Sketch importing facilities, Flinto, Principle, Kite Compositor or a completely new prototyping product may begin to take custom maths, adaptive views, dynamic data, variables and conditional logic into consideration. Flexibility among these powerful capabilities are seemingly Axure's only point of difference within the collection of prototyping applications and may be overrun if the vector-based competition catches up to their speed.

Sketch Postscript

From a work process perspective, many experience designers believe that static low-fidelity digital wireframes still often sit at the very beginning when designing a component. I too used to think that design does not start until these wires are done. In later times, I've begun to realise that this model is flawed and outdated. Wireframes are still a necessary part of the design process: but in my design process as a UX and visual designer, they look much different. I call them designframes. A much more seamless process is possible as they allow me to see a component from sketching right through to prototyping.

'The dreaded sign off 'lock down' between the two disciplines does not have to occur — and shouldn't. The user experience should always be in a constant state of flux, easily changed, deleted and recommitted alongside the visual design — to create an optimal flexible breeding ground for innovation in the creative process.'

In the majority of cases, I don't create a divide between wireframes and design. I don't see them as a low-fidelity tool that formalises early stage designs. Sketch has become advanced enough to almost completely remove the need for this step in the process. When I know the product I'm designing for well, I go directly from pen-and-paper basic non-digitised scampy sketching to the first iteration of a Sketch symbol. Why? Because ultimately, some components just won't suit a certain visual style. Being used to the Sketch workflow, I'm able to efficiently work in a triangular position: quick, accurate and high-fidelity and produce an entry-levelblockframe design that prioritises solving baseline user needs, while also incorporating colour, type and style necessities of the brand. By thinking about the type of content, I assume a content area size. In many cases, the component is not standalone: a strong focus on consistency within the entire whole piece must be placed.

Within the first few iterations, I dive straight into convergence: how the component looks. To aid in showcasing an overall perspective to the component, I create Sketch canvases: generically-sized large desktop, medium desktop, tablet and mobile artboards fitted out with other previously-created components. The key questions for this sprint revolve around:

'How does the component compete with other components: what is the user seeing first? Where am I directing hierarchy? What is contrasted? Am I removing hierarchy from other components? What is above the fold, what is below?'

Even if the artifact looks like it's representing the final form, it's still a wire… and should be treated as an iteration in the right direction of the UI structure and layout — but delivered as a more genuine, believably real, accurate and easily understandable, non-intimidating depiction of the final product. It isn't as open to interpretation; minimising confusion or misinterpretation between teammates. They're easier to judge effectively using the 'gut' reaction the component gives.

Once a first iteration is complete and is structurally relevant to the whole, I dive straight into divergent exploration and experimental activities. In this second sprint, my aim is to create a focussed content-first structured set of conceptual models to use as a basis for design-oriented discussion. They're a great conversation starter. As I'm duplicating the first iteration of the design, I know that these component concepts are on the same convergent hierarchical level within the whole piece. Crafting high fidelity is just as quick — but delivers a mental picture that is much more solid. When many component concepts compare against each other it's easier to find which are the most tangible by quickly realising any fundamental flaws or oversights, and minimising over-attachment by making each design less permanent. Instead of just one answer to the problem, there are many.

Sketch 41.1 9

Once the most tangible design has been realised, it's on to prototyping…