Tag Archives: prototyping

Prototyping An App’s Design From Photoshop To Adobe XD

(This is a sponsored article.) Designing mobile apps means going through different stages: pre-planning, visual concepts, designing, prototyping, development. After defining your project, you need to test how it will work before you begin to develop it.

This stage is captured by prototyping. Prototyping allows designers to get a feel for the functionality and flow of an app, and to preview screens and interactions. Testing with prototypes provides valuable insights into user behavior and can be used to validate the interaction model. It is possible to represent the interactivity of an app before its development, and this gives developers a global vision of an app’s functioning, user behavior and steps to afford.

Prototyping is the simulation of the final result of an app’s development. Through this step, it’s possible to show a workflow of an app and consider problems and solutions. The two fundamental roles who will work in this phase are the user interface (UI) designer, who creates the look and feel, and the user experience (UX) designer, who creates the interaction structure between elements.

There are many ways to design and create an app’s look. As a loving user of Adobe products, I work most of the time in Illustrator and Photoshop. Illustrator helps me when I create and draw UI elements, which I can simply save and use later with Adobe XD. The process is the same as I’ve done for icons and that I showed you in my previous article “Designing for User Interfaces: Icons as Visual Elements for Screen Design.”

Photoshop comes in handy when I have to work with images in UI. But that’s not all: With the latest Adobe XD release, we can bring Photoshop design files into XD very quickly, and continue prototyping our app.

Today, I’ll offer a tutorial in which we discover how to transfer our app’s design from Photoshop to XD, continuing to work on it and having fun while prototyping. Please note that I’ve used images from Pexels.com in order to provide examples for this article.

We will cover the following steps:

  1. Simple hand sketch,
  2. Designing In Photoshop,
  3. Importing PSD files to XD,
  4. Developing a prototype,
  5. Tips.

For Adobe tools, I will use Photoshop CC, Illustrator CC and XD CC — all in the 2018 versions.

Let’s get started!

1. Simple Hand Sketch

Before we start designing our app, we need a plan for how to go about it. There are some questions we have to answer:

  • What is the app for?
  • What problem does it solve?
  • How easy is it to use?

Let’s assume we want to create an app for recipes. We want something simple: a space for pictures with ingredients and recipes.

I sketched by hand what I have in mind :



Then, I grabbed Photoshop and created my layouts.

2. Designing In Photoshop

Before we create layouts for our app, we can take advantage of a very useful resource by Adobe: free UI design resources. Because we will be designing an iOS app, I downloaded the iOS interface for Photoshop.

Feel free to experiment with the layouts you’ve downloaded.

In Photoshop, I created a new blank document from a preset for the iPhone 6 Plus:



Below is our layout, as I designed it in Photoshop. I tried to reproduce what I drew by hand earlier.









The PSD file contains four artboards. Each has its own layers.

Note: The images used in this prototype are from Pexels.com.

Let’s see how to import this PSD file into Adobe XD.

3. Importing PSD Files To Adobe XD

Let’s run Adobe XD and click on “Open.” Select our PSD file, and click “Open.”



Ta-dah! In a few seconds, you’ll see all of your PSD elements open in XD.



More importantly, all of the elements you just imported will be organized exactly as they were in Photoshop. You can see your artboards on the left:



When you select an artboard, you will see its layers on the left — exactly the way it was in Photoshop before exporting.



Let’s do something in XD to improve our layout.

Go to Artboard 3. In this artboard, I want to add some more images. I just created three spaces in Photoshop to get an idea of what I want. Now, I can add more with some very simple steps.

First, delete the second and third image. From the first rectangle, delete the image, too, by double-clicking on it. You’ll have just one rectangle.



With this rectangle selected, go to “Repeat Grid” on the right and click it. Then, grab the handle and pull it downward. The grid will replicate your rectangle, inserting as many as you want. Create six rectangles, and adjust your artboard’s height by double-clicking on it and pulling its handle downwards.





Now, select all of the images you want to put in rectangles, and drag them all together onto the grid you just created:

Et voilà! All of your pictures are in place.

Now that all of the layouts are ready, let’s play with prototyping!

4. Developing A Prototype

Let’s begin the fun part!

We have to create interactions between our artboards and elements. Click on “Prototype” in the top left, as shown in the image below.



Click on the “Start here” button. When the little blue arrow appears, click and drag it to the second artboard. We are connecting these two artboards and creating interaction by clicking the intro button. Then, you can decide which kind of interaction to use (slide, fading, time, etc.).

See how I’ve set it in the image below:



Scrolling tip: Before viewing our prototype preview, we need to do another important thing. We have to make our artboards scrollable, giving them the same effect as when pushing a screen up and down with a finger on the phone.

Let’s go back a step and click on “Design” in the top left. Check which artboards are higher — in this case, the third and fourth. Select the third artboard from the left, and you’ll see the section “Scrolling” on the right. Set it to “Vertical.”

Then, you’ll see that your “Viewport Height” is set to a number, higher than the original artboard’s size. That’s normal, because we made it higher by adding some elements. But to make our artboard scrollable, we need to set that value to the original artboard’s size — in this case, 2208 pixels, the height of the iPhone 6 Plus, which we set in Photoshop and then imported to XD.

After setting that, you’ll see a dotted line where your artboard ends. That means it is now scrollable.



To see our first interactions in action, click on “Prototype” in the top left, and then click the little arrow in the top right. See them in action below:

Let’s finish up by connecting all of our artboards, as we’ve seen before, and check our final prototype. Don’t forget to connect them “back” to the previous artboard when clicking on the little arrow to go back:



And here is the final demo:

In this tutorial, you have learned:

  • that you can design your app in Photoshop,
  • how you can bring it into Adobe XD,
  • how to create a simple prototype.

Tips

  • Decide on one primary action per screen, and highlight its containing element through visual design (e.g. a big CTA).
  • White space is very important on small screens. It prevents confusion and gives the user more clickable space. And here comes that rule again: One primary action works well with more white space.
  • If you are not on a desktop, avoid all unnecessary elements.
  • Always test your prototypes with regular users. They will help you to understand whether the flow is easy to follow.

This article is part of a UX design series sponsored by Adobe. Adobe XD is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype, and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

Smashing Editorial
(ra, al, il)

Source article:

Prototyping An App’s Design From Photoshop To Adobe XD

Prototype And Code: Creating A Custom Pull-To-Refresh Gesture Animation

Pull-to-refresh is one of the most popular gestures in mobile applications right now. It’s easy to use, natural and so intuitive that it is hard to imagine refreshing a page without it. In 2010, Loren Brichter created Tweetie, one of numerous Twitter applications. Diving into the pool of similar applications, you won’t see much difference among them; but Loren’s Tweetie stood out then.

Prototype And Code: Creating A Custom Pull-To-Refresh Gesture Animation

It was one simple animation that changed the game — pull-to-refresh, an absolute innovation for the time. No wonder Twitter didn’t hesitate to buy Tweetie and hire Loren Brichter. Wise choice! As time went on, more and more developers integrated this gesture into their applications, and finally, Apple itself brought pull-to-refresh to its system application Mail, to the joy of people who value usability.

The post Prototype And Code: Creating A Custom Pull-To-Refresh Gesture Animation appeared first on Smashing Magazine.

Original article:

Prototype And Code: Creating A Custom Pull-To-Refresh Gesture Animation

Choosing The Right Prototyping Tool

When it comes to creating prototypes, so many tools and methods are out there that choosing one is no easy task. Which one is the best? Spoiler alert: There is no “best” because it all depends on what you need at the moment! Here I’ll share some insight into what to consider when you need to pick up a prototyping solution.

Choosing The Right Prototyping Tool

I’ve always wanted to stay up to date on the latest design and prototyping tools, testing them shortly after they launch, just to see if any of them might improve my workflow and enable me to achieve better results. In the beginning, a few years ago, I think it was easier than it is now to decide whether a new tool was useful. Nowadays, apps are being released every day, and it’s kind of difficult to give them all a proper try.

The post Choosing The Right Prototyping Tool appeared first on Smashing Magazine.

Read the article: 

Choosing The Right Prototyping Tool

How We Use Prototyping, And How It Made Us More Efficient

Prototyping is essential to help your team create the best product possible. It’s a chance to experiment with ideas and turn them into something tangible that you can test and build upon. When you fail with your prototype, you land softly — there’s always the chance to iterate and improve.
The team behind Adobe’s new prototyping tool Experience Design (Adobe XD) uses prototyping as a method to test new features before they make it into the program.

See the original post: 

How We Use Prototyping, And How It Made Us More Efficient

Design Mock-Ups Need Dynamic Content: Tools And Plugins

Nothing is perfect on the web. We can’t make sure that our websites always work as intended, but we can try our best to design resilient and flexible websites that aren’t that easy to break — both in terms of interface design and security. Yet still neither resilience nor flexibility are usually reflected in deliverables and mock-ups.
Designing Using Data, in which Sarah Parmenter discusses how to design with content structure alone.

More:  

Design Mock-Ups Need Dynamic Content: Tools And Plugins

Rapid Front-End Prototyping With WordPress

Prototyping is one of the best things that can happen within a project, yet it is extremely underutilized. Prototyping makes a project better suited to users, elevates user experience, increases the quality of your final code, and keeps clients happy.

The problem is that developers often see prototyping as a waste of time, since high-quality prototypes take considerable effort to make. I want to show you that by using WordPress, highly interactive prototypes with great visuals are not at all that difficult to make.

Rapid Front-end Prototyping With WordPress1
(Image credit: Jeff Sheldon via Unsplash2) (View large version3)

First, we’ll look at some basic prototyping concepts, then set up a test server from scratch. We’ll continue by converting an HTML template to a WordPress theme and learning how to use its items to create what we need. We’ll also learn how to add front-end and server-side functionality to our prototype.

While all this seems complex, beginners should be able to follow along easily, including the “create your own server” section, which is a cinch!

About Prototyping

