<![CDATA[ Svbset ]]> 2017-07-24T15:52:39+00:00 https://svbset.com/feed https://svbset.com/issues/3/overcast-gets-a-visual-refresh <![CDATA[ Overcast gets a visual refresh for iOS 10 ]]> 2017-05-22T07:47:00+00:00 2017-05-23T09:29:41+00:00

Overcast is an immensely popular podcast app for iOS with over 12,500 reviews and an aggregate rating of 4.5, plus thumbs-ups from The Verge and others. Marco Arment, who is also the cofounder of Tumblr and creator of Instapaper, documents the process in detail:

I designed Overcast 1.0 in 2014 for iOS 7, and it was a product of its time: it used ultra-thin text and lines against stark, sharp-edged, full-screen white sheets and translucent blur panes, with much of the basic functionality behind hidden gestures. That fundamental design carried through every update until today... I’ve been working on [the update] since last summer, informed by over two years of testing, usage, and customer feedback.

Arment shows the before and after of most of the key screens, along with his reasoning for each of the changes; and it's worth a read.

]]>
https://svbset.com/issues/3/invisible-creature-seattle <![CDATA[ Invisible Creature, Seattle ]]> 2017-05-22T07:47:00+00:00 2017-05-22T16:47:23+00:00 Last year, Don and Ryan Clark celebrated 10 years of Invisible Creature -- their multidisciplinary design and illustration studio. Over that time, Invisible Creature has received four Grammy nominations for music packaging, and has worked with clients such as Target, NASA, Lego, Nike, Wired Magazine, The New York Times, Adobe, Xbox, MTV and more.

The brothers work out of their barn studio located 30 miles east of Seattle. Their workspace is perhaps the best reflection of who they are and what Invisible Creature has evolved to represent.

All photos courtesy Don and Ryan Clark.

]]>
https://svbset.com/issues/3/writing-axiomatic-css-with-lobotomized-owls <![CDATA[ Writing axiomatic CSS with lobotomized owls ]]> 2017-05-22T07:47:00+00:00 2017-05-22T09:53:32+00:00 Issue 406 of A List Apart introduced what is now called the “lobotomized owl selector” -- a powerful but simple CSS construct for reducing code bloat, speeding up development and simplifying the styling of dynamic Web content.

What does it look like, you ask? Just this: * + *

Built on the principle of exception-driven design, you can use this selector to specify universal rules regarding flow and layout, and then write exceptions as required. This becomes tremendously useful for grid-based designs.

Even the most complex systems must depend on foundational rules, and CSS is no different. Although modularisation of a complex interface is a necessary step in its maturation, any interface that does not follow basic governing tenets is going to lack clarity.

Highly recommended, even if you consider yourself an experienced frontend developer.

]]>
https://svbset.com/issues/3/air-bonsai-by-hoshinchu <![CDATA[ Air Bonsai by Hoshinchu ]]> 2017-05-22T07:47:00+00:00 2017-05-23T09:31:49+00:00 Unique, floating bonsai ranging from elegant flowering plants to delicate mosses to bold pines, created on the island of Kyushu, Japan. You've not seen anything like this before, guaranteed.

]]>
https://svbset.com/issues/3/chromeless-interfaces-and-the-future-of-gui-design <![CDATA[ Chromeless interfaces and the future of GUI design ]]> 2017-05-19T07:30:00+00:00 2017-05-23T11:34:57+00:00 It’s a trend we’ve been seeing in industrial design -- displays are going bezeless.

First TVs went almost bezeless, and with the Galaxy S8 announcement last month, Samsung is carrying forward that philosophy into mobile as well. Apple may follow suite soon.

The rationale here is that the bezel or frame which holds together the display unit does not serve any other purpose to the user, hence is “chrome”. Minimising (or altogether eliminating) it enables more content to be displayed without physically increasing the size of the display. Applying this thought to interfaces would yield similar returns -- less interface chrome means more space for the content to shine through.

But this is nothing new. Interface designers have been balancing content and chrome since the early days of GUI design. We know the old adage -- reduce interface chrome and make the content the interface. Or as Edward Tufte said, “The information is the interface, not computer administrative debris.”

A good example is Netflix, on past iterations of their app.

On the left, you can see chrome in the form of ratings, unnecessary buttons, filters and other panels; which were removed in the later version on the right. Luke Wroblewski has documented how Netflix applied NUI principles to simplify their interfaces.

One of the earliest examples of near-chromeless GUI design deployed on a mass scale were Windows Phone 7 apps designed with the Microsoft Design Language (formerly Metro or Modern style). Debuting way back in October 2010, Microsoft Design Language was heavily influenced by the International Typographic Style and its underlying principles -- use of grid systems, clear typography, vibrant colours and objective imagery.

Instagram's Windows Phone app from 2013

Minus the blue bar at the bottom, there is almost no chrome at all. Instagram treats the content as the interface which you can directly manipulate via taps, scrolls or gestures. This is standard practice today, but was not the case back in 2013. This was chromeless design at its best, and it looked and felt ahead of its time.


Too far a leap

Chromeless interfaces are inherently minimalist, and so are synonymous with flat design. And Microsoft became the biggest evangelist for this chromeless + flat philosophy for the better part of the last decade. This philosophy was then applied across a range of devices from phones and tablets to game consoles and desktops; and Microsoft attributed this impressive plasticity to its treatment of content as the interface.

But it wasn't without its share of problems, and the biggest criticism of chromeless interfaces and flat design was that usability suffered.

