Browsed by
Category: Awesome Design Tools

Over the course of crafting kick-ass experiences, we encounter a lot of different tools. We’d like to pass on some of the knowledge we’ve picked up to you, dear reader.

What’s CSS Grid and Why Should You Care?

What’s CSS Grid and Why Should You Care?

Photo by Patrick Hendry on Unsplash

CSS Grid Layout, now supported in all major browsers, is rapidly becoming an essential tool in the front-end developer’s kit. So let’s take a good look at what this emerging framework is, how people use it, how it differs from other frameworks and how it’s bound to change the design landscape for good.

What is CSS Grid?

The CSS Grid Layout is the newest and most advanced CSS layout framework. The defining characteristic of CSS Grid is that it is inherently two-dimensional, while standard CSS layouts are only one-dimensional. Breaking out of the 1D limitation opens a world of possibility for designers that will take years to explore fully. Meanwhile, for many designers, CSS Grid is the long-awaited solution to the problem of designing highly sophisticated responsive page layouts in HTML and CSS without resorting to ad-hoc solutions that almost feel like hacks, often involving loads of JavaScript, PHP and more.

How you can use it

As designers use CSS Grid Layout in more projects every month, the new framework is rapidly going mainstream. As of Fall 2017, it’s already a safe bet to use CSS Grid for a significant fraction of your front-end projects, especially if the project is long-term. If you’re looking for great examples and templates to give you some inspiration, there’s no better place to start than Grid by Example, put together by Rachel Andrew, the brilliant designer responsible for most of the code in CSS Grid.

Difference from Bootstrap and Flexbox

For many designers, Bootstrap and Flexbox have been the solution of choice when facing the challenge of building responsive layouts, given the limitations of HTML and standard CSS.

CSS Grid vs. Bootstrap

Because of Bootstrap’s status as the leading grid framework, many designers are comparing it to the web-native newcomer: CSS Grid. Although Bootstrap doesn’t suffer from some of the backward-compatible concerns of the still-emerging CSS Grid Layout, it’s widely believed that CSS Grid is the future of layout design all the same. Not only is CSS Grid perfectly capable of reproducing nearly any layout built with Bootstrap, it often does it in a more efficient, elegant and open-ended fashion.

CSS Grid vs. Flexbox

Many CSS experts hold the position that CSS Grid Layout and Flexbox are complementary solutions that designers can and should use together. CSS Grid is at its best when building an overall 2D layout, addressing both rows and columns at any level of complexity. Flexbox, in turn, works well for 1D fine-tuning within the overall 2D layout to align and position the smaller pieces of content concerning a single row or column.

How CSS Grid is changing the design landscape

Now that it’s possible to efficiently and elegantly design highly responsive sites from directly within a 2D CSS framework, the bar for building responsive sites has is dramatically lower. We are likely entering an era in which highly responsive sites reach ubiquity almost immediately, and designers begin exploring far more sophisticated layouts that will redefine the notion of responsive altogether.

Lingering challenges

Like every emerging design solution, even one on its way to becoming the new standard, the CSS Grid Layout does face a few stubborn obstacles that may prevent it from becoming the most favored solution for at least a few more months. The most notable issue is browser-compatibility. Although CSS Grid is now compatible with the latest versions of all the key browsers (with the last major holdout Microsoft Edge finally announcing compatibility this month) millions of people still use old versions of browsers, and there are always situations, such as corporate legacy systems, that could raise justifiable concerns. Some have suggested that the answer is to have your CSS Grid-based layout automatically serve up the mobile version of your site in such situations. However, if this (or any other smart workaround) won’t work for you or your clients, then you might want to wait a few months before making CSS Grid your default design solution. All the same, it’s time to learn this emerging framework inside and out, as it’s only a matter of time before CSS Grid plays a big part in your design decisions.

The importance of a new dimension

The CSS Grid Layout is quickly catching on, and forward-thinking designers are beating the drum and singing its praises. This wouldn’t be happening if it wasn’t the case that the extra dimension provided by CSS Grid is far more than a responsive-layout expedient. Rather, it’s a vehicle for a more natural and elegant approach to layouts as a whole.