“[A] prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from.”

Wikipedia4

This sentence neatly sums up the pros and cons of a prototype. The advantage of creating a prototype is that it lets you test an idea and learn from the process. It allows you to make a reasonable assumption about the feasability of your project before you put in hundreds of hours of work.

One of the downsides is that prototypes are made so that we may learn from them. Often, designers and coders look on this as wasted time. Why make a protoype when we could be working on the real thing? Who is going to pay us for the time we spend prototyping?

To be honest, these are tricky questions. For smaller projects, no one will pay you for it, but your project will be better for it; this, in turn, leads to bigger and better projects. In most cases, the time you spend prototyping is regained while building the product anyway!

It also appears that designers like to prototype a lot more than developers. The root of the issue here is speed. A designer could prototype a design a lot faster than a developer, since the latter needs to build a quick framework, implement a design and do a lot of fiddly things which take time.

Fidelity And Functionality

We can approach prototypes by looking at two key features: fidelity and functionality. Fidelity refers to how detailed the prototype is visually, while functionality refers to the level of interaction possible within the system. Let’s look at how levels of fidelity and functionality in prototypes pair up.

Low-Functionality, Low-Fidelity

These prototypes are easy to make. They could be simple drawings, or Balsamiq mock-ups5. There is minimal interaction — or none at all — and visually the prototype has very little to do with the final product.

A Balsamiq mock-up of Facebook6
A Balsamiq mock-up of Facebook. (Image credit: Frontify7)(View large version8)

Low-Functionality, High-Fidelity

Increasing the fidelity while keeping functionality low is also quite common. A good example would be a Photoshop design file which could contain final design elements. Again, there is next to no interaction here but plenty of visual detail, enough to put it close to the final product in terms of design.

A high-quality PSD mock-up of notifications9
A high-quality PSD mock-up of notifications. (Image credit: Pixeden10)(View large version11)

High-Functionality, Low-Fidelity

These prototypes are a bit more difficult but you can still make them without too much effort. Before you create the login/forgot password form for a large website, you might want to test if everything works by just dropping in a form and business logic strictly in HTML and PHP — no CSS, JavaScript or consideration of the context of the form.

Twitter without any CSS12
Twitter without any CSS. (View large version13)

Using front-end frameworks like Bootstrap14 or Foundation15 can can increase your fidelity somewhat, but you’d need to write a good amount of CSS to make it your own.

A medium fidelity mock-up16
A medium fidelity mock-up. (Image credit: Bootstrap17)(View large version18)

I would still consider these low-fidelity mock-ups because each front-end framework looks generic by default. That’s fine for testing the principle, but it doesn’t increase fidelity to a point where more sensitive clients would be able to visualize what the final product will be like.

High-Functionality, High-Fidelity

Prototypes like this are rarely seen because creating them can take more time than is worth it. Why create something so similar to the website-to-be when you could be working on the actual site?

High-functionality, high-fidelity prototypes contain a high degree of interactivity while also being a much closer facsimile of the final product. Users can follow links, submit forms and do many other things that help them see what the end result will be like.

The real trick is managing the time spent on making such prototypes — which is where WordPress comes in.

Which One To Use

There is, of course, no simple answer to this question. A high-fidelity, high-functionality prototype is closest to the real thing, but it takes time to make; for simpler projects, it may not be worth the time.

Low-fidelity, low-functionality prototypes are simplistic and cannot be interacted with, but for small projects and close-knit teams, perhaps they’re all that is needed.

Several factors need to be considered:

  • How well your team works together
  • How large your project is
  • How visually and technically oriented your client is
  • How well you understand the product you are building
  • How many people will be involved other than programmers and designers

In my experience, the most important factors are the client and the project’s complexity. Even if I understand the project well, I would like a high-fidelity, high-functionality prototype just in case. One of the fundamental mistakes you can make in projects is thinking you know them well.

For complex, large-scale projects you should always create prototypes with a high degree of freedom. The more systems and subsystems you need to build, the more intertwined they become and the more places things can go wrong.

The client can be an even bigger factor. Often, clients do not know what they want. They may not be design- or code-oriented, which means they will equate a low-fidelity prototype with bad design and missing features — even if you tell them what the prototype is for. As a result, a clearer visual aid is sometimes called for to enhance communication.

Since I will be talking about high-fidelity and high-functionality prototypes from now on, I will be calling them high-quality prototypes. This is not at all a reflection on other prototypes; a low-fideltiy, low-functionality prototype can also be created with high quality.

Considerations For High-Quality Prototypes

There are a number of considerations when making high-quality prototypes. What platform they should be built on, what functions need to be added (or not added), how intricate should we make the design, and so on.

The Platform

The platform chosen should be one which allows you to work fast and quickly add features as well. Bootstrap, Foundation and other frameworks are great, but they offer very little functionality, since they are purely front-end. Using them can still be a good idea, but not on their own.

On the other side of the spectrum, we have PHP frameworks like Laravel, which is excellent for creating high-quality modular code. This is out of the question, though, since we have to write too much business logic ourselves just to get a site up and running.

WordPress strikes a good balance here because it is essentially a bag of useful functions combined with a reasonably flexible way to template pages quickly. I want to stress that you should use a platform you feel comfortable with. If you’re amazing at using Laravel, by all means go with it.

The Design

You can create a simple design framework for yourself, but that also takes quite some time. This is the place to use front-end frameworks to lighten your workload.

What I recommend is getting a good pre-made HTML admin template. Many of these templates use Bootstrap or Foundation anyway, and put a bunch of elements at your fingertips. In addition, they’ve already styled the elements of their frameworks into something less generic, which is just what we need. With a little work they can be converted to WordPress themes and will facilitate extremely quick prototyping.

I don’t use bespoke WordPress themes because they are for presenting content, not creating application architecture. You won’t be able to create a menu or a form anywhere easily, and your code will likely be a mess by the end.

Depth Of Functionality

Depth of functionality is all about interactivity. Since you have control over a CMS you can, in theory, make things work properly — login forms could genuinely log you in. You probably don’t want to spend your time coding in all the functionality. That isn’t really the point here.

For example, is the login form really important? Everyone knows how logging in works. Perhaps the form can be allowed to be blank, and the login button logs you in immediately as a test user.

If you are building a finance management app, however, you may want to spend some time making sure that the “Add transaction” form works as expected. Real data can be listed and submitted adding a great deal of depth to your prototype.

Prototyping With WordPress

I think WordPress is a great choice for prototyping because of the flexibility of templating and the number of functions you have at your disposal. Logging in and out, adding metadata, querying items — a lot of base functionality is already there.

I like to choose a pre-made HTML admin theme that looks close to what we’ll be doing in the final iteration of the design. You can find a large number of premium admin themes on Themeforest19 but you can also grab some good free ones via a quick Google search. For my examples I will be using a free admin theme called AdminLTE20.

When choosing an admin theme try to gauge what features you will need. Concentrate on the rapid aspect of prototyping, not making sure that your prototype looks like the final design.

A Complete Example

When I started this article, I wanted to provide a complete example of how I use WordPress to prototype. I ended up recording a video of the process and writing about it in a bit more detail. The video below will walk you through my process of creating a prototype of the Twitter front page.

Following the video I’ll go into even more detail, giving you some instruction about setting up test servers, using the WordPress menu system to populate menus, and much more. I recommend watching the video first, and then looking at the details below, as they will be a lot clearer.

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2015/06/01-featured-opt.jpg
  2. 2 https://unsplash.com/ugmonk
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2015/06/01-featured-opt.jpg
  4. 4 https://en.wikipedia.org/wiki/Prototype
  5. 5 ‘https://balsamiq.com/products/mockups/’
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2015/06/02-balsamiq-facebook-opt.png
  7. 7 https://frontify.com/blog/discuss-specify-balsamiq-mockups/
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2015/06/02-balsamiq-facebook-opt.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2015/06/03-notifications-psd-opt.jpg
  10. 10 http://www.pixeden.com/psd-web-elements/psd-notification-ui-box/
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2015/06/03-notifications-psd-opt.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2015/06/04-twitter-opt.png
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2015/06/04-twitter-opt.png
  14. 14 ‘http://getbootstrap.com/’
  15. 15 ‘http://foundation.zurb.com/’
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2015/06/05-bootstrap-opt.png
  17. 17 http://getbootstrap.com/examples/jumbotron-narrow/
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2015/06/05-bootstrap-opt.png
  19. 19 ‘http://themeforest.net’
  20. 20 http://shapebootstrap.net/item/adminlte-dashboard-and-control-panel/

The post Rapid Front-End Prototyping With WordPress appeared first on Smashing Magazine.

More: 

Rapid Front-End Prototyping With WordPress

Using Sketch For Responsive Web Design (A Case Study)

If you’re a member of the web or UI design community, it’s been hard to avoid talking about Sketch1 over the last year. The launch of this design app shook up an industry dominated by Adobe for more than two decades, and it has caused an ongoing debate about whether Sketch is better than Photoshop and Illustrator (and Fireworks2).

A longtime Photoshop user myself, I made the switch to Sketch in early 2014 and haven’t looked back. I love certain features of the program, such as the simple interface, file autosave and infinite canvas. However, plenty of other programs out there have similar features, and until the most recent update (Sketch 3.2), users were battling a lot of bugs in the app.

So, why do I continue to use Sketch? Bugs or no bugs, it has become the best tool for UI design, including responsive web design.

Case Study: Fleet Feet Sports

Let’s look at a newly launched website design that I worked on for Fleet Feet3, a running store with over 80 franchises across the United States. Unlike its old website, the new Fleet Feet has an ecommerce component to sell products online, and it’s responsive. With more than 15 templates to design for multiple devices and several rounds of revisions, this project was huge.

In Photoshop, staying organized amongst all of the documents and rounds of revisions would have been daunting and time-consuming. However, with Sketch’s tools, I was able to work through this project from start to finish more smoothly, easily and quickly than I could have done using another program. Let’s look at how creating a website in Sketch vastly improves the responsive design process.