Microsoft in particular experienced severe backlash. Without traditional menus and manipulation controls visible at hand, and visual cues like shadows that signified depth on a two-dimensional medium; users struggled to find their way around.

To get a sense of what this means, consider smartwatch interfaces today. The extremely limited screen estate means controls have to be out of sight. These watches have similar functionality but wildly varying means of invoking them, which is problematic for consumers.

Image by Luke Wroblewski

They demonstrate that chromeless interfaces take some getting used to because they rely heavily on muscle memory, as Luke Wroblewski observes in The Invisible Interface:

When there's no graphical user interface (icons, labels, etc.) in a product to guide us, our memory becomes the UI. That is, we need to remember the hidden voice and gesture commands that operate our devices. And these controls are likely to differ per device making the task even harder.

Microsoft was designing to bring about the future, but it didn't account for the reality of the present -- consumers were not ready for such a leap. Yet.


Pragmatism and tradeoffs

Microsoft's digital purity gave way to Google's pragmatism. Circa 2014, Material Design corrected all the usability problems of the chromeless + flat philosophy by establishing a unified framework for interface elements like menus, modals, tab bars, input elements and other such chrome; and marrying it with the Flat 2.0 aesthetic that was gaining popularity at the time.

The reception was unanimously positive -- designers and technologists everywhere were aflutter with praise for Material Design.

Kitchen Stories, a well-designed Android app

In fact, Microsoft, the pioneers of “authentically digital” design recently showcased their Fluent design system, the successor of Microsoft Design Language used across Windows 10. In terms of an interface framework and its treatment of chrome, it seems identical to Material Design.

Groove Music, designed with an early version of Fluent

This is where we stand at the moment. Design sensibilities have hit a plateau. We have established patterns and guidelines for design across devices and product ecosystems. Apple, AirBnb, Facebook, Google, Microsoft and other big companies influencing product design today seem to agree that absolutely chromeless interfaces are not practical -- at least for the moment. Product design has become homogenous, and that's not necessarily a bad thing.

But what does the future hold?


Gazing into the crystal ball

Kirill Grouchnikov has been documenting interfaces from sci-fi films since 2011 at his blog Pushing Pixels. From Prometheus to Oblivion to Iron Man to Tron: Legacy and others, he calls them fantasy user interfaces (FUI).

VFX reel from Cantina Creative, an agency that created FUIs for many popular films

Another interesting take on interfaces of the future comes from Microsoft’s Future Vision videos. As the name suggests, they offer a glimpse into the future of technology through Microsoft’s rose-colored glasses.

Microsoft's latest Future Vision video from 2015

It’s easy to dismiss these as marketing gimmicks or just wishful thinking. But this future may not be very far away. And looking closely at these interfaces, two things stand out at once.

They're almost entirely chromeless.
They are visually flat, or almost flat.

Interface chrome seems to be minimal -- limited to button groups and simple menus. Most interactions are happening via natural language and memorised gestures. Considering this future becomes a reality, the logical question is: how would users figure out how to use these interfaces?

Well, it's established that each subsequent generation understands affordances through experience and expectation. Andrew Coyle explains this succinctly:

The pinch and zoom interaction on a mobile map is not inherently intuitive. Users learn it once, perhaps by accident, luck, or word of mouth, and it is forever ingrained in their minds. This type of interaction is discoverable because it is built upon the expectation that a user can zoom in on a digital map. Before mobile touch-screens, users clicked a zoom button on maps that were rendered on a web browser. The prevalence of this possibility presents the expectation in other contexts, which allows the cue to fade away.

Digital affordances, unlike their real-world counterparts, are continuously evolving. In fact, Apple is a company that is generally cautious about following trends, but even they made many bold moves in iOS 7; one of which was button styling. Apple's designers seem to agree that a button today doesn’t have to look like a real-world button with drop shadows and bevels. There only has to be some visual cue that explains its interactivity.

iOS button styles: iOS 6 (right) to iOS 7 (left)

It's almost certain that interaction patterns will evolve past the taps and gestures we use on our devices at present. For example, Siri can do a lot and the Amazon Echo has already demonstrated the potential of natural language recognition. A simple phrase like "Ok Google" allows for a lot of visual chrome to be hidden and kept accessible on-demand. So future interfaces could display purely content and reveal chrome when requested via natural language, gestures or even specific hardware peripherals.

One good example of the last category is Microsoft’s Surface Dial, a controller that allows users to customise and navigate interfaces on the Surface Studio.

Interface design is far from mature, and that’s precisely what makes it so intriguing and rewarding:

Digital technology will always outpace mainstream’s societies understanding of it. The goal of design is to simplify technology’s trajectory by developing a story around it that users can understand.

As product designers, we're all playing a part in telling that story.

]]>
https://svbset.com/issues/3/gather-by-ugmonk <![CDATA[ Gather by Ugmonk ]]> 2017-05-22T07:47:07+00:00 2017-05-22T07:47:07+00:00 A workspace organiser meant to reduce clutter. Beautiful and minimal, in true Ugmonk fashion. Completely killing it on Kickstarter at the moment!

]]>
https://svbset.com/issues/3/building-something-new-first-understand-the-problem <![CDATA[ Building something new? First understand the problem ]]> 2017-05-22T07:47:00+00:00 2017-05-23T09:54:10+00:00 Julie Zhuo reflects on lessons learnt building products at Facebook, starting with framing the problem and solution, execution, measuring success and managing a team. Some insights:

The first step in building something new is understanding what problem you want to solve, and for whom. This should be crystal clear before you start thinking about any solutions.

What typically separates successful and unsuccessful teams is not whether they do things that fail (this is guaranteed), but how well they can consistently execute.

Define what success metrics look like for your product before you launch. Otherwise, if you try to interpret results after they start coming in, confirmation bias will lead to a non-objective reading.
]]>
https://svbset.com/issues/3/high-resolution-podcast-with-kate-aronowitz <![CDATA[ High Resolution podcast with Kate Aronowitz ]]> 2017-05-22T07:47:00+00:00 2017-05-23T11:19:23+00:00

One of the standout podcasts in recent times, High Resolution features Bobby Ghoshal and Jared Erondu interviewing some of the best contemporary designers each week.

In March, they interviewed Kate Aronowitz, who was Design VP at Wealthfront. Before that, she was a Design Director at Facebook where she took their team from 20 to 200 world-class designers under Mark Zuckerberg.

Some (paraphrased) highlights from the episode:

07:50 -- “All companies should maintain both career paths for their designers -- to either progress as design specialists or get into design management, with equal pay for both.”

15:15 -- The tripod of product, design and engineering; and the role of each.

24:10 -- “Designers are often myopic and self-absorbed... No one cares about your illustration strategy unless you can show them how it translates into results for the business.”

25:25 -- The roles and responsibilities of a design VP versus design director.

31:46 -- Kate's “hockey stick” career path, and how she went from junior designer to design VP.

43:17 -- Designing the recruitment process at Facebook and scaling the design team from 20 to 200.

46:10 -- On mentoring Luke Woods and Julie Zhuo, both of whom went on to become VPs for design at Facebook.
]]>
https://svbset.com/issues/3/switch-by-native-union <![CDATA[ Switch by Native Union ]]> 2017-05-22T07:47:07+00:00 2017-05-22T07:47:07+00:00 A portable Bluetooth speaker, conference call device and mobile power bank, Switch allows you to wirelessly enjoy hours of unmatched sound quality experience.

]]>
https://svbset.com/issues/3/a-manifesto-for-small-product-teams <![CDATA[ A manifesto for small product teams ]]> 2017-05-19T06:56:59+00:00 2017-05-19T06:56:59+00:00 Mostly, we do things that haven't been done before, so don't be surprised when you're surprised.

Question premises and strategy.

Don't question goodwill, effort or intent.

Vintage Seth Godin.

]]>
https://svbset.com/issues/3/inspirocean <![CDATA[ Inspirocean ]]> 2017-05-19T12:51:00+00:00 2017-05-23T09:57:51+00:00 https://svbset.com/issues/3/gradual-engagement-beats-upfront-signup-everytime <![CDATA[ Gradual engagement beats upfront signup everytime ]]> 2017-05-22T07:47:00+00:00 2017-05-23T10:01:08+00:00 Luke Wroblewski evangelising gradual engagement:

Gradual engagement is the process of moving a user through an application or service -- actually engaging with it, and seeing its benefits. With gradual engagement, new users are not just presented with a registration form and then dropped off a cliff. Instead, registration is either postponed, or handled behind the scenes and the first time experience is focused on giving people an understanding of how they can use a service and why they should care to.

The article is around four years old, but apps like Airbnb, Meetup, Medium and others are still guilty of forcing registrations upfront.

]]>
https://svbset.com/issues/2/the-300-million-button <![CDATA[ Forced signups could be costing your client upto $300M ]]> 2017-01-06T13:03:00+00:00 2017-02-04T08:52:13+00:00 Circa 2009, UX guru Jared Spool recounted how his team helped a major ecommerce player improve their yearly revenue by a staggering $300,000,000. Back then, retailers would force users to create accounts prior to checkout because the advantages seemed obvious at the time -- faster future checkouts, product wishlists, saved payment options, delivery tracking and more. But Spool and team sided with the analytics:

The designers fixed the problem simply. They took away the Register button. In its place, they put a Continue button with a simple message: “You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.” 

This case study was also documented in Luke Wroblewski’s Web Form Design: Filling in the Blanks, and has since been referred to as the 300 Million Button. It is a reminder that any designer’s intuition, however strong, should never trump empirical evidence. 

]]>
https://svbset.com/issues/2/no-handoff-in-product-design <![CDATA[ There’s no handoff in product design ]]> 2017-01-06T12:45:00+00:00 2017-03-02T17:31:01+00:00 A slightly lengthy gem of a piece from Brendan Fagan for the Intercom blog on why our design process needs to mature past the “design handoff” or “freeze”:

Many designers compartmentalise building a product into two distinct parts – design and development. This distinction is one of the most dangerous traps a product team can fall into. When design is seen as a satellite that orbits engineering, it usually comes crashing back to earth.

Lots of agencies and creative boutiques still work this way.

Design specs are tossed over the back wall for an external team to build. You’ll be lucky if you ever meet them face to face. Luckier still if the product ends up resembling anything close to what you designed.

He then dives right into what product designers need to understand before they begin design -- understanding constraints early, and designing with engineering in mind -- before finally sharing the actual process Intercom uses to build its product.

Illustration by Intercom
And remember that for a modern product team, what matters is what ships. So embrace those who can turn your ideas into reality.