Wanna nerd out on design and dev? Hit. Us. Up.

Sketchy Opinions: Content Generator Fills Your Needs and Your Shapes

Sketchy Opinions: Content Generator Fills Your Needs and Your Shapes

Professional digital design tool Sketch may be one of our favorite applications. Not only is the UI incredibly simple to master, but there is also a huge community of developers and designers that make a dizzying array of plugins, templates, and other goodies to make it an even more useful tool. In this HoA series, we take a look at some of our favorites. Today, we’ve got the skinny on Content Generator, a plugin that makes creating placeholder and filler content a snap.

Content Generator is one of our favorite time-saving plugins for Sketch. This free tool gives you a rich array of dummy content to populate your mockups with. Thanks to Content Generator, you no longer need to rack your brain or scrounge around for realistic content. Nor do you have to enter it by hand. Content Generator provides the ways and means to see what your site or app will really look like once it goes live and attracts users.

content generator

To get started, open up the Sketch Toolbox plugin (which you should definitely download if you haven’t already). In the search box, type “content.” The Content Generator plugin should be the first result to come up. Click Install. Simple as that.

To use your freshly installed plugin, click Plugins from the main Sketch menu, then select Content Generator Sketch Plugin. Four categories of dummy-content to choose from will appear:

  • Geo
  • Persona
  • Photos
  • Text

These four categories should cover nearly every dummy-content demand you’ll come across. Suppose, for example, you need a bunch of names, faces, emails, locations and, of course, text to populate your mockup of a community site. Furthermore, suppose you don’t want to use the same names, faces, text and so on again and again.

Without Content Generator or a similar plugin, you will have to scrounge for realistic content and enter it manually. Unless you have hours and hours to spare, we wouldn’t recommend this approach. On the other hand, with Content Generator, the whole process is practically automatic.

insert text

Sticking with the example of designing a community site, let’s suppose you wanted to start with images and names of community members. Simply select the shapes in your sketch page or screen where you want the headshots to appear. Then go to Content Generator and select Persona >> Images. You can then choose female, male or gender-neutral photos. Then watch as all of the fields you selected on your page or screen suddenly populate with corresponding faces. It’s really that easy.

To add names to your faces, select the fields in your mockup where you want the names to appear. Next, return to the Content Generator menu and the Persona category, but select Names this time. Then watch as the fields you selected in your mockup magically populate with names to go along with the faces in your community.

You can continue through this same process to add locations. First, choose a country, then (at least in the case of the U.S.) select State, City or even Full Address.

Although the Persona category is enormously helpful (as is the Geo category and the Photos category), the Text category is where Content Generator gives you the greatest degree of control. The free plugin gives your four options to choose from:

  • Custom string
  • Dummy text
  • Enumerate
  • Time ago

For the purposes at hand, let’s drill-down on Dummy text. Here Content Generator offers not only your run-of-the-mill Lorem ipsum text, but Hipsum (short for “hipster ipsum”), among other options. Suppose your community skews relatively young. Depending on your audience, you might choose Hipsum to populate the respective profile bio fields and conversational content throughout your community mocks. Content Generator makes it easy not only to put something more familiar than Latin in there, but has a Replace feature that makes it easy to mix up the dummy content for a more varied and realistic appearance.

Hipsum Generator

Content Generator: a must-have plugin for Sketch

We’re big fans of Content Generator, and now you can see why. This free plugin saves you tons of time, populating your screens and pages with a variety of photos, names, email addresses, locations and even hipster ipsum if the need arises. Either way, Content Generator will save you hours or even days of effort racking your brain or scrounging around for realistic dummy content. And thanks to the plugin’s tight integration with Sketch, the content will flow directly into the corresponding fields you select. The result: you can now get a quick and realistic sneak peek of what your future site or app will really look like.

To learn more about the wonders of Sketch and how we use it to create beautiful, human-centric designs and mock-ups, hit us up.