A Look At The Basics

Firing up Sketch, you’ll immediately notice a clean, unbloated interface. Yes, Sketch’s toolset is certainly pared down compared to some other design programs. However, it includes only what can be recreated with HTML and CSS3. So, there are no unnecessary photo filters, 3D tools or other tools that would slow you down. The app provides only what’s necessary to do web and UI work, making for a much faster design process.

And what Sketch lacks, its plugins4 make up for. Sketch plugins are akin to Photoshop’s and cover everything from a simple tool that swaps the border and fill color to complete content generators. I waited several months to start using plugins myself because I wanted to be completely comfortable with the program. Big mistake — many of these plugins are huge time-savers and have become integral parts of my workflow.

The first thing I recommend downloading when starting in Sketch is Sketch Toolbox5. This plugin manager allows you to directly browse and install plugins and to keep track of what you’re using.

Sketch Toolbox6
Sketch Toolbox. (View large version7)

The second basic thing to note is that everything you create in Sketch is vector. In the age of responsive design, creating a design in vectors is key. Designers constantly have to think about high-definition versus normal-definition displays, narrow versus wide screens and so on. Building designs that rescale for all of these formats is essential, yet creating a separate mockup for each size is tedious and time-consuming. Sketch’s ability to freely resize objects saves time and energy.

What sets Sketch apart from other vector-based programs is that it’s also pixel-aware. The shapes you draw always snap to the nearest pixel, meaning you no longer have to worry about half-pixels or blurry lines. This makes the program ideal for screen design.

Getting Started

Now, let’s walk through how I used Sketch to design Fleet Feet’s new website. In the age of responsive design, being able to hop directly into designing a mockup is pretty rare.

Because Fleet Feet would be adding new components to its website, first came the content strategy. I sat in on several meetings early on to discuss how the new website would be laid out. I like to use a handy Sketch plugin called AEFlowchart8 to create site trees for the websites I work on. For Fleet Feet in particular, it was useful for keeping track of the website’s new organization and for having something I could compare with my team. This was such a helpful reference aid in the design process, and I never would have spent the time creating it in another program simply because it would have been too time-consuming.

AEFlowchart plugin in action9
AEFlowchart plugin in action. (View large version10)

Sketch also makes moodboards simpler to create and a better project resource. First up, note that all of your files can live in one document. Sketch contains a page drawer in the artboard sidebar that allows you to quickly scroll between files. For large projects like this one, it was particularly nice to be able to quickly jump back and forth between the site tree, my moodboard and my mockups as I designed or made changes.

Let’s walk through an early version of one of Fleet Feet’s style tiles11 (of which a handy Sketch template12 is already available to download). Being able to create typographic elements is very useful because you can create text styles for inline styles such as headings and block quotes and then apply those styles later to text in other documents. If your client decides that they hate the h1’s font family later on in the design process, all you have to do is update one instance of the style and it will update every instance in your project’s files. The app also uses native text rendering (anti-aliasing) so that text appears in the browser exactly how it appears in the design file — no more wondering if the lightweight version of the typeface you chose for headings will be readable on screen.

Text styles in Sketch app13
Text styles in Sketch app. (View large version14)

Color management is also simplified with Sketch. Create the color palette in your moodboard, and the most common colors will be pulled out above all swatches for quick use later in the design process. In addition to common colors, the 3.1 update allows you to add custom colors to your document swatches (and according to 3.3’s beta notes, custom color palettes are coming soon).

Finally, just as you can scroll through each of your files in one document, you can also copy and paste objects and object styles (such as gradients and color fills) from one file into another. This feature has been impossible in Photoshop, but it’s very useful. Being able to copy and paste elements from a moodboard to your first mockup, and even objects from one mockup to the next, is great.

Designing The Home Page

Now that you’ve seen how to create some basic styles in a document, let’s look at how I created some of the elements on the home page.

Fleet Feet’s home page15
Fleet Feet’s home page. (View large version16)

One of my favorite features of Sketch is the built-in layout grid. In Photoshop, I’d have to rely on a plugin, a series of guidelines or separate layers with a makeshift grid that wouldn’t be easily editable. In Sketch, you can easily toggle a transparent layout guide and quickly change the column and gutter sizes. To edit the layout grid, go to “View” → “Layout Settings.” I’ve created a default 1080-pixel, 12-column grid with 30-pixel gutters, which I just change from project to project as needed. Whenever I want to see the grid or turn it off, I simply hit Control + L.

Working with grids in Sketch: easy!17
Working with grids in Sketch: easy! (View large version18)

As mentioned, anything possible in CSS is possible in Sketch. Creating rounded corners on an action button is as simple as clicking the object and adjusting the radius in the sidebar. Gradient overlays on images take just one click to add, don’t depend only on the colors in the swatches, and render faithfully to what a browser would show.

While the CSS3 tools are nifty, several other design programs out there have these same tools. Sketch takes it one step further by enabling designers to copy accurate CSS styles for these elements. Just right-click any object to copy the styles, including the layer’s name as a comment above the code. This makes for a more seamless experience between design and development.

In addition to creating and copying CSS styles, designing duplicated content is easier, too. Sketch allows you to turn a group of objects into a symbol that can be copied and repeated, and any changes to that object are automatically synced to all instances!

Look at the blog posts at the bottom of Feel Feet’s home page. Because there are only three, making changes to all of them wouldn’t be a huge deal, but it would still be tedious. Using symbols, we can play around with the sizes of the images, text and colors for all three at the same time, making life a little easier. Symbols even work between templates, so if we decide to use the same layout on the page listing blog posts, all we have to do is copy an instance of the symbol there, and the changes will sync between all of them. When you’re ready to add in real content, like a post image or a headline, all you have to do is right-click and detach the object from its original symbol.

Symbols can simplify your workflow and save you time19
Symbols can simplify your workflow and save you time. (View large version20)

While I do use symbols for things like blog posts and product listings, I like to use the Dynamic Button21 plugin for buttons on the page. The plugin essentially creates a symbol for your button, but automatically adjusts the padding on the sides according to the length of the text. It’s a great time-saver with pages that have several buttons, such as this home page. Simply create a text layer with your initial button text, select the plugin, edit the layer’s name to reflect the padding of your button’s background (for example 10:20:10:20), hit Command + J and ta-da! You’ve now got a dynamic button that you can repeat consistently throughout the design just by editing the button’s text.

Dynamic buttons in Sketch22
Dynamic buttons in Sketch. (View large version23)

Creating A Product And Team Listing Page

I touched briefly on how helpful symbols can be on the home page, but what about with pages with a lot of repeated content, like product and team listing pages? While using a symbol to create an individual item in a listing would be helpful, content will eventually need to be added to all of these objects in order to look realistic to the client.

Adding content to 20+ items in a mockup would be a huge pain. Additionally, clients rarely have content ready before the design is approved. Thankfully, Sketch has several plugins to generate content automatically in a design.

For something like a product listing page, we don’t want to spend a lot of time searching for shoe images with white backgrounds prior to the first round of revisions; instead, we just need a placeholder image. The Day Player24 plugin is a great resource that fills in placeholders from various image services. I like Placehold.it25 because that’s what the developers who I work with use, and I use Lorem Pixel26 to get specific images. Select the plugin and the image service you’d like to use, edit the options for your placeholder such as dimensions and color, and insert it in the product object group. That’s much easier than searching for images on Google to use as placeholders!

The Day Player plugin in action27
The Day Player plugin in action. (View large version28)

For mockups that need significantly more filler content, I like the Content Generator29 plugin. The team listing page, for instance, needed a male or female image, a name, a title and some contact information. Using the plugin, all I had to do was select the image placeholder boxes for each of the team members, go to the plugin options and choose between a male and female avatar. Filling in a name, along with an email address and phone number was also just as simple.

Sketch’s features aren’t just useful for mockups with repeated content, but for standard web pages as well. Let’s say we need to add some text to the bottom of the team page, where there’s a bit of text explaining careers with Fleet Feet. For placeholder text, we can again use the handy Content Generator30 plugin to fill in lorem ipsum text, completely eliminating the need to find an online service to generate the same thing. Also, did you notice the bullet points in the text? Another great feature of Sketch is the built-in generation of numbered and bulleted lists — a feature that has always been lacking in other design programs (including the almighty Photoshop and the screen design-oriented Fireworks) and painstakingly tedious to achieve. Being able to format text exactly how it will appear in the browser is great, and Sketch helps you do it!

Bulleted lists in Sketch? Easy!31
Bulleted lists in Sketch? Easy! (View large version32)

Designing Mobile And Tablet Mockups

I’ve touched on how to create several elements for a standard web page. Now, let’s get into the nitty gritty of why Sketch is so great for responsive web design.

One of my favorite features of Sketch is the support for multiple artboards on one canvas. Photoshop forces you to create multiple PSD files and then switch between windows to work on various mockups. This process was such a hassle that I would create mobile and tablet mockups only for big-budget projects.

In Sketch, you can see desktop, tablet and mobile mockups all in one view, allowing you to work on the mockups simultaneously. For Fleet Feet in particular, multiple artboards proved to be especially helpful because of the sheer number of templates. When editing symbols, text styles and colors, I could see how changes affected all of the mockups at once. Seeing this also helps the designer to remain conscious of content flow and interactions going from desktop to mobile.

Multiple artboads in Sketch allow you to work easily on desktop, tablet and mobile mockups at the same time33
Multiple artboads in Sketch allow you to work easily on desktop, tablet and mobile mockups at the same time. (View large version34)

Creating these multiple artboards is also easy in Sketch. Simply press A to create an artboard, and Sketch will present a list suggesting 28 common screen and icon sizes to select from, including “Retina” sizes. This is particularly helpful in responsive design because you don’t have to worry about getting the dimensions right when creating mockups.