Nail on the head. Nothing beats the kicks you get from iteratively refining your interfaces through collaboration with real people.

]]>
https://svbset.com/issues/2/interface-design-tools-evolved <![CDATA[ Interface design tools, evolved ]]> 2017-01-26T08:11:00+00:00 2017-05-19T12:21:14+00:00 As product designers today, we've come to expect a lot more from our tools than just pushing pixels around. We heard the warning shots fired when Sketch overtook Photoshop as the primary tool for interface design in Khoi Vinh’s 2015 survey, and Sketch’s ecosystem has since grown to make it a natural choice; given how closely it ties in with the rest of the product development workflow -- namely creating prototypes, enabling handoff to development, version control and more.

Compared to the past few years, the explosion of new tools in 2016 promises to give product designers plenty of options going forward. Let’s take a brief look at each of these options and examine their value propositions vis-a-vis Sketch, the current workhorse.

All the tools that came to the fore in 2016 can be categorised into one of the following:

  • Standalone apps -- Figma, Subform, Adobe Experience Design and Affinity Designer
  • In-browser site builders -- Webflow
  • Ecosystem extensions -- Abstract and Picnic

Figma

The big news in 2016 was Figma -- nobody expected an interface design tool that was browser-based, collaborative and real-time. Dylan Field and Evan Wallace announced it in December 2015 along with $18MM in funding from Greylock, Jeff Weiner and others.

Figma’s trump card is collaboration, which is perfect given that product design is inherently an iterative and collaborative exercise. If you are a  designer working in a team, you’d typically have to get hold of the required assets for a new project, then create and upload previews of your designs to a platform like Invision to get internal feedback, plus maintain a history of changed files.

Figma users need not be fazed. Just like Google Docs, your .fig file is stored securely in the cloud. You need not worry about tracking changes. Comments can be placed virtually anywhere on an artboard. And since it is all browser-based, you can access your files on a Mac or PC via a simple URL.

Since version 1.0 was publicly announced along with macOS and Windows apps, Figma has received a ton of praise. But it is not perfect by any means. Questions remain unanswered about other aspects of the design process like prototyping, animation and developer handoff. Pricing is also a concern, and it seems like it will most likely go with a monthly subscription model. Users have also reported that offline usage tends to lag, and performance in general suffers on a slow network connection.

But given these are very early days, the future looks promising. For those interested, Meng To has written a handy comparison of Figma and Sketch.

Adobe Experience Design

Built to enable “design at the speed of thought”, Adobe Experience Design (XD) comes across as a combination of a raster and vector graphics tool, with the basic prototyping and collaborative abilities of Invision.

Formerly Project Comet, the app is currently in beta and is available as a free download for both Windows and macOS. Like Figma, Adobe also believes collaboration is an important part of the modern design workflow, so XD makes it possible for multiple stakeholders to participate in real-time -- senior designers and clients provide feedback and signoff via comments, developers can also get specs right from the app itself. Plus designers can create video recordings of prototypes or share a link to an interactive prototype hosted on Creative Cloud. While Sketch relies on third-party support for prototyping, XD lets designers define flows, triggers and transitions within the app itself. Plus, XD is part of the Creative Cloud, so designers can expect it to work well with other CC apps like Illustrator and Photoshop. 

There’s new leadership now at Adobe, new faces (including Khoi Vinh, who is currently Principal Designer), and hopefully a new approach to building products. XD is work in progress, and Adobe has an impressive vision of how they want XD to mature.

Adobe has been indecisive in the past with many promising projects like Fireworks and the Edge suite, and given the Beta tag that XD currently sports, it is not surprising some are a little sceptical. But for the 500,000 designers reportedly using XD at the moment, Adobe is busy pushing updates on a monthly basis; with a mix of new features, enhancements to existing features and bug fixes.

Affinity Designer

Affinity Designer has quickly built a formidable reputation as an alternative professional graphic design app to the Adobe Suite. Having already secured the coveted Apple Design Award, and thousands of 5 star customer reviews on the Mac App Store; Affinity has now set its sights on UI and UX designers as well.

Compared to Sketch, which is marketed primarily as a UI design tool; Affinity Designer seems more like a Swiss army knife -- capable of delivering for both print and screen, across a variety of disciplines like branding, icon design and illustration, and most recently, UI design too. So startups with growing design teams that find the Adobe suite a little expensive now have an alternate. Designer costs just $49.99 one-time.

As such, a few advantages of its multidisciplinary nature quickly become apparent. For starters, you get the now customary Symbols feature just like Sketch does, but also a Constraints feature that allows designers to specify how the interface should respond to varying viewports or similar limitations.

Advanced typography options seen in Adobe Illustrator and missing in Sketch can also be found in Affinity Designer, and this means designers can take advantage of OpenType support -- ligatures, swash, titling and contextual alternate glyphs, lining and oldstyle figures, and more.

One feature lacking in Designer is some sort of handoff mechanism to developers once the design phase of the project is complete. Sketch leads the race here with excellent third-party support for Zeplin, Invision Inspect and Measure. So keep this mind before considering Designer for your next project.

Subform

The unique characteristic of Subform is that it identifies itself specifically for product design, rather than graphic design. Having been inspired by CAD and other 3D modelling tools, it will -- according to its founders Ryan Lucas and Kevin Lynagh -- eventually be able to fully understand the designer’s intent, which every other tool currently ignores.

Subform raised $112,651 through its Kickstarter campaign in November 2016 and is available on invite-only basis, so not much information is available at this point. It is being touted as a power tool for master product designers, as opposed to the Swiss army knife philosophy of Affinity Designer.

