Recommended Agency

text controls: text only | A A A

Sorry, our twitter status is currently unavailable, posted 40 minutes ago

RSS feed icon What is RSS?

blog.

articles tagged with: design


Displaying all 2 articles

Hex colour codes explained the quick way

Hex colour codes explained the quick way

When I tell people I’m a graphic designer the most common response is an enthusiastic “So you design logos and stuff?” - always the logos, what’s up with that? Much less interest in the digital solutions provided with websites and apps but at least they’re excited about my job.

It beats the common assumption many make: that I can fix computers. You should see the disappointment on people’s faces when I can’t tell them why their laptop won’t turn on. Umm… is it charged? Yes? Then I’m all out of ideas.

Similarly, as the designer at focus, I felt like a bit of a let-down when I could only loosely answer a question from a curious colleague: “How do you think they decide on the hex colour codes?”

Turns out staring at someone blankly then googling the answer is a conversation killer. But now I’m armed with that knowledge should someone ask me again. What’s that you say? How do they decide on the hex colour codes? Allow me to explain as quickly and clearly as possible. I hope you’re sitting comfortably, this might be a bumpy ride…

 

So what is a hex colour?

Hex is short for hexadecimal. You might recognise these, #0000FF for example represents a shade of red. There are sixteen possible characters, these are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F.

Each of the characters represent an integer (a number that is not  fraction) from zero to fifteen. Here’s how we go about converting integers in to hexadecimals.

As an example we’ll convert the number 255 to a hexadecimal. To do this we first divide 255 by 16 (the number of available characters). The result is 15 with a remainder of 15. If you look at the chart above 15 is F.

We put aside the remainder figure (15) for a moment and divide the resulting 15 by 16 which is 0 with a remainder of 15. We already know 15 translates to F.

So now we have nothing left to divide, these figures we’ve been putting aside go together in reverse order (please don’t ask why, I’m not sure either of us could handle the answer to this too) and you get FF.

 

What is RGB?

To help you understand the rest I’ll have to briefly summarise RGB value. At this point I have to hope you’re even still with me but for those of you who are, I promise we’re getting somewhere with this!

RGB stands for Red, Green and Blue. The RGB value of that same red used in the hex example above would look like this: rgb (255, 0, 0) the first number represents red, the second green, and yep you guessed it the third, blue. The values range between 0 and 255.

Simply put, the hex code is created by applying the swanky little mathematical method I just explained to you, to each individual RGB property.  R = 255 which we now know translates to hexadecimal as #FF. You’d then do the same calculation for green (G) which is zero so presented in two figures is 00, value of B is also zero, so that’s 00. Giving us hex colour #FF0000 which is the exact same red as rgb (255, 0, 0).

 

Stop the clock!

How did I do? If you have any questions about this article you’re not the only one, I mean, please feel free to get in touch.

 

Jordana Jeffrey
Jordana

Created on Wednesday August 07 2019 08:00 AM


Tags: webdesign design


Comments [0]








Design and Development in Web Accessibility

Design and Development in Web Accessibility

It's that time of year again where I give up everything I consider to be fun food: crisps, chocolate, sweets and more.
So when I push down the red velvet seat to watch Deadpool on the big screen, without stifling my laughter with popcorn, the experience feels somewhat incomplete. Equally a rendition of Happy Birthday has a much flatter tone when I know I won't be getting cake at the end of it. The moral of the story here isn't 'don't be greedy' (wise words though!) I am pointing out the fact that I didn't involve everything I needed to, to make the experience a success. I denied myself of what I felt was the ultimate experience.

If we as web professionals were to try to achieve web accessibility with either design or development, our users would suffer the same disappointment, well, worse in fact. These aspects are complementary. We need to consider both design and development in order for accessibility to succeed. The only way it will is if you make sure you’ve got accessibility taken care of as part of your process.
We follow a design and development cycle and hopefully we can integrate accessibility into several different phases: content planning, wireframing, visual design, development and so on. Your process may differ but what should remain the same is your goal to prevent accessibility issues in the first place rather than trying to fix them at a later stage.

Many concentrate mainly on just one aspect, either design or development. For accessibility to really work though, the two must go hand in hand. A flawed design coded perfectly is just as useless as a brilliant design coded poorly.

Accessibility is the responsibility of the developers and the designers. If you can find a team that work closely together and understand each other, the way we here at focus do, then that's the best start you could possibly have.

Yes, a lot of accessibility is totally development. People seem to believe that accessibility is something that is created programmatically, mostly in the domain of the web developer. They're close. There is indeed a lot that needs to be done programmatically to ensure that what you create is accessible to people with disabilities. But you can’t rely on programmatic accessibility alone. Yes it's what we need to provide for most screen reader users. But what about those with low-vision? They rely on the visual aspects of a design to be able to make sense of it and perceive the interface as intended. And there are cognitive difficulties to take in to consideration as well as language barriers. These need the visual aspects of a design to speak to them in a voice that they can connect with. There is a lot more to it than just programmatic accessibility.

And that’s where I come in, as the designer. Accessibility is super important in the design phase of a project. We can usually predict which areas will be a problem just by looking at wireframes (the 'skeleton' of the design layout). We look at the layouts, how design elements will harmonise together, hierarchy of information and all sorts like that. This provides us with insight into what is likely going to be a challenge for people with disabilities.
Accessibility issues should be pointed out and addressed as early as possible in the design process. The longer you wait, the more costly it will be to change or fix later.
 

Jordana Jeffrey
Jordana

Created on Friday February 26 2016 12:54 PM


Tags: design development web accessibility


Comments [0]