Another neat feature of Sketch is that you can preview designs on the device they are meant to be viewed on. Although not technically a built-in feature, the Sketch Mirror35 app syncs with your open document and allows you to see how your design would look on an iPhone or iPad and instantly preview changes. This app has proven to be great for making final tweaks and showing off designs to clients.

While creating static mockups in Sketch at different breakpoints can be a great way to show a client or developer how something should appear, it’s not always the most effective (or efficient) way. Giving a more fluid and realistic preview of how a responsive design will actually look through interactive prototyping is quickly becoming a necessity for web designers. While Sketch doesn’t have a built-in prototyping feature, thankfully other programs are integrating Sketch in their workflow models. Well-known interactive prototyping apps such as InVision36, UXPin37 and Marvel38 can now directly use Sketch files. Even prototyping plugins look to be on the rise also. Sketch Framer39 uses FramerJS40 to help you create interactive prototypes directly from the canvas, and it currently works with Sketch’s latest beta (3.3).

Moving To Development

Once the Fleet Feet design was ready for development, it was time to export the assets. When I first started using Sketch, none of the developers I worked with had the app, and I wasn’t going to force them to purchase something that I was just testing. Thus, it was up to me to slice up all of the assets for the project.

Thankfully, Sketch makes exporting all of the files super-easy. Take the icons we’re using in the mobile navigation, for instance. By just clicking the group of layers and then clicking the “Export” button in the bottom-right corner, I can save the icons for web in SVG or PNG format or in PNG @2x for Retina displays. This covers all of the bases for displaying the assets on various devices.

Exporting assets in Sketch41
Exporting assets in Sketch. (View large version42)

So, I’ve delivered graphic assets to the developers, but how exactly would they get by without knowing all of the colors, fonts and font sizes? Sketch makes this simple, too. Using the Sketch Style Inventory43 plugin, you can create in one click an inventory of all of the swatches and HEX codes of colors used on the page. Fonts work the same way. I like to use the plugin to create a text styles inventory as a reference guide for developers. Also, remember that I mentioned that you can copy the CSS styles for any element in a document? To get these text styles into a useable form for developers, all you have to do is select all of the layers in the type inventory, copy the CSS styles and paste them into a style sheet. Using Sketch, you can give developers all of the assets and styles they’ll need to get started without their ever having to touch the app!

What’s Missing?

I’ve talked a lot in this article about how great Sketch has been for my design workflow, but what about the downsides? Well, the app still cannot be the only design program in your toolbox. The bitmap-editing tools in Sketch leave a lot to be desired, and they don’t work for me most of the time, leaving me to crop or delete plain backgrounds in Photoshop. And while intensive illustration work can be done in Sketch, it often slows down the app.

Another downside of Sketch is its plugins. Although I’ve raved about many of them in this post, I wish many of these features were built directly into Sketch. Because these plugins are created by third parties, a simple update to Sketch or the plugin itself could render them inoperable. This means you can never completely rely on them in your workflow.

Finally, this program is still restricted to Mac OS X users. Not only does this rule out designers who use Windows, but it makes it very unlikely that you can ever share a native file with a developer, project manager or client.

Conclusion

Although it’s definitely still a work in progress, Sketch continues to be my go-to web design program. Its tools and interface prioritize design for the web. Things like the premade artboard templates, symbols and simple exporting functionality have drastically sped up my workflow and made the design process a little easier. Sketch has also improved my entire workflow, from moodboards to the early stages of development, making it an optimal tool for responsive design.

Have you tried Sketch yet? Has it become your tool of choice for responsive web design? Do you have any other tips or tricks from your workflow that I haven’t mentioned? Let us know in the comments!

Additional Resources

(mb, al)

Footnotes

  1. 1 http://bohemiancoding.com/sketch/
  2. 2 http://www.smashingmagazine.com/category/fireworks/
  3. 3 http://www.fleetfeetsports.com/
  4. 4 http://bohemiancoding.com/sketch/support/developer/04-resources/01.html
  5. 5 http://sketchtoolbox.com/
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2015/04/01-sketch-toolbox-opt.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2015/04/01-sketch-toolbox-opt.jpg
  8. 8 https://github.com/tadija/AEFlowchart
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2015/04/02-aeflowchart-plugin-opt.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2015/04/02-aeflowchart-plugin-opt.jpg
  11. 11 http://styletil.es/
  12. 12 https://github.com/ebinion/style-tiles-for-sketch
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2015/04/03-text-styles-opt.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2015/04/03-text-styles-opt.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2015/04/04-homepage-feetfleet-opt.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2015/04/04-homepage-feetfleet-opt.jpg
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2015/04/05-working-with-grids-opt.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2015/04/05-working-with-grids-opt.jpg
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2015/04/06-simplyfy-workflow-opt.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2015/04/06-simplyfy-workflow-opt.jpg
  21. 21 https://github.com/ddwht/sketch-dynamic-button
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2015/04/07-dynamic-buttons-opt.jpg
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2015/04/07-dynamic-buttons-opt.jpg
  24. 24 https://github.com/tylergaw/day-player
  25. 25 http://placehold.it/
  26. 26 http://lorempixel.com/
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2015/04/08-day-player-plugin-opt.jpg
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2015/04/08-day-player-plugin-opt.jpg
  29. 29 https://github.com/timuric/Content-generator-sketch-plugin
  30. 30 https://github.com/timuric/Content-generator-sketch-plugin
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2015/04/09-bulleted-lists-opt.jpg
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2015/04/09-bulleted-lists-opt.jpg
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2015/04/10-multiple-artboads-opt.jpg
  34. 34 http://www.smashingmagazine.com/wp-content/uploads/2015/04/10-multiple-artboads-opt.jpg
  35. 35 https://itunes.apple.com/us/app/sketch-mirror/id677296955?mt=8
  36. 36 http://www.invisionapp.com/new-features/28/invision-now-supports-sketch-files-high-fives
  37. 37 http://blog.uxpin.com/5535/uxpin-now-integrates-photoshop-sketch/
  38. 38 https://marvelapp.com/prototype-with-sketch/
  39. 39 http://twitter.com/sketchframer
  40. 40 http://framerjs.com/
  41. 41 http://www.smashingmagazine.com/wp-content/uploads/2015/04/11-exporting-assets-opt.jpg
  42. 42 http://www.smashingmagazine.com/wp-content/uploads/2015/04/11-exporting-assets-opt.jpg
  43. 43 https://github.com/getflourish/Sketch-Style-Inventory
  44. 44 http://www.sketchappsources.com/
  45. 45 https://medium.com/sketch-app
  46. 46 https://medium.com/@jm_denis/sketch-keyboard-shortcuts-42c06583ae83
  47. 47 http://www.newmediacampaigns.com/blog/essential-sketch-plugins-for-web-design
  48. 48 https://www.facebook.com/groups/sketchformac/

The post Using Sketch For Responsive Web Design (A Case Study) appeared first on Smashing Magazine.

Original post:

Using Sketch For Responsive Web Design (A Case Study)

How To Think Like An App Designer

There’s more to designing mobile apps than meets the eye. The task requires a deep knowledge of devices, and it often means changing the way we think — even if that means leaving behind much of what we’ve learned from designing for the web.
I started my career like many designers: working on print design projects. Shortly thereafter, I discovered the world of websites, which fascinated me and became the focus of my work for some time.

Continue reading: 

How To Think Like An App Designer

Thumbnail

Automating Style Guide-Driven Development

Style guides — especially living ones — are useful in many aspects of development and maintenance, so it’s little wonder that developing them has become a highly recommended and a popular practice. But even with the clear benefits, taking the necessary steps to create and start using them is easier said than done, as quite often the challenge is cultural, requiring changes in people’s mindsets.

In order to make the transition as painless as possible, equipping yourself with the most helpful tools and automating as many steps as possible become important. These living style guides promote a systematic approach to composing layouts, which used to be just a task within the user interface development process. Incorporating style guides into the development process places importance on the tools used to build the component catalogue.

Style guides come in many forms and shapes, but in this article we’ll concentrate on style guides that are generated directly from the style definition sources — i.e. CSS and its modern variants.

Time Passes, Development Changes

We used to practice the old-school type of web development workflow that starts with the designer creating a bunch of Photoshop mockups of all the pages and then handing them over to the UI developer, who then translates what he sees into HTML, CSS and JavaScript, and after some fine-tuning and checking, things eventually go into production. When a design lacked consistency, the problems with modelling grew even more complex and development started taking more time than it should have, particularly when the requirements changed.

Modifying an existing interface was the most challenging part, as it demanded actions from everyone in the chain: The designer would edit the PSD, the UI developer would change the code, and the outcome had to be meticulously verified again. Rinse and repeat. In some cases the whole user interface had to be rewritten from scratch. Adding pages to an existing website held similar problems: The team received PSD mockups of the whole interface, which then needed to be reconciled with the existing UI.

Long story short, the old-school process was difficult, time-consuming and prone to error, and it did not yield maintainable results.

Like many others in the web community, we took the “divide and rule” approach and started to modularize our interfaces. Thinking of them as sets of components instead of rigid pages increased the speed of development and made them more consistent and easier to maintain. With that, we realized that living style guides, built from the actual code, served as a much better summary than the PSD or PDF files.

Benefits Of Style Guides

“Process changes are much more profound than the technology that enables them.”

– John Albin Wilkins

The history of web development already contains examples of the ways tools and technologies can change the development process. Usually the change is indirect, as new tools shift the focus and challenge the old ways of thinking. The same holds true for automatic style guide generation: Every feature provided can trigger significant changes to your workflow when its full capacity is utilized.

Accurate Overview Of The UI

A style guide visualizes your code and represents it as a UI component toolkit. The list of components may be used as a checklist for all of the things that may have been forgotten or overlooked in the design and implementation. Being able to see each component in every possible state helps to ensure that everything is visually correct and that all the necessary states are present.