Let's quickly revisit the earlier point about understanding designer intent, as it is quite intriguing. For example, Sketch cannot differentiate between a regular button and a Floating Action Button (from Material Design). But designers can get Subform to identify a FAB and position every such instance precisely 20px from the bottom right of each screen. This itself is a step ahead of anything out there at the moment.

There seems to be meticulous thought put into its core features. Its shared components seek to provide balance between consistency and contextual variation, it accounts for viewport constraints, it can save an unlimited number of states, pull in real data while designing, and much more.

Subform seems to embrace large-scale product design projects in an agile environment, where change is constant and any available time be spent on design and maintaining consistency, rather than fighting your tools. This is definitely one tool to keep an eye on.

Webflow

Product designers who code swear by the immediate impact a functional HTML prototype has over static comps. All current UI design tools add a necessary outer layer over the actual product, letting you interact with either static images; or stringing them together and adding transitions (like Invision and other advanced tools like Framer and Atomic do). This output is still a model of the product and not the actual product.

Enter Webflow -- part design tool, part CMS, part hosting platform.

For starters, designers can specify layouts using the CSS box model, flexbox or floats, then add content and style it with media, colour and typography. Webflow also provides templates similar to Virb or Squarespace for those who don’t have a lot of time. Any element on the UI can be specified as a Symbol, and can be used repeatedly via CSS-like styling hooks.

Web design tool + CMS + production environment

The second part of Webflow is a CMS that allows content editors to add content via custom fields, and then bind these fields to the layout that designers create. Webflow also provides webhooks -- custom actions that are triggered when something is added, updated or deleted; if developers need to do some heavy lifting like background services.

And finally when the site is ready to be launched to the intertubes, developers can use Webflow’s integrated hosting platform to publish. Webflow relies on Fastly and AWS to deliver your site files to visitors anywhere in the world.

So whether you’re a designer, developer, client or content manager working on said site, you have a single place to sign in and do your thing. There is nothing stopping you from doing all of this simultaneously.

As its name suggests, Webflow is only suited for Web-based, content-centric responsive design projects. Its target audience is non-technical users (especially designers) that need to have a site up without learning code. The design community has been crying out for a Web-based design tool for years, and Webflow doesn’t just embrace the fluidity and constraints of the Web -- it is built on top of it. It already has over 250,000 users on the platform; including enterprise clients such as Groupon, Hewlett-Packard, IBM, Mastercard, Pinterest, MTV, and Hitachi.


Abstract & Picnic: Sketch hits back

Let's not forget the reigning emperor of product design tools. Bohemian Coding understands its user base well, and its flagship product has matured nicely over the last couple of years. Sketch’s interface has become the standard, with most of its competitors choosing not to reinvent the wheel.

Having seen all the big guns the would-be competitors are bringing to the fight, 2017 could be an important year as Sketch tries to cement its place as the tool of choice. The most likely changes would be improvements to Sketch Cloud, first-party version control, even better style management and more. Sketch 42 is just out the door, with a new Export Presets feature among the usual bug fixes and stability improvements.

More importantly however, a couple of plugins from its exemplary developer community seem to be already propelling Sketch forward with gusto. Meet Abstract and Picnic

Abstract finally brings the power of Git to Sketch

Abstract was the brainchild of Frank ChimeroJosh Brewer and Kevin Smith; and today has Tim Van Damme and others onboard as well.

As of the time of writing, Abstract is in private alpha; so we can only speculate about how it would work. After making a bunch of changes to your Sketch file, you hit a key combination which calls a Mac client -- similar to the kind Zeplin has -- to document your changes and push it to a repo. You could also possibly create branches or anything else Git allows.

The primary advantage of Abstract is designers’ familiarity with Sketch -- and continued access to all the other extensions and integrations the ecosystem provides. And Git is a battle-proven version control system. This combination seeks to eliminate ambiguity about who made changes to the document, what was changed and where the changed files can be accessed. If if you and your design team's primary issue with Sketch has been intra-team communication and workflow, Abstract could be your balm.

Update, 03 March:  In an interview with Khoi Vinh, Abstract CEO Josh Brewer has pretty much confirmed these assumptions, and has given a lots of details behind Abstract's magic.

Picnic is the Sketch ecosystem clearly pushing back at Figma's multiplayer collaboration. It promises to put Sketch's Pages panel on steroids using Dropbox or Google Drive -- allowing designers to share a file with their team and all simultaneously work on it. Like Abstract, Picnic is also currently being put through its paces in private testing.

We could easily see this tag-team -- Abstract and Picnic -- becoming the biggest assets in the Sketch arsenal.

In conclusion

With its simple interface focussed on UI design, a performant and constantly improving product, a huge ecosystem of third-party plugins and integrations that never fails to surprise -- there are so many things Sketch gets right. It is most likely to remain the industry favourite for at least another year. The competitors will not go down without a fight, though.

The uphill climb toward feature parity will eventually plateau out leaving behind an almost-homogenous bunch of tools -- just look at what has happened with AWS, Azure and Google in the cloud space. At such a point, choosing between them would almost certainly be a matter of personal preference.

In the end, it is us designers who stand to benefit from all this competition. The future looks very interesting.

]]>
https://svbset.com/issues/2/stagg-ekg-by-fellow <![CDATA[ Stagg EKG by Fellow ]]> 2017-01-06T19:10:00+00:00 2017-03-10T09:40:32+00:00 Designers and coffee connoisseurs alike should back this Kickstarter campaign for a modern, minimalist take on the traditional electric kettle. Pledge now to save big on the retail price.

]]>
https://svbset.com/issues/2/aesthetics-is-but-one-aspect-of-design <![CDATA[ Aesthetics is but one aspect of design ]]> 2017-01-06T12:41:00+00:00 2017-02-28T16:55:20+00:00 John Gruber defending Apple’s design decisions after one of the most talked-about events of 2016: the launch of the iPhone 7:

With a highly successful product and brand, new versions need to strike a balance between familiarity, the foundations of the brand, and hot newness.

Coming at a time when most of the press were criticizing Apple’s “stale aesthetics”, pieces like this are essential reading, regardless of whether you design brand, interfaces or physical products:

Iconic brands don’t zig-zag. They move forward with seemingly inexorable momentum. Their evolutions often feel inevitable, not surprising. Weak brands move like ping-pong balls; strong brands move like bowling balls. A new Rolex needs to look like a Rolex. A Leica needs to look like a Leica.

Great products never change for change’s sake. If you’ve figured out better solutions to existing problems, then yes, by all means. But realign, don’t redesign.

]]>
https://svbset.com/issues/2/designers-guide-to-using-grunt <![CDATA[ Designer’s guide to using Grunt ]]> 2017-01-06T12:58:00+00:00 2017-02-28T16:55:27+00:00 If you’re a designer who codes, you’ve probably heard of task automation tools like Grunt and Gulp. And if you’ve shied away from these after seeing words like “Node.js” or “command line”, do not fear. Chris Coyier has put together this excellent primer to help you get started.

Use Grunt to accomplish all kinds of boring, repetitive (but essential) tasks like concatenating CSS and JS, optimising images, cache busting with version numbers, generating image sprites and lots more.

Since the article is 3 years old, the part about installing Node.js needs an update -- don’t use the installer from the Node.js website, instead follow this article and use Homebrew instead.

Everything else is up to date, and brilliantly illustrated with screenshots aplenty.

]]>
https://svbset.com/issues/2/dodecal-2017-by-dodecal <![CDATA[ Dodecal 2017 by Dodecal ]]> 2017-02-04T09:35:00+00:00 2017-03-10T09:39:08+00:00 DodeCal is an innovative polyhedra calendar system, designed with mathematical precision and finished in high quality European sycamore. It’s unlike anything you’ve ever seen before.

]]>
https://svbset.com/issues/2/mark-zuckerbergs-jarvis-fuses-iot-and-ai <![CDATA[ Mark Zuckerberg's Jarvis fuses IoT and AI ]]> 2017-01-06T12:08:00+00:00 2017-02-04T08:45:45+00:00 One of Zuck’s personal goals last year was to create an AI system to run his home, just like Tony Stark’s Jarvis.

At a basic level, the system is built on top of Crestron smart home technology and lets him control everything from lighting to thermostats. But it goes way beyond — doors that open via facial recognition, toasters that toast on demand, even a t-shirt cannon — with Zuckerberg having written custom APIs to connect some of these to a set of interfaces that include a message bot and speech recognition. All this was done in Objective C, PHP and Zuckerberg’s language of choice, Python.

After a year of coding, here’s how Jarvis shaped up:

In some ways, this challenge was easier than I expected. In fact, my running challenge took more total time.

Oh Zuck, now you're just showing off!

]]>
https://svbset.com/issues/2/edge-cases-lack-empathy <![CDATA[ Edge cases lack empathy, think stress cases instead ]]> 2017-01-06T12:38:00+00:00 2017-02-04T08:46:04+00:00 Jeffrey Zeldman’s notes from CSS guru and Web Standards evangelist Eric Meyer’s AEA session on how even the most well-meant design decisions can sometimes go wrong for users. Case in point, Facebook brought up an image of Meyer’s deceased daughter Rebecca via its “Your Year in Review” feature:

Facebook didn’t build in those protections, not because they don’t care, but because our approach to design is fundamentally flawed, in that we build our assumptions around idealized and average users and use cases, and neglect to ask ourselves and our teammates, “What if we’re wrong? How could our product hurt someone?”

Further down:

When we label a usage an “edge case,” we marginalize that user and choose not to care. Think “stress case,” instead, and design for that human.

The entire article is gold. If you’ve ever thought what it means to design for human beings, this is it. Meyer has also fleshed out all of these principles in his book Design For Real Life, if you want to dive deeper.

]]>
https://svbset.com/issues/2/ustwo-london <![CDATA[ ustwo, London ]]> 2017-01-06T17:31:00+00:00 2017-02-28T16:56:01+00:00 Most designers know ustwo as the creators of the hit 2014 puzzle game Monument Valley, but they are in fact a product company with offices in London, New York, Malmo and Sydney.

Here are a few shots of their London office.

]]>
https://svbset.com/issues/2/eo2-by-electric-objects <![CDATA[ EO2 by Electric Objects ]]> 2017-01-06T18:35:00+00:00 2017-03-10T09:40:53+00:00 Bring the best of the Internet’s artwork onto your wall with this beautiful 23-inch second-generation display from Electric Objects. Designed to showcase digital art in a variety of frame options, it lets you turn your home into an art gallery.

]]>
https://svbset.com/issues/2/julie-zhuo-lessons-learnt-from-managing-facebooks-design-team <![CDATA[ Julie Zhuo: Lessons learnt from managing Facebook’s design team ]]> 2017-01-07T17:17:00+00:00 2017-02-04T08:55:24+00:00
Julie Zhuo: VP, Product Design at Facebook. Photo by Intercom.

