UI/UX Inspiration

Where do you guys your UI/UX inspiration from? And what tools do you use to render them before bringing them to life?

I used to use photoshop back when HTML/CSS was a lot more simple and not nearly as powerful as it is today.

I split UI/ UX / animations into four parts.
DOM, SVG, Canvas, Images/ video.

  • DOM: for most “micro” interations I try to use requestAnimationFrame and CSS transitions mainly because I prefer not having to reset animations then change CSS properties to new state ect

  • SVG: I use for animated backgrounds, logos. I used to use Inkscape because it was the only editor that outputted compact tags for inline use but now I use Figma. I mostly use WAAPI for SVG animation.

  • Canvas: I don’t use, but I would if I was doing some 3d animated objects. I think 3js and p5js use webGL.

  • Images/ video: I get somebody else to do it. I’m not great with photoshop.

1 Like

Dribbble is my favorite place for finding inspiring visuals! The iOS app store’s popular apps listing is another good place to see what is hip and trendy these days.

As for what tools to use, Sketch is my go-to these days.

:partying_face:

1 Like

Good suggestions so far! I think the last time I had an iOS device was my iPhone 6 Plus; I left Apple ecosystem for mobile devices back then because I wanted more freedom to drag and drop things on and off my device, while also have expandable storage that my Note 9 offers me.

However, I may find myself back in that camp again, if the S22 is not a suitable successor to the Note 9.

I’ve been messing around with Adobe xD, and still not quite sure how I really feel about it. Figma looks solid, but not sure if I’m doing this enough to justify the cost of a software license, especially since I’ve already got Adobe’s CC.

Inspiration: the depths of my own imagination, combined with some Apple Human Interface Guidelines and just stuff I’ve seen around the web. I typically create a mock-up just to give me the sort of visual style and then I want and work from there.

I create my mock-ups in Adobe XD, but I often don’t do mock-ups at all. I usually find that it takes more time to design it in XD and translate that to CSS than it does to just experiment and design it using CSS to begin with!

1 Like

That’s the pitfall I’ve had with prototyping years and years ago when I still used PS to do so. By the time I got to turning it all into live HTML/CSS, I’d already spent so much time on the design, and often times the limitations back then prevented me from doing all of what I had designed. So in the end some time was lost.

It’s funny, because I feel creatively stymied when it comes to coming up with a theme for a webApp, but I can CAD up something out of thin air to solve an engineering challenge, I can work wonders with wood, can weld up a nice rustic wall piece, and create music on a variety of instruments.

Equally funny is that it’s easy for me to look at the work of others for inspiration in those areas, and it works just fine, but when doing so in the web dev arena, I feel like a hack copying someone else’s format.

If you want open source/ free Inkscape is a solid SVG only editor but it will take a little bit to learn (not as polished as Figma)
This guy runs his own design company on Inkscape and Gimp:

I haven’t done enough with Gimp to say but it still is powerfull.

For open source 3d animation software Blender is king.
It has 90% of what commercial software has for free.

I use Blender/Fusion 360 for a lot of my CAD stuff that I do.

For SVGs, I simply use Illustrator, since I have the CC at my fingertips; I’m not a fan of their pricing, but Adobe is what I’ve learned on and what I’m used to for the most part.

I run ArchLinux on most of my machines, but Adobe keeps me running a Windows VM to use my Adobe products, as I could never get into GIMP. I try every now and then to see if I can convince myself to dump Adobe in favor of FOSS, but familiarity keeps me stuck to the Creative Suite for the time being.

I’ll still give Inkscape a look, however.

Adobe XD is a great tool and in a similar league as Sketch and Figma. If you already have a CC license, it is a fine choice. I used to use Adobe Animate for all of my graphics until only a year ago when I switched over to Sketch, and the feature gap between Animate and Sketch isn’t very large. Given that XD is built with targeting the Sketch/Figma market directly, it may be an even better apples-to-apples comparison.

:slight_smile:

3 Likes

I haven’t messed around with Adobe Animate, but I’ve noticed in the last year or so the CC has exploded with a number of new applications I’ve yet to look into.

Animate is just the replacement for Flash. I wouldn’t recommend starting with Animate as a vector graphics creation/editing tool if you have XD :slight_smile:

Oh, how I miss Flash! Don’t suppose it uses Action Script (probably not)?

Oh, it did a year ago when I last used it! They have a web-friendly canvas/js output format that is the default now.

@kirupa XD is very nice. Lightweight, which is something you can’t say for most of Adobe’s stuff. But because it’s such a new app, it has a couple weird feature limitations and things that you really should be able to do that you can’t. Graphics-wise I stick to Illustrator.

1 Like

Both PS and Illustrator are super nice, as they work well with my Wacom drawing tablet, which makes drawing up things super quick and dare I say fun.

2 Likes