Such a UI component catalogue also serves as excellent documentation of the work that has already been done and is a good starting point for further development. Because it is generated from the source code itself and thus shows the components in their current state, any non-coding team member or customer representative can get a nice overview of the whole interface.

Development Playground

The very same living style guide web page can be used as a development playground as well. A developer running a local server can start working on a component and then afterwards tune and tweak the styles with a designer. Having each component displayed separately suits the idea of modular development perfectly and encourages the creation of independent building blocks for the interface.

This is also helpful when refactoring and especially when doing some maintenance work, because any change affecting the components and their states can be easily checked visually, decreasing the chance of something breaking accidentally.

Kickstart For New Pages

A predefined set of components aids in the building of new pages or even in the start of a fresh project based on the same code to ensure a coherent style across all products. Besides promoting code reuse, it automatically results in greater UI conformity. It’s easy to see right from the start whether the existing UI kit is enough for the upcoming page or whether some components or their states need to be implemented first. So, the time and resource needs can be estimated with greater accuracy.

Simplified Testing

Component-based development nicely reveals the power behind “divide and rule.” Even very complex systems can be developed and maintained more easily if they are represented as a combination of simple and small pieces. It also helps when testing a web interface; if something breaks, pinpointing the exact spot with the style guide is easy.

Component Culture

When developers start practicing style guide-driven development, their mindsets begin to change towards breaking an interface down into its components rather than thinking of it as a set of pages. From a technical perspective, it helps by reducing the mental context required down to the single component that is currently being developed and freeing the developer from having to worry about the rest of the system. In addition, it changes the process, giving each piece of the interface its own development cycle, which is iterated as the developer provides changes. This makes it easier to distribute work amongst the team, manage the process and even introduce another developer into the project. Who takes responsibility of updating the style source documentation required for the style guide will depend on the team’s composition, but in general it could be anyone who works with CSS, regardless of role.

It is often argued that this approach is more time-consuming, and we’re not going to disagree with that, but besides getting the application ready and deployed into production in time, one should also consider how it’s going to be maintained in the long run, and how much time and effort the maintenance will require. Nowadays it has become clear that this approach has its benefits, so if it seems expensive time-wise, it’s time to make use of the helpful tools and practices that will alleviate the pain, rather than dismiss the concept without trying.

Communication Benefits

“The roles of designer and developer are increasingly blurred, yet all too often we work in isolation.”

– Anna Debenham

With a living style guide, the whole team has the same representation of the UI, and a common vocabulary begins to emerge as everyone has a chance to watch each component evolve and to better understand its functionality and purpose. Magically, a bridge appears between the designers and developers. Collaboration usually improves quality greatly, and, similarly to pair programming, brilliant ideas and new use cases start to blossom and corner cases such as different screen sizes and component combinations are covered more efficiently.

If your designers prefer to work with graphical tools instead of prototype in the browser, you can still take steps towards the style guide-driven and component-based methods. Empower designers and bring them closer to the implementation phase by finding and providing suitable tools for them. By the time the design has been turned into interface components that are represented in the style guide, the PSD mockups will have become obsolete and making small adjustments will have become trivial.

Vision Of A Style Guide Generator Emerges

Our company in Helsinki, SC5 Online, has started the transition from Photoshop mockups to a style guide-driven process. We started out by documenting our customers’ web systems with Knyle Style Sheet (KSS) syntax and generating visual representations of them. That worked great for build-savvy developers, but in order to bring the UI developers and designers closer together we needed to find more suitable tools.

During our search we found some useful and nifty tools, but the same problem remained: Most of them were still incomprehensible to the designers, who quickly retreated to the familiar safety of Photoshop. We initially identified the following use cases as requirements for the tool:

  • provide a living, always up-to-date representation and documentation of our websites’ user interfaces;
  • allow us to work with all the popular style formats, such as CSS, Sass and LESS;
  • be compatible with Knyle Style Sheets1 (KSS);
  • allow us to view and search the styles related to a certain component;
  • allow style definitions to be easily editable by non-technical people;
  • allow us to easily find where a style variable is used;
  • enable us to work with templates as well as with CSS representation;
  • improve the testing and verification workflow;
  • improve communication between designers, developers and customers.

We couldn’t find one, so we decided to build our own open-source tool that tackles the technical challenges, while the developers and designers strive to overcome the cultural ones.

From the technical point of view, we envisioned the generator to be a module that could be easily used in any new or existing project. So, the logical choice for distribution was to package it as an npm module, as most web projects already utilize npm in one way or another. We also felt that in order to maximize its benefits, the style guide generator should be an integral part of the project it is being used in and, thus, should be easy to embed in any project’s codebase and workflow.

Despite its young age, it has already proven to be successful. It is being used by our customers, who have provided valuable feedback and ideas and have conveyed feature needs for further development.

Overview Of The SC5 Style Guide Generator

The SC5 Style Guide Generator2 builds a living style guide from style source code. It provides a command line interface and both Gulp and Grunt build tasks wrapped in a single npm package. In the simplest use case, the user defines which files are to be processed and to which directory the generated files should be written.

01-overview-opt-small3
(View large version4)

The documentation syntax is based on KSS5, so it can even be used in projects with bare HTML and CSS, but some of the most beneficial features, such as variable live editing, apply only to projects that utilize a style preprocessor with support for variables.

The resulting style guide itself is an AngularJS application that provides useful functionality, but your project doesn’t need to have anything to do with AngularJS. The generator does support using AngularJS directives as your component markup, however.

Installation is as easy as this:

npm install sc5-styleguide

Running The Demo

Before you start documenting your own project, seeing an example of what the result would look like might be useful, so we have provided a demo. The demo is a style guide generated from the style guide web application itself. You can check the interactive online demo6 or run the demo locally from the npm module’s directory:

cd node_modules/sc5-styleguide
npm run demo

This starts a local web server, which you can access at http://localhost:3000/7.

02-demo-opt-small8
(View large version9)

You can navigate around the different sections of the style guide using the top-level section menu on the left-hand side. Each component is presented with its description, a rendered visual example, the corresponding HTML markup and all of the related styling for that particular component. The rendered examples can also be viewed in full-screen mode, where the selected component will be rendered alone on an empty page with your styles applied. In the following paragraphs we will see how this mode is useful for both manual and automatic testing.

On the right side of the main view is a toggleable tab, the “Designer Tool,” that shows all of the variables used by the current section and that also serves as the interface for editing the variables directly in the browser.

03-designer-tool-opt-small10
(View large version11)

Even such a simple interface can convey a lot of useful information. The following sections describe the major features in greater detail and reveal some of the more technical tidbits.

KSS Documentation Inside

We believe strongly that documentation should be kept as close to the code as possible, ideally together in the same file if the code isn’t self-documenting. That way, remembering to update the documentation as the code changes is easier, and documenting becomes a more regular part of the development workflow.

We chose KSS as our style documentation convention because of its popularity, expressiveness and simplicity. The format is human-readable and machine-parsable, and it works with any style definition language, so it’s not going to become obsolete anytime soon. Using its simple and easy-to-remember rules, you can document all the different states of the components, such as hover and pressed states for buttons, and see the different states all at once on the generated style guide pages.

The SC5 Style Guide tool uses the KSS parser as its foundation, so if your styles are already documented with KSS, they can be immediately processed with our style guide generator. If not and even if you’re not familiar with KSS, don’t fret — the concept is very simple. All that is required is to add comment blocks to your components’ styles (CSS, Sass or LESS) with some simple rules. A typical KSS documentation block consists of the following:

  • section name,
  • section description,
  • example markup,
  • component modifiers (for different states),
  • style guide reference number.

Here is an example of a KSS documentation block for a button in the hover state using Sass:

// Buttons
//
// Buttons can and should be clicked.
//
// markup: <button class="button $modifiers">
//
// :hover - Highlight the button when hovered.
//
// Styleguide 1.1
a.button 
  …
  &:hover 
    …
  
}

All of the additional features in SC5 Style Guide are built upon the unmodified KSS library, so full compatibility with projects that have already been documented with KSS is guaranteed, and you have the possibility of using any and all of the KSS features that the future may bring.

Variables, Components And Relationships

All of the components in the style guide are rendered using their styles, along with their descriptions, the HTML code for recreating them and the related style definitions, which are extracted directly from the source files and shown as is. The “Designer Tool” also lists all Sass and LESS variables that are used in a particular component’s style definitions.

When the style sources are being processed, all Sass and LESS variables and their values are gathered in a list. Simply showing the entire list all of the time would be neither convenient nor useful, especially in a large system with a lot of variables. Instead, only the variables used in the currently active component or section are listed. If the currently active section does not use any variables, then all of the variables of its subsections are listed. This is nice and plays very well with variable live editing (explained in the next chapter).

There is also a reverse listing: “Where is this variable used?” Having a page show all the components that would be affected by changing a variable’s value is obviously not only useful, but a real time- and trouble-saver. No more searching in the editor or grepping and making mental maps of the variable’s usage — just click the variable’s name in “Designer Tool” to see the related components.

To make this work, the source files are preprocessed. First, the sources are split into a list of description-code pairs. The description parts are passed on to the KSS parser, which takes care of extracting the information from the KSS markup. The code parts are searched for variable definitions and references, and finally the two parts are joined, giving us not only the KSS section data, but also the related code and variables.

The splitting and variable searching are both done using the Gonzales Preprocessor Edition12 parser, which works for SCSS, Sass and LESS. The section splitting works for CSS as well, but obviously no variables can be found.

Full-Screen Mode And Automated UI Tests

Each component and state is reachable via a unique URL, which shows the component in isolation on a separate page, the full-screen mode. This allows you to check its responsiveness, accessibility and behavior across different browsers with different devices and emulators. This is much easier to do with simple, isolated components than with the whole complex system at once.

The full potential of the isolated full-screen component view is best achieved with automated testing, because you can pass the URL to any test system to check different aspects of the component. For example, you can check a component’s behavior with Protractor13. For smaller components, a test case would be much simpler. This does not relieve you of testing the whole interface’s interactions, but it will provide much more specific information if something is broken.