Sketchy Opinions: Featured Sketch Plugin – Magic Mirror

Sketchy Opinions: Featured Sketch Plugin – Magic Mirror

It’s no secret that we love the professional digital design tool Sketch. Not only is the UI incredibly simple to master, but there is also a huge community of developers and designers that make a dizzying array of plugins, templates, and other Sketch goodies to make it an even more useful tool. In this HoA series, we take a look at some of our favorites. Today, we’ve got the skinny on Magic Mirror, a plugin that lets users manipulate the perspective of images in Sketch.

Our clients make technical products–many are online platforms or other types of software. When we’re designing the front-end design of a new website or web page, we often like to show off the product as a potential user might see it–within the actual device.

Showing the product “in device” (whether it’s a laptop, mobile or another type of screen) makes an intangible product, like software, tangible. It’s also just more visually appealing. If you want to change the perspective of an image (e.g. viewing the device at an angle, rather than straight on), things can get a little tricky.

You may be asking yourself, “Is that a dinosaur riding a penny farthing?” Yes, yes it is.

Manipulating the image’s dimensions to believably fit into the perspective view without making the image look like crud takes some skill. There are many tools in your average designer’s toolkit however that make it a relatively straightforward process. Adobe Photoshop’s “Smart Object” feature is particularly powerful. But if you’re building a wireframe or design on a tight timetable (a pretty common occurrence), you may not want to have to sift through Adobe’s sometimes byzantine labyrinth of tools or have to switch back-and-forth between apps. You just need to make a thing fit into another thing quickly and easily. That’s where Sketch plugin Magic Mirror comes in. It makes perspective transformations in Sketch a snap so you can create realistic, eye-popping perspective product mockups on the fly.

Getting started

Although it is possible to create a perspective mockup with pre-existing Sketch features, it’s hard to do it quickly, efficiently and convincingly. Magic Mirror, on the other hand, not only makes the process effortless but updates your perspective mockup automatically.

The talented team at MagicSketch released Magic Mirror 3 this year, and it doesn’t disappoint. The newest version offers up to 4x image quality; support for the Symbols feature; support for the Slices feature; and corner-radius support. Although no longer a free plugin, you can get Magic Mirror for as low as $1.99/month with a yearly subscription and a 14-day free trial.

The easiest way to install Magic Mirror is through Sketch Toolbox, a Sketch plugin manager that you should also install if you haven’t already. Once Magic Mirror is installed, it couldn’t be easier to use. For the most common use case, just open up the Sketch artboard you want to transform. Then create a second artboard and use the vector tool to draw a shape on it, such as the trapezoid-shape of a smartphone held at an angle. Finally, open up the Magic Mirror plugin either through the menu or through the shortcut Ctrl+Shift+M. You should see your selected image adopt the perspectival shape automatically. Not only will the transformed image look realistic, but the plugin preserves all other layers you add to it, such as a reflection on the surface of a smartphone.

Key features

You can now access all of the following functions through the Sketch inspector panel, which shows up as-needed to help you along. You can flip and rotate Magic Mirror artboards; change the image quality; select or exclude layers, and refresh—all from the panel.

Replaced the screen with an image of the “product.”

Image Quality Selector

Just as the name implies, the image quality selector feature allows you to choose the resolution quickly, and thus the Sketch file size, from a drop-down. Magic Mirror 3 has improved color and image quality and offers you the option to choose between Auto, 1x, 2x, 3x and 4x resolutions.

Layer Selector

The layer selector allows you to quickly isolate the layer that you want to perform a perspective transformation on. You can even find your layer by typing its name into the corresponding field in the Sketch inspector panel. The plugin also has a checkbox on the panel to exclude a layer from the image layer selector, assuming you never want it shown.

Smart Selection

Artboards, Symbols, Groups and multiple selections are all supported by Smart Selection, which displays their layers in the Sketch Inspector Panel.

Flip, Rotate and Refresh

Within the inspector panel, you can one-click flip or rotate the transformed image. The refresh feature also found on the inspector panel, allows you to transfer all the changes from the artboard to the layers you’ve selected.

