top of page
Writer's picturedanielclarke1981

Week 8: Visual Design -Challenge Activity

Updated: May 3, 2023

Tasks 2: Apply Colour to Your Interface

Brief

[~60 minutes]

  1. Duplicate your wireframe file or page – you don’t want to work over it!

  2. Pick three colours and apply them to your interface (use a tool like CoolorsLinks to an external site. to help you).

  3. Make a fresh artboard and note down your colours and how you are purposefully using them (see the ‘Applying to a UI’ slide in the lecture slides for Intro to Colour).

In addition to the course content, I looked at the work of Steve Schoger, who is the author of Refactoring UI and the Designer and partner at Tailwind Labs. Some of the recommendations from Steve regarding colour is to not just go for the ones recommended by tools like Adobes Color, but use it as a basis for additional colours.

Ever used one of those color palette generators where you pick a starting color, tweak some options, and are then bestowed the five perfect colors you should use to build your website? You can’t build anything with five hex codes. To build something real, you need a much more comprehensive set of colors to choose from.

(Schoger 2022:123,124)


He goes on to suggest for each colour derived from a generator there should be a variety (5-10) of lighter and darker tints and shades, which can be used sparingly. I need to remember that this is one person's opinion but I must confess that on the limited occasion I’ve used Adobe’s colour (n.d.) generator I have been disappointed when applying the resulting colours. I've studied colour theory before at Art College during my Foundation in Art and again for my undergraduate degree but I can't say it is something I have a natural eye for. Maybe this is why I continue to latch on to tools like the one Adobe produces and the opinions of UI designers I respect like Schoger.

Based on his recommendation, I decided to avoid Adobe Color and try Coolors instead. I must say the process was much easier and I liked the recommendation it gave me once I had picked my first colour. The User Interface was intuitive and simple and I walked away with a pairing I was happy with. (figure 1)


figure 1. Clarke . 2023. Colours generate using Cooler and their intended meaning
figure 1.: Clarke 2023. Colours generate using Cooler and their intended meaning

I based the pairing on the colour theory and its meaning. I chose a yellow/orange #F7B05B (Earth Yellow) for positivity. This was based on this week's course content (Brown, 2021) and the extended material (Mall, 2020). I wanted a yellow as the user persona was someone who needed every reason to volunteer, and I was hoping the positivity and joy may rub off on them. I also chose Green #028090 (Teal) for Growth, as I wanted the app to portray a sense that the user was here to grow themselves with their skills, network, and as a person. I also picked blue #BBD1EA (Columbia Blue) as I wanted to add trust in there as well. I felt this was important to give some gravity to the concept, although this was a lighter colour than I would have liked, I decided to use it as a base colour. Finally, I needed a colour for error states and warnings (#E05263 Indian Read) and also one for text (#1D1E2C Rasin Black).


Applying these to my design

figure 2. Clarke . 2023. initial test of chosen colours applied to the skills HQ wireframe
figure 2: Clarke 2023. initial test of chosen colours applied to the skills HQ wireframe

I experimented with different combinations of colours but ensured that the destructive buttons were always Indian Red (figure 2). The issue I'm finding is the design looks very business-like and corporate and not in keeping with the use case. I know the persona will be looking to build skills they can use on a professional basis but it's starting to look like a Microsoft Office product. I like the colours and the message they're trying to portray but I'm not happy with the execution. Perhaps it's the design itself not just the colours, everything is boxy because these are based on the wireframe.


In an attempt to "soften the edges", worked on the interface, while also keeping in mind the colour. I added border radiuses to the skills list and added some padding to make them look like individual cards, which is what I'm going for as this is the area I want to drag and drop (as mentioned in week 7). I also liked the idea of blue, but I wanted it to be lighter and more fun so I changed it to #E6F6FA (Azure).


figure 3. Clarke . 2023. Additional tweaks to the colours and UI
figure 3: Clarke 2023. Additional tweaks to the colours and UI

I feel this has softened the design and I'm "happier" with the result, but also made it look somewhat feminine, which was not my intent. This is only an opinion and not yet based on evidence, but I know the initial target for my design is men between 18-45 and the user persona is based solely on this demographic so I may have to reevaluate this. Does this speak to a busy working dad?



Tasks 3: Apply Typography to Your Interface Brief

[~60 minutes]

  1. On that same duplicate file, pick two fonts (three if you must) and apply them to your interface (use a tool like Font PairLinks to an external site. to help you).

  2. On your fresh artboard you made for the colours, add your typography – note down your fonts and how you are purposefully using them (see ‘Rules of Thumb’ slide in the lecture slides for Intro to Typography).

Typography is not a strong suit of mine, like colour I don't feel I have the eye for it. I used the tool FontPair (n.d) and to generate some suggestions on the font combination and applied them to some designs I had begun to flesh out for the skills page.


figure 3. Clarke . 2023. Font Combinations based from pairings on FontPair
figure 4: Clarke 2023. Font Combinations based on pairings on FontPair

None of the pairing really resonated with me and I began to wonder if the whole look of the project is drifting off course. I was particularly concerned when I paired the Serifed Fonts for the heading with a sans-serif body as I felt the design was definitely looking muted and generic. This will definitely be something I need to address, I'm worried I'm deferring a big decision like this but I'm still fleshing out the wireframes from last week to get a testable flow, which needs to be the priority.



References
 

Color.adobe.com. n.d. [online] Available at: https://color.adobe.com/create/color-wheel [Accessed: 10/03/2023].


Coolors. n.d. Coolors.co. [online] Available at: https://coolors.co/ [accessed: 10/03/2023].


Fontpair . n.d . free, beautiful fonts and font pairings curated just for you. [online] available at: https://www.fontpair.co/ [accessed: 10/03/2023].


SCHOGER, Steve. 2022. Refactoring UI. [online] Available at: https://www.refactoringui.com/previews/building-your-color-palette [Accessed: 10/03/2023].


MALL, Kritika. 2020. Color psychology in UX, Medium. Bootcamp. [online] Available at: https://bootcamp.uxdesign.cc/color-psychology-in-ux-b371fde795d3 [Accessed: 10/03/2023].



Figures
 

Figure 1: CLARKE, Daniel. 2023. Colours generate using Cooler and their intended meaning


Figure 2: CLARKE, Daniel. 2023. Initial test of chosen colours applied to the skills HQ wireframe


Figure 3: CLARKE, Daniel. 2023. Additional tweaks to the colours and UI


Figure 4.: CLARKE, Daniel. 2023. Font Combinations based on pairings on FontPair


16 views0 comments

Recent Posts

See All

Comments


Post: Blog2_Post
bottom of page