Besides testing behavior, you can write unit and regression tests for the components. Comparing screenshots of previously released and current versions might help you to catch a missed border, a wrong padding value or something else that is easily skipped when relying on manual verification. One tool for this is Gemini14.

Internally, we utilize our device wall, which can point any and all connected devices to a particular URL; as our style guide UI automatically refreshes when the styles are changed, all devices display the changes in real time. With a development server running on the same network as the device wall, checking all of the components on various devices is easy.

05-device-wall-opt-small15
See the video16. (View large version17)

Editing Components And Variables On The Fly

“Designer Tool” is used not only to list the variables, but also to edit them. Change a variable’s value, click the “Save” button and the variable’s new value is written back to the original style source file (CSS, Sass or LESS) on the disk, with the order, comments and indentation of the source file preserved. This is achieved with true AST (abstract syntax tree) parsing; the war stories and explanations of all the problems and drawbacks we encountered in our attempts with the regular expression approach would be enough for an article of its own.

Although the live editing feature is technically quite simple, it can have a drastic effect on the development process, especially when maintenance work is required. Non-technical people can use the browser to adjust such things as colors, fonts, padding and margins and immediately see how the component they’re working on will look like and how the changes will affect the whole system. The technically oriented developer will be happy to commit the changes to version control, without having to try to “make it prettier.”

Changes and additions on the file system are reflected in the browser in nearly real time, so nothing prevents the developer and designer from working in tandem and simultaneously. For example, the developer could add a variable’s definition and change a component to use it, while the designer takes care of finding the most suitable value for it.

CSS Selectors From The Shadows

One of the problems that very few (if any) style guide generators take into account is the very nature of CSS: style cascading. The style guide itself needs some styles, but those definitions should not affect the rendering of user-defined components, and vice versa. Good examples of this are font definitions on the body, resetting li margins, and setting everything to have a magenta background color with *.

A style definition such as the following could easily ruin either the navigation part of the style guide app or the user component representation:

ul li::before 
  content: "*";

This can be overcome with style encapsulation — aka the shadow DOM. In our case, the host application includes and uses its own styles, but every user component is wrapped in a shadow DOM root, to which the user styles are loaded. This prevents the user styles from affecting the host application. An AngularJS directive is used to abstract all of this behind a custom tag and to keep everything in a single place.

This is an ideal example of the power of a community that reports issues18 and even contributes solutions19.

Declaring Environmental Markup

Sometimes a component’s representation requires additional HTML around it, such as a list item or a component that depends on the markup into which it is placed. With the SC5 Style Guide Generator, declaring wrapper markup for every component is possible. The wrapper markup is inherited by the child components and can also be extended at that point, so you need to define a wrapper only once in the parent section, making it much easier to document the HTML required for complex structures.

Here is an example of markup for a list item’s wrapper:

// Side nav item
//
// markup:
//  <li>
//    <a class="$modifiers">Item</a>
//  </li>
//
// sg-wrapper:
// <nav class="sg side-nav">
//  <ul>
//   <sg-wrapper-content/>
//  </ul>
// </nav>

The same trick also works if your component requires a dark background:

// sg-wrapper:
// <div style="background: black;">
//  <sg-wrapper-content/>
// </div>

Forget Copy and Paste — Use Templates

With style guides taking their place in the development process to make it more efficient, maintaining them should also be as convenient and error-proof as possible. The practice of using comments to document the necessary HTML markup is often criticized for encouraging copying and pasting — and rightfully so because changing the comments when the markup changes is easy to forget. It also gives the style guide’s consumers unnecessary headaches because they will also need to update the markup of the components they are using.

A common solution to this problem is to equip the components with templates that can be reused in the application’s code, as well as to represent the components in the style guide. Because our web application’s UI is built with AngularJS, we added support for declaring an AngularJS directive as the markup, which is then lazy-loaded and rendered where needed in the style guide.

06-angular-directives-opt-small20
(View large version21)

For this, you can declare an additional sg-angular-directive parameter in a KSS block and provide the needed files:

// Test directive
//
// markup:
// <div sg-test-directive>If you see this something is wrong</div>
//
// sg-angular-directive:
// name: NameOfMainAppModule
// template: path/to/template-filename.html
// file: path/to/application-file.js
//
// Styleguide 1.2.3

You can declare more than one file, which allows you to bring in any possible dependencies. A more detailed explanation22 can be found on GitHub and in the source of the demo project.

Embedded Style Guide

A style guide can make a difference in the development process only if it becomes a natural part of the process. The smoother the integration, the better, and the easiest way for that is to have it generated automatically as part of the build process, without any manual action. That way, the style guide is guaranteed to always be fresh, up to date and available for anyone to review.

With this in mind, the SC5 Style Guide has been designed for easy integration with any project using Gulp or Grunt or the aforementioned command line interface. The generated style guide can be served using the built-in server or copied to your own server along with the rest of the application. Both approaches are already used in our company’s projects, and developers have mentioned that having the style guide as part of their website makes them feel more comfortable getting used to the component-focused way of development.

Using the --server option, you can serve and run the generated website locally, and the --watch option enables automatic style rebuilding and refreshing in the web application when some of the source files are changed. All of the command line options are listed in the documentation23 and in the styleguide --help output, but the best and the recommended way is to use them as part of your Gulp (or Grunt) build process.

Gulp integration is achieved with a styleguide task in your Gulp file. The documentation describes how to use and configure24 the styleguide Gulp task, and the npm module includes a minimal Gulp example in node_modules/sc5-styleguide/demo-gulpfile.js.

You need two tasks, one to build the style guide data from your sources and another to apply the processed styles to it.

var styleguide = require('sc5-styleguide');
var sass = require('gulp-sass'),
var outputPath = 'output';

gulp.task('styleguide:generate', function() 
  return gulp.src('*.scss')
    .pipe(styleguide.generate(
        title: 'My Styleguide',
        server: true,
        rootPath: outputPath,
        overviewPath: 'README.md'
      ))
    .pipe(gulp.dest(outputPath));
});

gulp.task('styleguide:applystyles', function() 
  return gulp.src('main.scss')
    .pipe(sass(
      errLogToConsole: true
    ))
    .pipe(styleguide.applyStyles())
    .pipe(gulp.dest(outputPath));
});

gulp.task('styleguide', ['styleguide:generate', 'styleguide:applystyles']);

In the example above, you can see that the styles to apply are built with Sass. Because you can change the task as you wish, you can use any preprocessor you like, even your own patched one. The same would work with pure CSS:

gulp.task('styleguide:applystyles', function() 
  return gulp.src('all.css')
    .pipe(styleguide.applyStyles())
    .pipe(gulp.dest(outputPath));
);

The style-applying task will pick all @ rules from your styles so that, for example, font-face definitions will be loaded correctly in the host document (since it cannot be done in the shadow DOM). It also picks and generates pseudo-classes from pseudo-selectors, such as :hover, so that each state can be rendered without actually having to hover on the component.

Running this as a watch, you can get a live development playground.

gulp.task('watch', ['styleguide'], function() 
  // Start watching changes and update style guide whenever changes are detected
  // Style guide automatically detects existing server instance
  gulp.watch(['*.scss'], ['styleguide']);
);

Every time you change the source, the style guide will rebuild and reload automatically.

The Grunt solution works similarly25 with the help of grunt-gulp.

Wrapping It All Up

Here at SC5 Online, we are putting style guide-driven development and the component-focused methodology to use. Some of our projects already use these paradigms, some are evolving towards them, and all future projects will certainly be developed this way. The more clearly we see the benefits of these methods, the greater the pang of regret would be if we were forced to give up these practices due to a technological difficulty or inconvenience.

We have decided to stand our ground and solve the technical difficulties we encounter, and this is how SC5 Style Guide26 is evolving and being developed. Witnessing the project being adopted by the open-source community — which is already reporting issues, suggesting feature ideas, making pull requests for bug fixes and improvements, and even implementing full features — has been a great pleasure. That being said, we encourage everyone to try it out (it’s free!) and participate! Thank you!

(il, ml, al)

Footnotes

  1. 1 http://warpspire.com/kss/
  2. 2 http://styleguide.sc5.io/
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2015/02/01-overview-opt.png
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2015/02/01-overview-opt.png
  5. 5 http://warpspire.com/kss/
  6. 6 http://demo.styleguide.sc5.io/
  7. 7 http://localhost:3000/
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2015/02/02-demo-opt.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2015/02/02-demo-opt.png
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2015/02/03-designer-tool-opt.png
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2015/02/03-designer-tool-opt.png
  12. 12 https://github.com/tonyganch/gonzales-pe
  13. 13 https://github.com/angular/protractor
  14. 14 https://github.com/bem/gemini
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2015/02/05-device-wall-opt.jpg
  16. 16 https://www.youtube.com/embed/bnlD4px-jhY
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2015/02/05-device-wall-opt.jpg
  18. 18 https://github.com/SC5/sc5-styleguide/issues/268
  19. 19 https://github.com/SC5/sc5-styleguide/pull/280
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2015/02/06-angular-directives-opt.png
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2015/02/06-angular-directives-opt.png
  22. 22 https://github.com/SC5/sc5-styleguide#defining-an-angular-directive
  23. 23 https://github.com/SC5/sc5-styleguide#as-a-command-line-tool
  24. 24 https://github.com/SC5/sc5-styleguide#with-gulp
  25. 25 https://github.com/SC5/sc5-styleguide#with-grunt
  26. 26 http://styleguide.sc5.io/

The post Automating Style Guide-Driven Development appeared first on Smashing Magazine.

Excerpt from:

Automating Style Guide-Driven Development

Thumbnail

Prototyping iOS And Android Apps With Sketch (With A Freebie!)