Work some magic

Magic Mirror is a perspective mockup-maker extraordinaire. Although it is conceivable that with enough talent you could perform perspective transformations in Sketch on your own, Magic Mirror makes it effortless. A modest monthly subscription will get you one of the most powerful and useful Sketch plugins available, including features such as Image Quality Selector, Layer Selector and Smart Selection. Within minutes, you will find yourself making remarkable transformations, showing what your new design will look like, for example, on a tablet or smartphone lying on your client’s desk. Magic Mirror makes it happen.

Don’t forget to drop us a line to find out what kind of magic we can work for you.

Smoothing the Handoff from Design to Dev

Smoothing the Handoff from Design to Dev

Photo by Charles Deluvio on Unsplash

One of the most critical stages in the process of creating a website, feature or app is the handoff from design to development. If the design team fails to prepare for the handoff correctly, much of the beauty and efficiency of their design can get lost in translation. So let’s take a good look at a few best practices to ensure that developers have everything they need to build what the designers have envisioned.

Use apps to help with the handoff

Here are a few apps that help with one or more aspects of the design-to-dev transition:

Lingo

You might want to consider moving your image files out of their numerous independent folders, where they can get lost, and into Lingo. With this visual library app, you can search, track, organize, browse and above all share your visual assets more efficiently.

InVision’s Inspect

If you’re building a mobile app, Inspect will help you achieve a “pixel-perfect” design handoff for both iOS and Android.

Sympli

This design-handoff tool has plugins for both Sketch and Photoshop. Once enabled, the Sympli plugin will automatically create specs, style guides and visual assets for you to share with the dev team. Sympli also has plugins for Android Studio and Xcode, as well as a standalone web app.

Zeplin

Zeplin is a design sharing tool that streamlines the entire design handoff process. The design teams at Slack, MailChimp, Pinterest, Starbucks and Shopify (just to name a few) all use Zeplin.

Use a version control system

When we think of version control systems, we think of developers and Git. However, version control systems work wonders for designers as well. While designers can also take advantage of Git for their versioning, there are some dedicated design versioning tools, such as the widely used Folio. Whichever versioning platform you choose, don’t skip this key preparatory piece of the design handoff.

Only share the intended design

In the course of creating a site, feature, page or app, you’re bound to try out a slew of alternative approaches. It’s tempting to include those files with the handoff. At the very least, it shows how much thought you’ve put into the process. However, including all those extra files can draw attention away from the intended design and confuse the development team. So unless you’re undecided about the design and specifically want to offer the development team selections to choose from, then it’s best to leave the alternatives and earlier versions out.

Don’t forget secondary pages and screens

Without a meticulous handoff checklist and protocol, the handoff process will certainly have at least a few missing files. These generally won’t be pages and screens that belong to the primary user flow. Rather, they will be subsequent pages/screens such as the “forgot password” page/screen that it’s easy to overlook. All the same, they still need design treatments, and if they don’t make it into the mix, there will be trouble down the road.

Pay close attention to your copy

Be sure to have all of your copy carefully organized along with your screens. Moreover, the dev team needs to know the precise context, situation or trigger that will call for each piece of copy.

Perfecting the handoff

The design handoff is a critical stage in the process of creating a website, feature or app. If the handoff from design to dev gets flubbed, the end-user will never get to experience how beautiful or awesome the product could have been. Here’s the TL:DR version of your design-to-dev handoff best practices:

  • Use apps, like Zeplin, to help with the handoff
  • Use version control software, such as Folio, to keep all your versions in order
  • Only pass on the intended design, not alternatives and earlier versions
  • Don’t forget to include all secondary pages/screens
  • Pay close attention to the copy, as well as the context where each piece of copy will arise. If you’re able to incorporate all of these best practices into your design-to-dev handoff, you’ll begin to approach the ideal workflow.

 

Not to toot our own horn, but we’ve got the whole design and dev thing pretty locked down. If you’re the maker of a technical product or service, get in touch with us to find out how we can increase your visibility and improve your customers’ overall experience with our bold designs and strategies.

