Tag Archives: design

Adobe announces extensibility for XD design and prototyping tool, integration with Microsoft Teams, Slack and Jira

Adobe XD (Experience Design) is a tool for prototyping apps and web applications. The full application runs on Windows and Mac, as part of Adobe’s Creative Cloud, and there are apps for iOS and Android that let you preview your designs on a device. Note that it is only a prototyping tool: you still have to re-implement the design in Android Studio, Xcode, Visual Studio or your preferred development tool. However the ability to create and share prototypes is a critical part of the workflow for many applications.

image

Adobe has now announced extensibility for XD via an API. This enables third-party plugins, which will enable “adding new features, automating workflows and connecting XD to tools and services,” according to the press release.

There are also new integrations with collaboration tools including Microsoft Teams and Slack, and Jira (Atlassian’s software development management tool).

The release emphasises that that Microsoft Teams is Adobe’s “preferred collaboration service”, showing that the company’s alliance with Microsoft is still on.

These are not the only tools which integrate with XD. Others were announced in January this year, including Dropbox and Sketch.

What do these integrations do? It is mainly a matter of rich preview within the tool, and the ability to receive notifications, such as when someone comments on an XD design.

Adobe has a generous free starter plan for XD. This includes:

  • Adobe XD
  • 1 active shared prototype
  • 1 active shared design spec
  • 2 GB cloud storage
  • Typekit Free (limited set of fonts)

You can get the free plan here, play around with the tool, and upgrade to the full plan (with unlimited prototypes) if you need to, at $9.99 per month.

Adobe Creative Cloud giveaway at Microsoft Build: sign of a new alliance?

At Microsoft’s Build conference last week, one among a number of giveaways to all attendees was a year’s subscription to Adobe’s Creative Cloud. This was announced by Developer and Platform Evangelism VP Steven Guggenheimer during the day 2 keynote.

image

Creative Cloud costs $49.99 (or £39 + VAT) per month for an individual subscription.

Guggenheimer in effect said that the gift came from Adobe; he suggested that “you guys should send them a nice email”.

The stated purpose of the giveaway is to promote the Digital Publishing Suite (DPS). Creative Cloud comes with DPS Single Edition, which lets you create rich, interactive magazine content and publish it to the iPad and Android. Announced at Build was DPS support for Windows 8.1 in “late 2013”; a sign if nothing else that Adobe is taking Microsoft’s tablet platform seriously.

The odd aspect though is that Build is a developer conference and not quite the right target audience for DPS. On the other hand, there are numerous tools in Creative Cloud that are well suited to developers, including the Edge web content tools, PhoneGap Build, and of course the mighty Photoshop for image editing.

Adobe’s Adam Lehman was interviewed at Build about the Creative Cloud tools, especially Edge, here.

Microsoft is no longer trying to compete with Adobe on design tools. Expression Web and Expression Design have been discontinued. The Flash versus Silverlight wars are also consigned to history, making it easier for these two companies to work together.

Microsoft’s Design Language – Tiles and Chromelessness – Prospects for Windows 8

Among the most illuminating sessions at Microsoft’s BUILD conference earlier this month was Will Tschumy’s presentation on the Microsoft Design Language.

Tschumy says that Microsoft began a new focus on design back in 2003 (think Office Ribbon). Then came Windows Phone and Metro (only he did not call it that), and now:

Microsoft is the only organization with a single, consistent design language across each screen we touch

he explained., noting that Xbox as well as the phone uses this same design language.

So what is it? The core idea, he says, is “content before chrome”. This is an old idea, which Google drew attention to with its 2008 web browser called Chrome – a playful title for something which properly should have been called Chromeless. Chrome sported a minimal user interface, putting the focus on the web content, and laying the foundations for web applications where the browser disappears and you forget that you are looking at a web page.

This is actually consistent with Google’s approach from its earliest days, when the Google home page was just a search box and a couple of buttons – a purity of design now spoilt by a menu bar and nagging ads, but you can still see it.

image