After the untimely (and still kind of sad) demise of Fireworks1, I found myself looking for other ways to design apps and websites. I also had the desire to produce something more interactive for when I talk about my work with stakeholders. It turned out that Sketch2, when paired with some other neat tools, would be a big part of this workflow.

In this article, I’ll talk you through why you should prototype and how you can do it with Sketch and prototyping tools such as Flinto and InVision. You’ll also get a nicely documented freebie Sketch file to help you.

Before we get started, here are a few articles, in case you‘re curious about why I am using Sketch for UI design:

Why Prototype?

When it comes to showing an app’s design to a team, a client or a stakeholder, I’ve found that an ugly-but-functional prototype beats the static bitmap of one state of a screen that I’d get from Sketch, Photoshop or the like. I’ve found that communicating things like user flow and hierarchy is tougher in static mockups (especially when dealing with responsive websites, but that’s a topic for another day).

Increasingly, animation is playing a stronger role in design. I like how Val Head9 puts it in “All the Right Moves: Putting Your UIs in Motion10” (emphasis mine):

Motion has meaning in UX design, so don’t overlook the importance of good motion design to enhance the experience. […] Animations are a powerful option to add design details to your work. When used well, motion can bring delightful moments to a user interface and improve interactions.

Motion provides meaning and is also central to the functioning of all native mobile apps — and increasingly for the web as well (see “Material Design11” and the Polymer12 project from Google). So, it’s critical to prototype for and to show motion and animation for all digital design work, but especially for mobile apps.

Side note: You can create pretty robust interactive prototypes right in Adobe Fireworks, including mobile prototypes13, web prototypes14 and iOS prototypes15. However, since Fireworks won’t be further developed by Adobe, finding an alternative workflow was vital for me.

I’ve tried several methods of showing mockups to clients. There are a ton of them, and so many look amazing. I ended up trying flat images, clickable PDF wireframes and even prototypes built in Interface Builder16. Here’s how they worked out:

  • Flat images left people wondering how we’d ever get to SuperAmazingFeature 3000™. This surely wasn’t the right way to go.
  • Clickable PDF wireframes upset the scale of our designs by fitting the PDF to whatever size my screen was — clearly, not the right way, either. (There is a way in Adobe Acrobat to specify the zoom level of a page that is the destination of a link within a PDF file so that all pages have a consistent zoom level. But if you do not create the links carefully, then you will need to manually change the zoom level and scroll point on the destination page, because Acrobat usually sets the zoom level for each page to maximize the view of that page, and app screens and web pages often have different lengths and will be displayed at different zoom levels.)
  • Interface Builder (part of Xcode17) is fun, although it comes with a considerable learning curve and investment of time compared to the others. Not everyone designs on Mac OS X or for iOS, either.

While things built in Interface Builder showed animations, neither flat images nor clickable PDFs did. That’s a bummer, because animation communicates what a flat image can’t: transitions, which are another critical part of good design. Here’s an example of why animation is key: That really cool alert you designed to slide up from the bottom of the screen will most likely get lost in a flat mockup. If you can show it animating in, you’re more likely to get your point across to someone.

It wasn’t until recently that I found a happy medium: building a wireframe kit and making interactive prototypes in services such as Flinto4118 and InVision19. I’ve been able to create designs that people view in context, on their devices and on their time. I’ve found that context is important: Showing a screenshot of a mobile app on someone’s computer invites confusion, and we generally want to avoid that.

Flinto has a 30-day trial, while InVision offers a free tier that works with one project. Both have paid plans with more features.

In keeping with the idea of staying lean, I adapted a wireframe kit for iOS (I’m still working on the Android bit!), so that people can focus on structure rather than pixels. I did get a couple of folks asking if that’s how the app would look, but most understood the concept pretty well. I use the metaphor of building a house: Wireframes are the foundation of the house, and painting and moving in the furniture come after we’ve ordered everything just right.

Let’s talk a little about the freebie Sketch file next.

The Sketch Blueprint File

The iOS 7 Blueprint.sketch template file is free to use (I put it under the MIT license), and is intended to help you focus on making interactive prototypes.

sketch-blueprint-feature-opt-small20
The Sketch Blueprint freebie file. (View large version21)

Please note that the template requires Sketch version 3.1+. (The folks at Bohemian Coding changed Sketch’s file format in that version, and versions older than 3.1 won’t be able to open the file correctly.)

I’ve included several elements to get you started:

  • tab bar,
  • menu bar,
  • segmented controller,
  • search bar,
  • tables (with and without icons),
  • images of varying proportions,
  • alerts,
  • various buttons and icons.

You’ll also find linked color and text styles, so you can color and style it as you see fit.

The Sketch file has even been updated for the latest iPhones, 6 and 6 Plus, so it should be up to date as of the publication of this article.

I thought about what the color scheme could be and considered reverting to a grayscale gamma, but that felt too flat to me. Then, I thought more about blueprints24 and how I use that metaphor when talking about building designs, and I decided to go with the monochromatic blue palette.

Note: You can also download the sample Sketch Blueprint file25 that I used to build the demo prototype shown in this article, complete with pages and artboards and ready for exporting. You may wonder why I have two Sketch files? My plan is to regularly update the GitHub-hosted Sketch Blueprint26 file for new mobile devices, and I’m providing the other file in the hope that it is useful to you (although I won’t be maintaining it after this article is published), because you could learn more from it about pages and artboards and how to set up slices for easy image exporting.

How I Organize My Sketch App Files

I use a separate page in Sketch for each section. Let’s say we’re talking about a log-in screen. I’ll give each variation of the log-in screen (registration, lost password, incorrect password, etc.) its own artboard. If I’m making an app that requires a log-in or sign-up process, I’ll put the log-in view on its own page with each state (like showing registration and error states).

sketch-pages-opt-small27
Different states on a page in the Sketch file. (View large version28)

Speaking of all of those views, you’ll find it helpful to name your artboards, especially when you export them. Your naming conventions will probably vary, and maybe your team already has one. If not, here’s how I name my pages and artboards, by following a page name – artboard name convention.

  • Log In – Main
  • Log In – Sign Up
  • Log In – Forgot Password
  • Log In – Error

I try to use symbols for repeating elements such as menu bars, images and icons when designing these views. It makes life easier because I can change a symbol once and see its instances update everywhere.

Note: Are you new to Sketch? Learn the basics of artboards29, layers30, pages31, groups32, symbols33 and styles34 (resources that are part of the official documentation35).

Sketch also lets you do this with colors, buttons and text styles, which is neat. I can create one style for headlines, body copy and subheadings that will link throughout every other screen in the document. If I change the color in one spot, every other element that shares the style will be updated. Not having to make the same update manually in 20 other places is nice.

Note: I’ll draw a quick parallel with Adobe Fireworks. Symbols and styles in Sketch work similarly to the way they do in Fireworks, so the concept should be easy to understand. This topic has been covered in depth in the following articles on Smashing Magazine:

Fireworks doesn’t have the artboards feature, but it does have pages just like Sketch. So, moving from one app to the other shouldn’t be very hard for experienced Fireworks users.

Also, note that symbols in Sketch aren’t 100% the same as they are in Adobe Fireworks. Fireworks has both symbols and rich symbols40. Rich symbols in Fireworks allow a symbol’s instance properties to be edited independently — this means that you can make changes to the instances of a rich symbol without affecting the master symbol. This is a very useful feature for designing user interfaces — think of a button with multiple states, for example, or a text label that you can edit without affecting the design of the UI element itself.

Sketch, on the other hand, doesn’t have the concept of states inside a symbol (yet), so be cautious if you’re trying to make a button with multiple states; in this case, breaking your active and inactive states into separate symbols is probably best.

Exporting Into My Prototyping Tool Of Choice

For this example, I’ll use Flinto4118. It isn’t the only option out there (I’ll review a few other prototyping solutions later in the article), but it sure is simple. And super-speedy, too.

Using slices42 in Sketch is easy, and you can export everything as a PNG or JPG to the desktop and drag those files right into Flinto. (Alternatively, you can click on your artboard’s name on the canvas and choose “Make Exportable,” define the export optimization settings and export the images.)

sketch-export-slices-opt-small43
Exporting slices from Sketch. Press Command + Shift + E or choose “File” → “Export” to get here. (View large version44)

Linking the exported images together in Flinto is easy, as is keeping parts fixed to the top or bottom of the window; for example, you can place a fixed menu bar at the top and a toolbar at the bottom. More on that in a moment.

When I’m finished with my design, I’ll create a new project in Flinto and use the iPhone 6 Plus with a white transparent menu bar. In our case, I’ve been dragging my files from the desktop in the order that I want them presented. I’ll make my menu bar fixed, as well as the tab bar.

flinto-fix-elements-opt-small45
Drag these arrows to tell Flinto the height of your headers, footers and other fixed elements. (View large version46)

If you need, you can also fix elements to the top and bottom of the page. Just drag these icons down to your desired placement.

Flinto will create an interactive prototype in HTML, CSS and JavaScript. You’ll receive a link via email or SMS to add it to your device’s home screen, and it will look and feel like a real app. Flinto allows you to have the standard transitions of iOS and Android (iOS has a few more than Android does at this point, but they’re all there!). Flinto doen’t support Windows Phone, though.

This is awesome because it lets designers who might not have experience with Xcode or responsive frameworks such as Twitter’s Bootstrap47 or Zurb’s Foundation48 to communicate their ideas and user flows more clearly than by sharing a simple flat image.

If you’re making a responsive website, you could argue that getting into HTML is the way to go, and I wouldn’t necessarily disagree. It’s up to you to find out the right approach for your project and team.

Some Handy Tips And Tricks

You can show screens for a certain amount of time, like you would an alert or tooltip. This is helpful if you want to show an alert view that pops up for a short amount of time.

flinto-timing-icon-opt-small49
How to time transitions in Flinto. (View large version50)

Flinto also lets you duplicate links from one screen to another, which is super-helpful. Just drag the hotspot that you made on one screen on top of the next. Voilà!