Sketchy Opinions: Featured Sketch Plugin – Craft by Invision

Sketchy Opinions: Featured Sketch Plugin – Craft by Invision

It’s no secret that we love the professional digital design tool Sketch. Not only is the UI incredibly simple to master, but there is a huge community of developers and designers that make a dizzying array of plugins, templates, and other Sketch goodies. In this regular feature of the HoA, we talk about some of our favorite Sketch add-ons.

When you want to visualize how the site you’re designing is really going to look and feel, generic placeholder content only goes so far. InVision’s Craft is a Sketch plugin that helps bridge that gap, pulling in real-life lists of unique text and imagery from a wide range of sources into your Sketch design.

How Craft Works

To get started, download and open the Craft installer. Click “Install Craft for Sketch” and open up the Sketch app. Right away you’ll notice a column on the right-hand side with three square buttons, each corresponding to a “panel.” Let’s look at each one.

The Duplicate Panel

The duplicate panel does quite a bit more than its name implies. It is here, for example, where you enter the number of items in a given list, select their spacing and choose whether your list will be vertical or horizontal. For the most basic case, you just select a pre-existing item in your mock-up, such as an image, then use the duplicate feature to turn it into a list of duplicate images. However, Craft’s duplicate feature shines when you start with an item generated by Craft’s image panel or type panel (see below) and thereby create a list of unique items from it. In other words, the most powerful use of the duplicate panel is to build a list of unique, real-life, non-duplicated content.

The Image Panel

The image panel has four tabs, allowing you to import images from a personal folder, Dropbox, Unsplash or the Web. For example, you could select the “Unsplash” tab, navigate to the Mountains category, and watch Craft instantly insert a list of images of various mountains into Sketch.

The Type Panel

Of Craft’s three panels, the type panel is the most sophisticated and powerful. There are two tabs: “Samples” (the default) and “Web.” The Samples tab (in conjunction with the duplicate panel) generates a list of unique items from any of the following categories to populate your design:

  • Names
  • News Headlines
  • Articles
  • Dates
  • Countries
  • Cities
  • Currency
  • Emails
  • Addresses

Craft gives you a remarkably high degree of fine-tuned control over these types and the lists of unique items they generate. The Currency type, for example, allows you to choose the type of currency (e.g. dollars), the general price range you’re looking for and the number of decimal places. Topical types (or categories), like Articles and News headlines, let you drill down to the specific topical sub-category or niche your design requires. You can even add your type, like your favorite travel destinations, to the menu to insert whenever you wish.

The type panel also allows you to change a list’s type while preserving its formatting and other settings. For example, suppose you have a list of unique medical news headlines, and you want to change it to a list of individual cities. The type panel allows you to change Headlines to Cities while keeping everything else (the number, the spacing, etc.) the same.

The type panel’s “Web” tab is perhaps Craft’s most remarkable and underutilized feature. It’s essentially a browser window that allows you to navigate to a page that has the list of items you’re looking for (such as a list of smartphone brands). Once you click on any item in the list, Craft will recognize the complete list and import it into your Sketch design. The imported list will automatically adopt all of the formatting that you’ve chosen for your lists while shedding the formatting from the site.

What Makes Craft Awesome

With a generous suite of intuitive features, InVision’s Craft saves you a ton of time while adding a touch of realism to your designs. By generating real-life content, especially lists of unique images and text, Craft adds yet another layer of power and convenience to the already robust Sketch platform. If you’re a fan of Sketch (and you should be), Craft is an ideal addition to your digital design workflow.

Contact us to learn more about using the power of Sketch and its plugins to create awesome experiences.

Battle Royale: Sketch vs. Adobe XD: Only the Strong Can Survive: Two Apps Enter, One App Leaves: Rise of the Design

Battle Royale: Sketch vs. Adobe XD: Only the Strong Can Survive: Two Apps Enter, One App Leaves: Rise of the Design

Welcome to Battle Royale: Sketch vs. Adobe XD, where only the strong shall survive. Time to introduce our contestants.