But I digress. What has Microsoft done with the concept? A good example is to compare the SkyDrive “Metro” app with the same folder in Windows File Explorer. Here is Skydrive:

image

and here is Windows File Explorer:

image

Or possibly:

image

if you are like me and prefer the “Details” view.

The point here is that the “Modern” SkyDrive app has a high ratio of content to chrome, and large icons which preview the content where possible make the content stand out, whereas in File Explorer there is more UI. Of course this is the Windows 8 File Explorer which is also influenced by the same design language. My Details view, which I like because I get higher information density, is closer to an old-style computer approach where the focus is on the number of bytes in the file above what the image happens to look like.

Mixed feelings them, but I do understand what Microsoft is driving at. Spend some time with Microsoft’s Surface RT – no, not on the desktop, on the Metro side – while using some of the better new apps and you begin to appreciate the idea.

Tschumy spelt out five design principles, though only three of these seem to be substantial:

  • Pride in Craftsmanship: fluff
  • Be fast and fluid: Performance matters
  • Authentically digital: not skeuomorphic
  • Do more with less: minimalism
  • Win as one: fluff

No mention then of the “signposting” inherent in the metro transport signs which gave Metro its now-forsaken name, and in fact discoverability is a weakness of Microsoft’s design language; it seems hard to create a UI that is both “content before chrome” and highly discoverable. The common functionality encapsulated in the Windows 8 Charms bar, where features like Search are handled by a UI that is the same in every app, is one attempt to fix this, though first you have to learn how to use the Charms bar. Note the number of users who thought the Wikipedia app had no search function.

There is also a visual aspect to Microsoft’s design language, which Tschumy does a good job of explaining. Align to a standard grid, he said, unless you need to deviate from it for good reasons.

image

From here we get the tiled look which characterises Metro and which certainly has merits; it tends to be clear though not always beautiful.

Understanding the rationale behind these design principles helps to make sense of new Microsoft products such as Office 2013 and Visual Studio 2012, both of which have been met with mixed reactions on the grounds that they look a bit washed-out, the user interface is hard to focus on. The thinking is that this helps the content, which is what you care about, to stand out more.

image 

That said, I am not convinced by this approach in the context of a productivity tool like Office or Visual Studio. You may care more about the content; but if you want to change the content, then you also care about the tools and want to find them quickly. Scroll bars that fade into the background are great, until you need to scroll the document.

It is also interesting to browse the sample templates in Excel 2013. I grabbed the above screen from there, which seemed to illustrate the design principle of content before chrome, but in other cases I notice that the designers have gone for a washed-out look in the content as well.

image

This makes no sense to me, other than that the designer, observing the fade-into-the-background theme in the chrome, decided to match the content to it in order to get a consistent appearance. Now you cannot see the content or the chrome – uggh! This is what happens when you try to get a very large company working together on a common but somewhat counter-intuitive vision; not everybody gets it.

Which brings me neatly back to Windows 8. I mentioned the Surface RT above; I will be writing more about this, but I do find it a delightful device and one which expresses the Windows 8 and Microsoft Design Language vision better than any other aside from perhaps a Windows phone – unfortunately I have not yet got my hands on a Windows 8 phone to review but hope to do so eventually. It is also a flawed device of course, partly because the performance is less than “fast and fluid” in some cases (like Excel), but mainly because the apps are lacking.

It does seem to me though that Windows 8 has great potential and brings something new to the tablet world. Unfortunately there is uncertainty about whether either Microsoft or its OEM and retail partners have the will and the vision to get past the current hump of unfamiliarity and immaturity for that potential to be fulfilled. Microsoft has spent eye-wateringly huge amounts of money marketing Windows 8 and Surface RT; but I do not think that money has been spent strategically, it has just been thrown at the usual agencies. Many are still flummoxed by what Windows 8 is for, and that is apparent even amongst the OEMs that are manufacturing and selling it.

What will now happen post-Sinofsky, the man whose balls of steel brought Windows 8 to market? In his memo noting the appointment of Julie Larson-Green as head of Windows engineering, Ballmer says:

