Designing perfect hi-fi clones — and failing

There won’t be a bigger spoiler along these lines than the one right at the title.

[Exercise 2]

But hey, you still don’t know just how I failed, so if I may have your attention, here’s a couple lessons I learnt when first using Adobe XD for designing hi-fi user interfaces. But first,

DJ, sound the intro!

As a part of the activities of the Week 0 at Ironhack, I just did an exercise to get familiar with interface design, focusing primarily (not exclusively) on Adobe XD. We were supposed to pick a 5 screen user flow and replicate it as best as possible, in this very valuable attempt to refine our gaze to the minutiae of screen designing. My app of choice was SoundCloud (Honestly, Where The Good Stuff’s At), and I ended up choosing commenting on a track at a specific time-stamp as my user flow — how cool is that feature, though? My first time with Adobe XD went not so smoothly, which means that I earned many a valuable lesson while at it. Tag along to learn from my mistakes, I guess.

Here’s one mid-fi replica ready to be sent to Adobe XD, just fresh out of Illustrator

Sun’s out, notepad’s out

I believe it’s safe to say that I am pretty familiar with Adobe products. Despite this being my first time with XD, Adobe Illustrator was the software that introduced me to the Adobe workflow, and I have been carrying out projects on some of the other software distributed by Adobe ever since. Of course those never work in the same way, or even share the same shortcuts (which can get conflicting rather quickly); however, getting used to the tidbits of each of them hasn’t been a problem thus far. Some features are very similar and the cross-over is very intuitive to come around; others perform in the exact same way; some of them are specific to the particular craft to which the software is dedicated. Fair enough for me.

But as I went past the homepage in Adobe XD, I was in dismay. I already knew what a simplified work-space looked like from working with InDesign, but XD seemed to have just about crossed the line between simplified and disappointing. The properties panel seems way too bleak: too spaced out, too little features available. For instance, there isn’t a cropping option for quick crops (which was a pain as I was trying to simply cut out bits from the screenshot without needing to do it elsewhere and export the crop into XD — full disclosure, that’s exactly what I ended up having to do), there is no transform tab from the right-click menu (which begs the question why, since it does have the Arrange, Path and Guides tabs just like in the other softwares), and I haven’t seen as of yet an option to switch between colour models inside the fill/stroke colour panel. And that’s… pretty inconvenient.

Below are my most relevant observations during my transition into Adobe XD. I must add beforehand, that despite my growing pains, I am super pumped about XD, especially considering its prototyping feature, and I’m glad that at least vectors are fully editable in it. Here we go:

• Unfortunately the conversion from other Adobe products to Adobe XD is very poor, and I’m appalled that I seem to need to get a mouse in order to better browse the software, when I’ve been getting by flawlessly fine with only my laptop’s touchpad and a drawing pad in the other pieces of software. That’s a major bummer.
• However, cross-software copy-and-pasting is extremely efficient, which allowed me to be as nit-picky with shapes and anchor handles as I indulged myself to in Illustrator, and then simply export perfectly my objects, groups and layers into XD. That’s a major hooray! But…
• … this exporting option is not perfect. I did have some trouble with blending modes which didn’t carry through to Adobe XD, or that ended looking plain ugly in XD’s algorithms…
• …nonetheless, Adobe XD’s blending modes and shading options are elegant. Extremely easy on the eyes and friendly. I would love to learn more about why they’re like that, it seems there’s a whole style dedicated to app/software interface designing which is definitely different (and frankly less convoluted) than traditional Photoshop blending modes. And I’m one thousand per cent here for it.
• Another extremely useful feature up on XD is the repeat grid button. Jesus, how that feature is needed, even for general graphic design — particularly as it allows you to tailor the gutter between object groups. *Chef’s kiss* C’est parfait cela. Also, do note that a fairly decent and organised layer work here is crucial for things to work out well.
• Lastly, what can I say about that brilliant, pixel-rigorous eyedropper tool? So fun to use, and simplifies the endless gamut which Illustrator and Photoshop otherwise (thankfully) provide us with.

See, I don’t hate Adobe XD. I have had enough reasons to hate it, but also found enough reasons to stand by it ‘til the end of time.

Fail fast AND fail successfully

All things considered, the experience of mimicking someone else’s interface is still very confusing and difficult. Even with the support from plug-ins such as Mimic, there is still a bunch of design-driven decisions in interface-making that can be a nightmare to figure out. No wonder teams work with components — yet another commendable feature of Adobe XD.

I did show my replicas to people sitting next to me, and one of them said something along the lines of “I know these two are different but, honestly, the difference doesn’t matter at all.” I was very satisfied with that level of fidelity. Also, no-one seemed to be all too familiar with SoundCloud either, which could otherwise have altered significantly their judgement. And that should be a designers’ preoccupation, too — the level of familiarity the audience is bound to develop with their product.

Below you can see a clunky PNG with all the screenshots and replicas side-by-side, and here’s the full interface, viewable link made available with the share feature of Adobe XD. Enjoy!