Julie Zhuo’s meteoric rise within the ranks of Facebook is stuff of legend. Within just two years and five months of joining as a product designer, she began co-managing the product design team. But long before she was appointed VP of Product Design, she had to take the plunge into management.

Today, Julie is one of the most outspoken design managers in the world; well-known for her long-form pieces on Medium. Writing in hindsight, she offers practical insight into team management through the lessons she learnt the hard way.

One of the first things I now ask people when they tell me they are contemplating becoming a manager is this hypothetical question: Imagine you spend a full day in back-to-back 1:1s talking to people. Does that sound awful or awesome?

The first of a two-part series, it has since become one of her most read essays.

]]>
https://svbset.com/issues/2/inspirocean <![CDATA[ Inspirocean ]]> 2017-01-18T17:04:00+00:00 2017-01-29T14:26:30+00:00 https://svbset.com/issues/1/design-is-all-about-intent <![CDATA[ Design is all about intent ]]> 2016-09-03T05:24:00+00:00 2017-02-10T17:53:57+00:00 John Moran at Rampant Innovation breaks down what design is really about — intent. This brilliant article discusses how Apple values, teaches and celebrates design; and how that approach has made them the most admired technology company of our time.

He also discusses the implications of design without intent or purpose:

The opposite of design, then, is the failure to develop and employ intent in making creative decisions. This doesn’t sound hard, but, astonishingly, no other leading tech company makes intentional design choices like Apple. Instead, they all commit at least one of what I term the Three Design Evasions […] preserving, copying and delegating.

The third part about delegating is what is really interesting. On the issue of choice, Moran writes:

The banner of “choice” is always good PR, and may even be good product strategy for many companies. But it’s not design. Design means curating the choice for the consumer […] As an analogy, giving someone birthday money instead of taking the time to choose a gift seems eminently logical — why limit the recipient’s choices? But the gifts we remember most fondly are seldom checks.

And on the issue of A/B testing:

The final flavor of delegating is a favourite of Internet software and services companies: using A/B testing (or some variant) to see which designs elicit the best metrics from users […] This kind of user testing can be useful, but it’s not design. You can safely bet that Apple has never tested 41 shades of blue on users to decide the right color for its website links.

It’s an elaborate read, but definitely one that deserves a bookmark. And a re-read once in a while.

]]>
https://svbset.com/issues/1/everything-is-just-a-remix <![CDATA[ Everything is just a remix ]]> 2016-09-02T12:51:00+00:00 2017-03-02T18:11:13+00:00 Is anything in design and technology original any more? Of course, you may say, everything is; what a contemptuous question to ask! But think about it again, pragmatically.

Is anything today truly original?

What do we mean when we say original? Something arising or proceeding independently of anything else; something not borrowed heavily from predecessors. If such concepts or ideas do exist, they probably end up as epic failures; and never reach the horizon of public consciousness.

It was back in 2012 that Kirby Ferguson first told a packed audience at TEDGlobal to Embrace The Remix. Nothing is original, he said; everything revolutionary is just skilfully borrowed or stolen, and then transformed. Picasso, Dylan, Jobs — they were influential minds, they were great innovators, and they did precisely that.

Ferguson has also created a four-part video series: Everything Is A Remix. It’s worth a watch, especially the extra about the original iPhone:

So are we to believe this as true? Is everything around us just a remix, an improvisation of something before? How do “innovative” ideas come about?

Ferguson’s theory may sound like blasphemy to many, but an impartial analysis of some memorable ideas and products in design and tech from the last two decades would lead us to conclude that he is in fact correct. We could broadly categorize these under one or more of the following:


A concept that crosses over from another industry or medium

The idea for Twitter — one of the most used digital products of our time — resulted from a brainstorming session at Odeo about an SMS service for small groups: a dispatch service that connects people on their phones using SMS text codes. What started initially as a sort of instant group messaging with SMS evolved into the public status update that ended up stealing Facebook’s thunder.

Within the context of interface design, one of the big leaps forward came with Microsoft’s type-centric, pure-digital design language (then called Metro); which made its debut on Windows Phone 7. It was heralded as “innovative” and a “breath of fresh air”, but the language itself was inspired heavily by both public transportation signage as well as Swiss graphic design principles established decades earlier.

Design for apps on Windows 8 and Windows Phone 8 follows Swiss graphic design principles

Frank Chimero talks about artists and creators across diverse industries learning from each other in The Shape of Design:

The actor can learn from the painter about the emotive power of facial expressions. The painter from the designer, about the potential of juxtaposing images and words. And the designer from the poet, who can create warmth through the sparseness of a carefully chosen, well-placed word.

Be wary, though, of what you choose to use; because borrowing ideas or material from outside your industry might make you seem like an “innovator”, but doing the same within your own industry or medium might make you look like a follower or imitator:

The first successful implementation of a radical idea is usually and correctly lauded as the innovator. The second is derided as an imitator. But by the time you get to the third and fourth, the idea becomes a category.

Revolutionary aggregation or improvisation

Sometimes amazing things happen when the time is right, and all the factors necessary for a revolution come to a boil at critical moments in history.

Henry Ford did not invent the automobile. He didn’t even invent the assembly line. But more than any other single individual, he was responsible for transforming the automobile from an invention of unknown utility into an innovation that profoundly shaped the 20th century and continues to affect our lives today. He is also famous for downplaying his role in all of it:

I invented nothing new. I simply assembled the discoveries of other men behind whom were centuries of work. Progress happens when all the factors that make for it are ready, and then it is inevitable.