Her unique product and innovation perspective and proven ability to effectively collaborate and drive a cross company agenda will serve us well as she takes on this new leadership role.

The highlighting is mine. A cross company agenda is exactly what Microsoft needs; but if the new Windows leadership is less determined than the old, it could equally easily pull apart rather than together.

Book Review: Smashing UX Design (a great read for developers too)

That the abbreviation UX can appear in a book title without expansion says a lot about the extent to which user-focused design is now embedded in the web development industry. The theory behind it is that User Experience is primary when designing a web site. The word "experience" suggests that this is not just about usability, or attractiveness, or performance, or enjoyment, but rather about all those things and how they combine when the end user is navigating your site.

image

This book is for professional designers who want techniques for putting UX design into practice. The authors, Jesmond Allen and James Chudley, work for UX consultancy Cxpartners, based in Bristol in the UK, and the book is written from their perspective, including tips on how to work with your clients. That said, this is an excellent read even if you do not fall into that niche, thanks to the expertise and professionalism which informs the content.

There is a note right at the start of the book about the interaction between development and design teams which seems to me of key importance:

In order to produce designs that development teams can utilize, it is helpful for UXers to understand the development process they will be using. As external consultants, we do not always have the opportunity to work with development teams on a daily basis as they create a functional product from our designs, although we always strive to make ourselves available to developers as they work. Internal UX staff will likely have a much closer relationship with their development teams.

Some developers may see UX activities as troublesome big design up front. However, UX activities contribute to requirements gathering and backlog prioritization activities. These activities typically take place long before development sprints begin.

In order to produce robust products, it is important that UX research and design activities take place throughout the design and build cycle, whether it is product managers, UXers, or developers who perform the activities.

The emphasis is mine. A bad scenario, for example, runs like this. The project is initiated and handed to a design team, who come back with good-looking sketches and mock-ups. The developers then implement the design, but discover that it does not quite work as-is, maybe because the designers did not appreciate every nuance of the workflow, or because of evolving new requirements, or performance problems, or any number of other issues.

At this point the developers may endeavour to match the not-quite-working design as closely as possible, blaming shortcomings on the “bad design”. Or they may adapt the design to work better technically, potentially wrecking the design concept and delivering something which users will perceive as odd. This scenario is more likely to occur when budgets are particularly constrained and the design team external.

Note that Agile methodology has always emphasized that the team is the whole team – stakeholders, developers, designers, users, everyone – so it makes sense to keep designers involved right through the process. Put another way, do not allocate a design budget and spend it all up-front, before development begins.

It all comes down to communication, respect and understanding between team members, which is why this book is one that developers as well as designers should read.

Be clear: this is not a book about technology, so look elsewhere (perhaps to one of the other Smashing titles) if you want help with making beautiful web pages using CSS, or a how-to guide for building web sites. Smashing UX Design is about the process rather than the outcome, though there are plenty of practical tips along the way.

The book is in four parts. Part one is a general introduction to the concepts behind UX design and planning UX projects. Part two covers tools and techniques for UX research and evaluation, such as running requirements workshops, usability tests, surveys, analytics, and expert reviews.

The third part is about tools and techniques for UX design. If you are wondering what an Ideation Workshop is, you will find out how to run one here. Another technique described is how to create a "user persona", a fictional user who represents a category of users. There is also a discussion of wireframes, sketches and prototypes.

Finally, the fourth part looks in more detail at UX design for specific site pages, including the home page, search, product pages, shopping carts, images and tables. This is the section of most general interest, being full of practical suggestions and thought-provoking comments on what makes web pages work well for the user.

There is a too-brief chapter on mobile UX and this is a weakness of the book: not much on how tablets and smartphones are impacting UX design.

If you run or plan to run a web design business, then the book is perfect. It is also a great read for professional web developers. Individuals who are doing their own web design, or just want to understand it better, will find good content here but also a rather jargon-heavy style and probably more information than they need about working with clients and running workshops of various kinds.

 

Review: Tapworthy – designing great iPhone Apps by Josh Clark