flinto-link-groups-opt-small51
Here’s how to create link groups in Flinto. Easy! (View large version52)

Before looking at our prototype, let’s take a peek at the workspace. You should see some of the things we discussed, like where the fixed menu bars and tab bars live, as well as how the link groups look.

flinto-workspace-opt-small53
Our Flinto workspace. (View large version54)

Now for the fun part: previewing! Let’s give it a shot. Here’s a screen recording55 of what it looks like on my iPhone:

Hey, that looks pretty nice! We’re ready to show it to other people and get feedback to move forward.

One other neat thing is that you don’t have to create a new project once you’re ready to add more design elements — you can keep building it up and changing it as the design evolves. If you’re using the same Sketch file, then you’ll be able to replace the images in your current prototype with higher-fidelity ones; export those artboards from Sketch and drag them into the editor. And if you want to keep it, you could simply duplicate your current project by going to “Settings” → “Actions” → “Duplicate This Prototype.”

Other Prototyping Tools

I mentioned earlier that Flinto isn’t the only prototyping service on the market. In fact, there are too many of them! Before I settled on my Sketch and Flinto workflow, I explored a few alternatives.

There’s InVision56, which is absolutely lovely. You can prototype a design in a similar way to Flinto, from phone-sized all the way up to desktop-sized. It has a free tier (Yay!), and it offers native support for Sketch files57. It also offers gesture support, so you can show people what happens when a user swipes through to the next screen. You can also have fixed headers and footers and a web app that users can install on their devices. It’s pretty neat.

Another thing I enjoy about InVision is that you can add comments directly on a design, so there’s no confusion about whom feedback is coming from.

I recently also looked closely into one other tool, Pixate58, which is made specifically for iOS and Android apps. It gives you a lot more control over animation and gestures. I like it because it allows a designer to show more realistic interactions than Flinto or InVision. Say you have a table that you’d like to scroll horizontally, but you want the rest of the screen to remain static. Pixate lets you get that deep when creating the prototype, which is neat. (A terrific demo video that you should watch is on its website.)

There’s also the good old Interface Builder59. It’s part of Xcode (a Mac-only tool), and it allows you to prototype iOS apps — as well as Apple Watch60 apps as a matter of fact (but that’s a discussion for another time). Interface Builder has got a considerably steeper learning curve, but it will produce higher-quality results than Flinto and InVision. Keep in mind that Interface Builder will make an app prototype that runs directly on an iOS device.

If you need to prototype for iOS specifically, you could also use Keynote61, because it includes nearly all of the native transitions and animations in iOS, and it’s easy to drop in bitmap images and some live text to create something that behaves like your intended design. Its limitation is that it can make prototypes only for iOS (no Android or Windows Phone support).

It’s worth noting here that most of these prototyping tools require the use of flat images and/or slices, and they do not generate any code or framework for a responsive website. The prototypes they create have certain limitations and are intended for discussion only (although Interface Builder could be taken a little further in making an app).

Here’s a table comparing some of the prototyping apps that I’ve tried and their features:

Product Ease of use Platforms Animation support Gesture support Comments
Interface Builder Difficult iOS OS, custom Yes No
Flinto Easy iOS, Android OS No No
Pixate Moderate iOS, Android OS, custom Yes No
InVision Easy iOS, Android, web OS Yes Yes

Conclusion

I hope this article has persuaded you to start experimenting with prototypes (if you haven’t already). Something interactive will almost always communicate more than a picture ever could, and you’ll have better conversations because of it. On the other hand, Sketch is an excellent UI design tool, lightweight and quite powerful, and it works great with Flinto, InVision and the like because they live in the borderlands of flat images and HTML or native code; this approach lets you whip up something to discuss in minutes. Prototyping services like these are lightweight enough to help you if you can’t code a prototype yourself.

If you have questions, let me know in the comments!

Further Reading

(mb, al, il)

Footnotes

  1. 1 http://www.smashingmagazine.com/2013/12/19/present-future-adobe-fireworks/
  2. 2 http://bohemiancoding.com/sketch/
  3. 3 http://alistapart.com/blog/post/design-tools-for-todays-web
  4. 4 http://twitter.com/acolangelo
  5. 5 http://medium.com/@ahow/fireworks-refugees-welcome-to-the-open-arms-of-sketch-3-3241b7f972af
  6. 6 http://twitter.com/ahow
  7. 7 http://medium.com/@jm_denis/discovering-sketch-25545f6cb161
  8. 8 http://twitter.com/jm_denis
  9. 9 http://twitter.com/vlh
  10. 10 http://www.meetup.com/Fire-On-The-Bay/events/139134892/
  11. 11 http://www.google.com/design/spec/material-design/introduction.html#introduction-principles
  12. 12 http://www.polymer-project.org/
  13. 13 http://www.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
  14. 14 http://www.smashingmagazine.com/2012/06/25/create-interactive-prototypes-with-adobe-fireworks/
  15. 15 http://www.smashingmagazine.com/2013/01/11/ios-prototyping-with-tap-and-adobe-fireworks-part-1/
  16. 16 http://en.wikipedia.org/wiki/Interface_Builder
  17. 17 http://developer.apple.com/xcode/
  18. 18 http://www.flinto.com/
  19. 19 http://www.invisionapp.com/
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2015/01/sketch-blueprint-large-opt.png
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2015/01/sketch-blueprint-large-opt.png
  22. 22 https://github.com/joshuamauldin/sketch-blueprint/archive/master.zip
  23. 23 http://github.com/joshuamauldin/sketch-blueprint
  24. 24 http://www.smashingmagazine.com/2014/10/09/front-end-development-ode-to-specifications/
  25. 25 http://provide.smashingmagazine.com/Prototyping-iOS-and-Android-Apps-with-Sketch-Freebie-prototype.sketch
  26. 26 http://github.com/joshuamauldin/sketch-blueprint
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2015/01/sketch-pages-opt.png
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2015/01/sketch-pages-opt.png
  29. 29 http://bohemiancoding.com/sketch/support/documentation/09-grouping/2-artboards.html
  30. 30 http://bohemiancoding.com/sketch/support/documentation/03-layer-basics/
  31. 31 http://bohemiancoding.com/sketch/support/documentation/09-grouping/3-pages.html
  32. 32 http://bohemiancoding.com/sketch/support/documentation/09-grouping/1-groups.html
  33. 33 http://bohemiancoding.com/sketch/support/documentation/07-symbols/
  34. 34 http://bohemiancoding.com/sketch/support/documentation/08-styling/8-shared-styles.html
  35. 35 http://bohemiancoding.com/sketch/support/documentation/
  36. 36 http://www.smashingmagazine.com/2014/04/28/collaborating-with-adobe-fireworks-on-large-design-teams/
  37. 37 http://www.smashingmagazine.com/2014/02/17/effective-style-guides-with-adobe-fireworks/
  38. 38 http://www.smashingmagazine.com/2013/01/11/ios-prototyping-with-tap-and-adobe-fireworks-part-1/
  39. 39 http://www.smashingmagazine.com/2012/10/12/adobe-fireworks-enterprise/
  40. 40 http://www.adobe.com/devnet/fireworks/articles/enhancing_rich_symbols.html
  41. 41 http://www.flinto.com/
  42. 42 http://bohemiancoding.com/sketch/support/documentation/11-exporting/2-slices.html
  43. 43 http://www.smashingmagazine.com/wp-content/uploads/2015/01/sketch-export-slices-opt.png
  44. 44 http://www.smashingmagazine.com/wp-content/uploads/2015/01/sketch-export-slices-opt.png
  45. 45 http://www.smashingmagazine.com/wp-content/uploads/2015/01/flinto-fix-elements-opt.png
  46. 46 http://www.smashingmagazine.com/wp-content/uploads/2015/01/flinto-fix-elements-opt.png
  47. 47 http://getbootstrap.com/
  48. 48 http://foundation.zurb.com/
  49. 49 http://www.smashingmagazine.com/wp-content/uploads/2015/01/flinto-timing-icon-opt.png
  50. 50 http://www.smashingmagazine.com/wp-content/uploads/2015/01/flinto-timing-icon-opt.png
  51. 51 http://www.smashingmagazine.com/wp-content/uploads/2015/01/flinto-link-groups-opt.gif
  52. 52 http://www.smashingmagazine.com/wp-content/uploads/2015/01/flinto-link-groups-opt.gif
  53. 53 http://www.smashingmagazine.com/wp-content/uploads/2015/01/flinto-workspace-opt.png
  54. 54 http://www.smashingmagazine.com/wp-content/uploads/2015/01/flinto-workspace-opt.png
  55. 55 http://vimeo.com/114618884
  56. 56 http://invisionapp.com
  57. 57 http://www.invisionapp.com/new-features/28/invision-now-supports-sketch-files-high-fives
  58. 58 http://pixate.com/
  59. 59 http://developer.apple.com/xcode/interface-builder/
  60. 60 http://www.apple.com/watch/
  61. 61 http://keynotopia.com/guides/
  62. 62 http://uxdesign.cc/ux-tools/
  63. 63 http://prototypingtools.co
  64. 64 http://twitter.com/millonestarde
  65. 65 http://blog.mengto.com/quick-ios-prototyping-flinto/
  66. 66 http://twitter.com/mengto
  67. 67 http://viget.com/inspire/prototyping-mobile-animations-with-pixate
  68. 68 http://blog.invisionapp.com/11-tips-for-prototyping-with-sketch/
  69. 69 http://www.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
  70. 70 http://www.smashingmagazine.com/2013/01/11/ios-prototyping-with-tap-and-adobe-fireworks-part-1/
  71. 71 http://keynotopia.com/guides/
  72. 72 http://robots.thoughtbot.com/rapid-prototyping-with-pixate

The post Prototyping iOS And Android Apps With Sketch (With A Freebie!) appeared first on Smashing Magazine.

See original: 

Prototyping iOS And Android Apps With Sketch (With A Freebie!)