I’m more of a numbers and architecture person, than colours and aesthetics. Which resources do you use to find icons, fonts, backgrounds and other graphics for screens? Are there any palettes that work particularly well with the corporate branding tool? I like to set the corporate colours, make a few masks, and then reuse them. Using some better icons and images may give my screens a more clean look and feel. Maybe you could share a sample screen so we can all see different screen designs?
Thanks for your help.
Hi Bob Gill,
Designing a solution is never easy (combining UI + UX is a job in itself); I usually ask for the customer’s branding guidelines, which normally cover also fonts and styles.
When this is not the case, I usually browse:
ICONS
- www.iconfinder.com
(for nice icons - which I usually prefer minimal and flat)
COLORS
- www.paletton.com
(for hints on combining colors and structuring colored areas in the screen)
I bet there’s many more and I’m sure the rest of the Community will help me here.
Hope it helped
Hi Bob,
I have been using https://www.storyblocks.com for vectors and all kinds of icons in the past. Iconfinder from Gabriele looks great for that kind of stuff as well.
For colour palettes I always like to look at https://material.io/guidelines/style/color.html#color-color-palette, that always helps me to find colours that fit well to each other.
One of the things that I am working on internally is a timesheet application for our consulting company and I recently used a few icons for creating a menu on the left hand site and I have used a banner with a a predefined shadow to differentiate between the different parts of the screen. You can see it in the attached screenshot, I was aiming for something similar to this: https://uploads.toptal.io/blog/image/124638/toptal-blog-image-1510215054914-899651b7f60e06b4b511a77b72235365.png
I am not 100% happy with it yet, but the look and feel changed quite a bit due to the icons and the background of each part.
When it comes to colours in charts I always like to use the same colours for a data series. Which means when I show Actual data it will always be shown in a chart with the same colour on every screen and if the client is open for it, I also like to format the list and table header with that colour. The same for Forecast, Budget and so on, which makes it easier for the user to read charts, lists and tables. This is something I have learned by reading books from Stephen Few, IBCS, Cole Nussbaumer Knaflic or Andy Kirk. I can really recommend to look into data visualisation and the psychology behind it. I am not always following everything those authors are saying but there are some general rules that help users to consume the data presented to them.
I hope this helped a bit.
Cheers,
Daniel
I can also recommend you to use UTF-8 icons for your applications, e.g. from Unicode® character table or UTF-8 Icons - Your no.1 source for UTF-8 character icons . In this case you have the advantage of not using any images so you do not affect the performance. By now there are so many various icons that I mostly find what I need. Furtermore, I am more flexible with adjusting the icons like combining them with alerts.
I hope this gives you some input for your implementation
Best regards,
Bettina
Thanks Bettina Clausen this looks like a very nice approach with a lot of advantages
I also use iconfinder like Gabriele Gallo, for colors this is quite an easy topic for us since we have quite detailed company guidelines. Just like Daniel Zillmann we try to maintain an equivalence 1 color = 1 kind of data for all the apps (orange = budget, red = actual, grey = previous year... and so on).Etienne
The Material.io site also has some standardised icons... https://material.io/icons/
Icons DB - free custom icons is another good option, and you are also able to choose your own colour.
Even if it is not precisely the original topic of this thread, i suggest like Bettina Clausen avoiding the use of images/icons, if this is possible. I admit it is not always possible (company logo, or process arrows to illustrate a budget cycle for example).
For example, if you are looking for arrows,
images/icons have the inconvenients
I hope this idea of using characters instead of icons may help a few.
You can also have a look at Professional Icons | IconExperience.com
I found another good reference for free icons, flat, allowing a few modifications (color, additional text) before downloading them
https://icons8.com/
To add to tools for color palettes I really like to use Adobe Color CC (free). Favorite feature is the ability to upload any image and generate a series of color palettes.
Bob Gill Of course we also have the humble BOARD label. If you want to produce a visual interpretation of workflow such as this:
...you may want to experiment with the Radius and Border of a Label. The attached pptx slide shows some basic settings.
Thank you for the slide!
Even if I still dream of the object flowchart of Board < 7, where arrows and stuff was available, and you didn't need to build arrows from several labels...
Thank you @interested typ. That's a useful tip which I will be using from now on
interested typ - do you copy the symbols or are you able to use the keyboard to enter the uni code? I have tried with the keyboard to insert an up arrow - [Alt] + 2191 - but get a capital A with a small circle on top [Å]. However, I will now be using unicode characters as presented by you and Bettina Clausen so thank you both for the idea - really great solution.
Hello,
I use the copy-paste function only.
I have just noticed one drawback of using UTF-8 characters, and I would like to know if other people here have a solution. It is about consuming a BOARD screen from a smartphone.
Any hints ?
Hi interested typ,
surprisingly, this link renders in Edge and Firefox (if called directly) to the rectangle, you've mentioned. I'd propose to check whether this is an issue in HTML5 as well--since I assume that to be the future of BOARD web as it happens to be device-independent.
Kind Reagrds,
Helmut
I found arrows which are properly rendered while consuming a BOARD screen from a smartphone.