Developing for iPhone is a hot topic. Many developers are not only having to learn Apple’s Objective C and the Cocoa application framework, but are also new to mobile development. It is a big shift. Josh Clark is a iPhone designer, and his book Tapworthy is about how to design apps that people will enjoy using. It is not a programming book; there is not a single snippet of Objective C in it.

His book illustrates the power shift that has taken place in computing. In the early days, it was the developer’s task to make an application that worked, and the user’s task to understand how to use it, through manuals, training courses, or whatever it took.

There are still traces of this approach in the software industry, but when it comes to iPhone apps it has reversed completely. The app creator has to build an app that the user will find intuitive, useful and fun; otherwise – no sale.

An early heading reads “Bored, Fickle and Disloyal”. That’s the target user for your app.

Clark’s point is valid, and he does hammer it home page after page. You will get the message; but it can get tiresome. His style is frank and conversational: some readers will love it, others will find it grating after a chapter or two.

Even if you are one of the latter group, it is worth persevering, because there is a ton of good content here. There are also numerous short interviews with developers of actual apps, many of them well-known, discussing the issues they faced. The persistent issue: we’ve got a complex app, a small screen, and intolerant users, how on earth do we make this seem simple and intuitive?

Constraints like these can actually improve applications. We saw this on the web, as the enforced statelessness and page model of web applications forced developers to simplify the user interface. It is the same with mobile. Joe Hewitt, author of the first generations of Facebook for iPhone:

There is so much stuff that is actually better on the small screen because it requires designers to focus on what’s really important.

So what’s in the book? After a couple of scene-setting chapters, Clark drills down into how to design for a tiny touchscreen. Be a scroll sceptic, he says. Chapter 4 then looks at app structure and navigation. Chapter 5 takes you blow by blow through the iPhone controls and visual elements. Then we get a chapter on making your app distinctive, a chapter on the all-important start-up sequence and how to make seem instantaneous, and a chapter on touch gestures.

The last three chapters cover portrait to landscape flipping, alerts, and finally inter-app communication and integration.

Throughout the book is illustrated in full colour, and the book itself is a pleasure to read with high quality paper and typography. 300 pages that will probably improve your app design and increase its sales; a bargain.

 

Bill Buxton, Windows Phone 7 hits at Mix10, say attendees

I recall seeing conversations on Twitter about whether it is worth going to conferences, especially vendor-led ones such as Microsoft’s Mix10 which took place earlier this month. It’s expensive, it’s marketing, and many of the sessions are available for free online soon after they take place.

In that context it’s interesting to see some off-the-cuff comments from attendees about what they liked at Mix. Networking comes high on the list, something you cannot get from a distance. There is general boredom with slide-driven presentations, and enthusiasm for interactive panels. One attendee says:

I always find the panels more exciting, and I like the open dialogs where people can ask questions and get real world opinion and advice

As for the content, the name that comes up most often is Bill Buxton, the design expert who joined Microsoft specifically to introduce greater design-consciousness into a company whose track record in this respect is poor. It was a fascinating appointment, and I believe you can see traces of his work in Windows 7 and much more in Windows Phone 7. I talked to Buxton briefly about this and wrote it up here. When I say “his work”, I don’t mean hands-on screen designs, rather a different approach to product development.

Buxton apparently made a considerable impression at Mix10. His session An hour with Bill Buxton (the link has the video) is also one that is interactive, and worth watching if you have an interest in where design fits into the development process. The fact that Microsoft-platform developers are engaging with his ideas is encouraging, given the usability issues that spoil so many Windows applications and machines.

Overall it also seems that Windows Phone 7 went down well – remarkable when you consider that Windows Mobile was all-but dismissed as irrelevant a few months ago – though I did smile at the Microsoft employee (I think) who shows an iPhone with a Mix scheduling app installed. Its special feature: shake the iPhone and it displays a Windows Phone 7 screen, handy if Ballmer appears in the corridor:

image

One final point: an attendee says IronRuby was shown running on Windows Phone 7 in one of the sessions, something I was told elsewhere was not possible.