Maybe Elon Musk is the new Henry Ford. Tesla Motors has become a rage, and they deserve it. Their decade-long perseverance with Li-ion technology has even put auto giants like General Motors and Toyota to shame. It’s not that electric cars didn’t exist before the Model S, but Tesla produced something way ahead of its age.

Li-ion technology has been around for a while, but Tesla powered a supercar with it. Photo by Tesla Motors.

Here’s another illustration that is closer to home. Mashable called 2013 the Year of Responsive Web Design. Ethan Marcotte coined the term in his article on A List Apart in May 2010. The underlying technologies and components — fluid grids, flexible images and CSS media queries — were already in use then, but no one had yet tied it all together. Browser support for media queries too was so-so. But when Marcotte expounded on the theory and practice of RWD in his book of the same name, Web design would never be the same again.

Significant reduction in size, cost or effort

Sometimes, things are perceived as revolutionary because of significant lowering of cost or size of the technology concerned. Ben Thompson explains this vividly in Apple and the Innovator’s Dilemma:

Within ten years the hard drive industry moved from the 14-inch drives that had been used in mainframes to 8-inch, then 5.25-inch, then 3.5-inch drives […] Apple too rode a similar wave with the iPod, iPod Mini and iPod Nano; disrupting itself successively using changes in the exact same sort of media (storage) that felled market leader after market leader 30 years prior.

So we’ve hopefully established that it is very difficult to progress within design and technology without borrowing from predecessors. That being said, one important question remains.

How far can you go with a remix?

Where does one cross the line between remix and rip-off? How can we be fair to others and to ourselves? Are there any rules we can follow to successfully side-step the blank slate, yet avoid running over those who have paved the way before us?

Chimero delves a little into these issues in Chapter 3 of The Shape of Design, titled Improvisation and Limitations:

When we build, we take bits of others’ work and fuse them to our own choices to see if alchemy occurs. Some of those choices are informed by best practices and accrued wisdom; others are guided by the decisions of the work cited as inspiration; while a large number are shaped by the disposition and instincts of the work’s creator. These fresh contributions and transformations are the most crucial, because they continue the give-and-take of influence by adding new, diverse material to the pool to be used by others.
Lighting one candle with another. Illustration by Frank Chimero.

The problem is not everyone’s intentions are aligned with the intentions of the pioneer. Many choose to be selfish and take what they want without contributing anything. David Smith — while confessing frustration at the lack of an acceptable definition — gives his take on The Right Way to Copy:

Good copying learns from another’s innovation and then applies it in a novel way to a new context that doesn’t diminish the source invention.

The keywords there are novel way to a new context. This is why any self-respecting designer would find it difficult to defend, say; Samsung in its saga against Apple, or the many clones of hit games like Flappy Bird and Threes!.

Good copying as a progressive, non-destructive metaphor can perhaps be visualized as lighting one candle with another candle. Jim Jarmusch; an indie film director, actor and producer; sums it up best:

Steal from anywhere that resonates with inspiration or fuels your imagination […] Select only things to steal from that speak directly to your soul. If you do this, your work (and theft) will be authentic. Authenticity is invaluable; originality is non-existent. And don’t bother concealing your thievery. Celebrate it if you feel like it. In any case, always remember what Jean-Luc Godard said: “It’s not where you take things from, it’s where you take them to.”

So, go on then … Take stuff to the next level.

]]>
https://svbset.com/issues/1/clean-sheet <![CDATA[ Clean Sheet ]]> 2016-09-03T05:11:00+00:00 2017-02-28T17:07:14+00:00 If you enjoy good design as much as your favourite team at the FIFA World Cup 2014, you should get one of these colourful designer shirts from Clean Sheet. Starting at $22.50, use the checkout code FISHING to get an extra 30% off!

]]>
https://svbset.com/issues/1/what-makes-medium-so-fast <![CDATA[ What makes Medium so fast? ]]> 2016-09-03T05:25:00+00:00 2017-02-28T16:59:42+00:00 Jackson Mohsenin, a product designer at Quora, correctly outlines the technology stack behind Medium:

The main app is Node.js with nginx. They also use Java, one might guess for heavy-computational stuff. Redis is used as well, probably for recommendation / collection feeds. Medium relies heavily on AWS services; as they use EC2, EBS, S3, Route53, EMR, DynamoDB, SQS, CloudFront and SES. All their assets are being served via CloudFront.

He also exposes how successive articles in Medium load with almost zero delay:

Turns out, when you browse Medium, you never go to a new page. Medium simply loads the “page” into a new <div> in the container, sets the old page to ‘display: none’ and updates the URL and title.

Both these guesses were verified by Dustin Senos — one of Medium’s first product designers.

Those interested may want to read more about the Single Page Application model that Medium uses.

]]>
https://svbset.com/issues/1/virgin-americas-new-booking-site <![CDATA[ Virgin America’s new booking site ]]> 2016-09-03T05:11:00+00:00 2017-02-28T17:04:13+00:00 Brooklyn-based design startup Work & Co have created a bold new booking website for Virgin America. It doesn’t just look great and work smooth, it is fully responsive and is built mobile-first.

The date selection screen is particularly well-designed

What sets it apart from every other booking site I have used is that it doesn’t follow convention. Instead, based on the single page application (SPA) model, every segment takes over the screen — be it the calendar for departure and arrival selection, or the seat layout for seat selection. There are no overlays, no lightboxes and no page refreshes.

Here it is in action:

It isn’t everyday that a well-designed booking experience for a large corporation actually makes it through to production without getting watered down.

]]>