Where can I get good icons, backgrounds or palettes?

Unknown

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.

Gabriele Gallo

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

Daniel Zillmann

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

Previous Member

Hi Bob,

 

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

Etienne CAUSSE

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

Previous Member

The Material.io site also has some standardised icons... https://material.io/icons/

Unknown

Icons DB - free custom icons is another good option, and you are also able to choose your own colour.

Previous Member

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,

1. you can look here : Unicode: Arrows, all of them (? ? ? ? ? ?) for HTML charset UTF-8
2. use the symbols (just copy-paste them) into you labels' layouts
    
   It is an easy arrow scaling based on variation%
3. combined with a basic alert setup
   
4. In this way, you don't need to setup anything in the label settings nor in the layout's blocks' format tab.
5. Result :
6. Using the alert setup, I can use the same symbol (e.g. upwards arrows) and different color (red for increasing costs, green for increasing margin...). All the labels have the same Trend text algorithm.

 

images/icons have the inconvenients

• they must be uploaded into each capsule using them
• it is not always easy to know which file among the capsule images is the one currently selected within a screen
• the options None/Fill/Uniform/Uniform to fill are not always easy to understand and use
• the algorithms to use images/icons depending of values of other layout's blocks take more place because of the images/icons filenames
• etc...

 

I hope this idea of using characters instead of icons may help a few.

Andreas Schmidt

You can also have a look at Professional Icons | IconExperience.com 

Previous Member

I found another good reference for free icons, flat, allowing a few modifications (color, additional text) before downloading them

https://icons8.com/ 

Previous Member

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.

Unknown

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.

Previous Member

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...

Paul Wyatt

Thank you @interested typ. That's a useful tip which I will be using from now on

Paul Wyatt

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.

Previous Member

Hello,

I use the copy-paste function only.

Previous Member

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.

• I have 1 BOARD capsule, which is a "web capsule" (different from a standard capsule, see more informations on help.board).
• in a screen I use one arrow as text within a label (this arrow SOUTH EAST TRIANGLE-HEADED ARROW | UTF-8 Icons )
• Result: the arrow is not rendered, instead is an empty rectangle having a black border . I tested it in Safari and Firefox on the smartphone.

 

Any hints ?

Helmut Heimann

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

Previous Member

I found arrows which are properly rendered while consuming a BOARD screen from a smartphone.

• Here the link to the arrows (and many other signs): https://fsymbols.com/signs/arrow/
• I scrolled down on the webpage and selected "HTML5" here:

• Then I used the copy-paste function to pick the proper arrows I need.