Designer News
Where the design community meets.
Interaction Designer Joined about 9 years ago
Moho Pro 12 is a 2D vector animation tool for Windows and Mac which might be a suitable alternative for animating UI interactions. It's not a particularly easy tool to learn though (in my view), and unfortunately there are not that many tutorials available online.
It is powerful though and it's not subscription based. You can move objects along a path as well as automatically interpolate between different keyframes.
It's currently on sale at $199 (it's regularly discounted and seems to be permanently at that price on Amazon). I suggest downloading the trial version and giving it a spin.
Here are some ideas and thoughts after looking through your screenshots and screencast :-)
The first screens says Create a new identity. What about Create a new account or Create a new profile instead?
Instead of labelling the first field Identity, what about Display name instead? This makes it clear that this is the name that appears to other users when you chat.
Instead of Bio, how about About you (optional)?
The warning is unclear ("neither your data nor your local profile is protected for now"). What does this mean? Is the data unencrypted? If this warning needs more explanation, you could have a Read more link to explain it in more detail on a separate page or screen.
For the avatar, instead of Select an avatar, how about: Drag an image here or upload from your computer
The text upload from your computer would be a link (e.g. in blue) that opens the file open dialog.
Instead of the label Submit on the button, what about Create account instead? (Later, when you click on your profile to change your avatar, the button can be labelled Save).
After the account is created, why not go straight to the contact list, rather than back to the home screen?
Could a little bit of onboarding help here? e.g. a tooltip that says something like 'Add contacts to start chatting and sharing files'. It just gives a bit more direction to users that this is what they should do first.
Could adding contacts be simplified too? For example, instead of ID + Suggest, you display an alphabetic list with a search field at the top. Each entry has a + or Add link to add it to your contacts. Here's a rough idea of the pattern (from EventBrite):
The main chat screen does not display your 'identity' name (blob) anywhere on the screen. Maybe display it under the avatar (it may need to be truncated)?
Overall, I'm impressed with what you've built so far. Best of luck with the project :-)
Amuse UX conference in Hungary has a nice website.
I like the simple but attractive header (with animation). The rest of the site is clearly laid out and has a clean, polished feel to it.
I like the simplicity of the logo. The branch idea is an obvious one but nicely represented in the diamond in a way that doesn't make it feel too literal. Very nice.
Two things I don't like so much: the choice of typeface for the word Git, and the placement of the diamond above the Git word.
Typeface: I don't have a suggestion for an alternative typeface I'm afraid, but perhaps the letter spacing could be tightened up a little? The spacing between the i and t feel wider than the spacing between g and i.
Logo placement: When the diamond is placed above the letter i, the dot from the letter i feels like it's pushing the diamond out a bit too much. Instead of text and logo mark feeling feeling tightly coupled together, they appear a bit disconnected. That's my impression, but others may not see it like that way :-)
I really like Source Sans Pro. It's a free font family with many weights. It was designed by Paul D. Hunt for Adobe and was specifically designed for use in apps.
Here's the original blog post from 2012 that launched the typeface:
Try Affinity Designer a vector drawing program for the Mac. If you like it, a version for Windows is under development (currently in Beta).
You'll find a link to a trial version for the Mac at the bottom of this page
I like the clean, spacious design of the site. But I've never heard of this product and scrolling down the page it's not immediately clear what the product does, or where it fits in a company's internal suite of business tools.
When you get to the very end of the page, you actually find a description that feels like it should be much further up the page (even though the description is still a bit cloudy):
UserVoice develops product feedback management software that transforms the way businesses gather and analyze customer feedback and prioritize feature requests to drive strategic product decisions
Yes, that's exactly what responsive design is, but if you were coding a website by hand in HTML and CSS, the browser would automatically scale and then re-arrange elements based on the breakpoints you set. In other words, if you have 3 breakpoints, you won't write 3 different versions of your HTML and CSS for each breakpoint. In Axure, it fakes responsive design, so if you want to simulate 3 breakpoints, you have to layout the webpage separately for each breakpoint.
I've not used any other prototyping tool for desktop websites, so can't recommend any other unfortunately. A few that might be worth investigating are: webflow.com (visual website builder) and pinegrow.com (an app for creating websites, but you'll need to know HTML/CSS)
Framer looks like a good tool too, but they position it very much for mobile and they have no desktop examples (even though it is capable of creating desktop sites).
I've often thought it could rival Axure (probably exceed it) since it has full Javascript capabilities which would allow you to create any kind of prototype. It lacks a widget library of common patterns/components/behaviours that would be a massive timesaver and would make the tool more approachable for beginners.
Yes, Axure is a good choice for web applications or websites. The interface is not that user-friendly but you can also do a lot more than other prototyping tools. For example, you can use variables to remember state (and pass their values between pages). You can use a library of built-in string, math and position functions. You can also do things like validate the text a user inputs into a text field.
Axure doesn't produce responsive web page designs but it simulates responsive design with its 'adaptive views' feature which essentially switches layout at certain breakpoints. However, you need to redesign the page for each breakpoint which can be time-consuming.
Axure is expensive to buy ($495) outright (i.e. no licence expiry for the version you purchase), but they now also have a monthly subscription option ($29) if you only need it for a limited time.
Finally, unlike a lot of prototyping tools, Axure is a proper desktop application (for Windows and Mac), so it can make full use of all the features of your OS. This makes it feel far more robust than browser-based prototyping tools.
Since it's a desktop app, it doesn't require an internet connection while you're prototyping and files are saved locally (but you can upload finished prototypes to their free AxShare service when you want to share your prototype.) They offer a free 30-day trial of the app, so you can evaluate whether it's suitable or not for your needs.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Affinity Designer is a good tool for UI design. It has excellent type tools (including styles), symbols, constraints (a way of anchoring objects to other objects) and artboards. The latest version finally added arrowheads - a long-requested feature previously missing.
However, it does not have a plug-in system or prototyping tools. You won't find as many resources (wireframe libraries, tutorials) for UI design in Affinity Designer compared to Sketch.
My impression is that Affinity Designer is more popular in use as an illustration tool.
If community and a large eco-system of add-ons and libraries is important to you, then Sketch beats Affinity Designer. But if that isn't a concern, then Affinity Designer is a perfectly good tool for UI design.
I would recommend recreating one of your Sketch designs in Affinity Designer. It will give you an idea of whether Affinity Designer has all the tools you need and whether the workflow feels ok.