Sketch

The first in the ring, Sketch is simple graphic design software, a robust, easy to use solution for creating, editing, and re-tooling graphic elements as part of a web page, mobile app, and other designs requiring an integrated, free-flowing layout. Created by the Bohemian BV team based in Netherland, by artists for artists, Sketch is less than a decade old and addresses many of the self-created and self-perpetuated issues caused by traditional design software, such as the demarcation between vector-based software concerned with shapes and the ability to edit images bit-by-bit. What Sketch does, and does really well, in an innovative way, is to allow artists to move from start to finish on complex designs which utilize multiple images and image types while planning and modeling their images, using those tools and only those tools they need to do the job they know they need to do.

Adobe Experience Design

And here comes the challenger. Oh it’s them again. Sorry, Adobe has, shall we say, a certain reputation in the industry. By certain reputation we mean one of taking ideas which seem good on the surface (generally because someone else came up with them), repackaging those ideas in attractive containers and then selling a stripped-down but very attractive version for a lot of money. Whenever you see one of the ever-increasing suite of new Adobe apps on offer, you might want to have this thought in the back of your mind. Why are there now ten subtly different graphic design programs with slightly different names?

Chances are, if you are in the industry, you’ve already been thinking ahead, thoughts like wow, Sketch is a really good UI. It works well, and it is affordable. I wonder how long before Adobe makes something very similar as a way to keep users in the Creative Cloud annual subscription net, from which there is No Escape. Not really, but it can seem that way at times.

Right, Adobe Experience Design. It’s pretty much a streamlined version of existing Adobe software made to model software like Sketch which allows for prototyping and moving between objects, because as Adobe has discovered by watching the market, this is something its users would like to be able to do more easily. Because they have jobs that require them to do so.

There, we have set the stage for this latest bout between Adobe and that other app manufacturer, in this case Sketch. Who will survive? (We shall do our best to be fair to both sides.)

Features

When it comes to features, there is no contest. In the words of ZD Net, “At this point it’s also a minimal viable product: the list of things it can’t do that it should do — and probably will do — is far longer than what it can actually do at this point.” The Adobe XD currently available on the market is listed as a preview version, which is just as strange as it sounds. It does not even claim to have all the features it could or should. Missing features include being able to easily access all its available features or even a list of those features, because the interface is streamlined to the point of having virtually no tool bar. In that way, it’s a little like that friend who owes you money and if you ask about it, they have an explanation so good you want to believe them, but you really don’t.

For now, Adobe XD lacks key features like the ability to preview fonts and animations, or to create and edit style guides throughout the page. In other words, if you are thinking about using the preview version to get actual work done, you probably shouldn’t. But, those features are coming soon. They promise. What is really strange about all this, by the way, is that usually software released to the general public for feedback pretty much does all those things it is supposed to do. We just want to see if it does them well. Test users who wonder if those features will ever be available should remain wary.

Cost

All right, so as of late 2016/early 2017, you can download a trial version of Adobe XD for free to try out and be their Beta tester. We can only guess, and it is a pretty good guess, that once released Adobe XD will be subject to the same price models as existing software, which cost more for a single year than Sketch does to buy once – and then you’re done. It is yours for life. Again, there is no real contest here.

Availability

It probably says a lot that on initial release Adobe XD was available only on Mac, although it is now available for Mac and PC. In this category, well, if you are professional graphic designer, you are probably using Mac already and if not you have other (possibly better) options. In this one category, pending an actual, final release of this product on both platforms, it looks like Adobe XD could be the winner.

Final Result

Maybe it isn’t fair to judge Adobe XD before it’s final release, but we really can’t afford to wait. Web development is happening now, and we need reliable, usable software to get the work done now – not in the promised future yet to come. As of now, Sketch is the clear winner. We’re just going to come out and say it. If you are involved in web design or in mobile app design, if you’re running on the Mac OS, and if you are looking for the right software to get those design prototypes up and running, then Sketch is it. No contest.

What do you think? What software do you use? Are you thinking about changing? Let us know.