Student Union Icons: Finalising Icons

This step is to make the icons more uniform and follow the same lines, guides and rules.

For sport, I moved in to create a netball. I felt as though it was less harsh and generic. A football connotes football and always has. It is recognized as representing nothing else, due to its massive following and overuse in television and sporting pop culture whereas a netball and other balls from sports connotate a wider choice of sports which is most appropriate here, representing both football and netball. An example "focusing on the meaning of specific icons".

From here I picked out those that I 'gravitated' toward most. It was from here that I had to choose which worked the best. which were easiest to read, which were the most simple. This was done by mocking some up to be seen together. This allows me to recognise which ones 'don't look like the others'

Using a light blue as a dud colour I began to mock up the icons within circles. The blue was based on the blue seen often alongside with the Student Union's branding. This allowed me to see them within context, of how they may look on the website alongside similar colours. This was a visually pleasing decision, but it also allows me to regulate sizing and space. How much space do they need to take up and how small can they be before they stop communicating clearly.

I worked on various boards to allow me to still consider older designs or elements that might have been lost through development.
I also kept the reference the client gave me to refer back to, as well as the list of suggestions given.
Within Illustrator I like to develop in stages:
Initial designs
Mock ups
Finals

I keep art-boards separate in the event that a client will want to see development work, they can be exported easily as JPEGS of PDFs etc.

I preferred the look of the thinner line weights so explore only that section further. Below are experimentations in 1pt and 1.5pt. Some icons translate better than others. The events calendar does better with thinner line weights, due to its complicated line work. The lines become blurred and overlapped. I prefer the 1.5 weight. It looks friendly and less corporate: the core values of the Student Union. The version directly below though clean are cold with no 'padding'.
It surprising how much of a difference 0.5pt makes. I think I will look to mix both 1 and 1.5 in areas: the inside lines of the colder for example. I don't want to loose the overall feel, but will never sacrifices practically for aesthetics.

1pt line weight

1.5 line weight

The main thing from reading that I gathered was making sure they are clear and easily read. The only icons as of now that aren't fulfilling the brief are the weights and the events calendar. I will have to re-jig these wether through re-shaping, line weights or spacing to make sure they are communicated clearly their image. "Iconography should be crystal clear". I intend to make it so.

Student Unions Icon: Research

Again, I feel that the advice and writings are citing similar practicing. Stressing the importance of the communication element of icons. I like the idea that they are to aid copy and not to be approached as replacing it.
Keep it simple and clean. I think when returning to work on the icons I'll keep these in mind, especially when trying to have them work together/side by side.

1. Don’t be obtuse
Your icons need to be quickly and easily understood. All too often, they’re treated like bad stock photos – a nice picture to fill in the space, tangibly related to whatever’s nearby.
But really, icons should be treated like great ad copy, and focus on saying the most important thing quickly and in a really easy-to-digest way.

2. Don’t be superfluous
While iconography should be part of your branding and website (especially for responsive sites!) they shouldn’t be your entire brand and website. Icons are a design strut: they’re great at supporting other design and copy, but they’re never really the star of the show.
There’s no need to have a different icon for every single service or product you offer. It quickly overloads your visitors and they lose all meaning as one icon bleeds quietly into the next. A few icons for a few major buckets is all you need.

3. Avoid the abstract
Of course, everything on the web is going to be a little abstract. But it’s a sliding scale, and companies run into trouble when they try to use icons to represent vague and ill-defined concepts.
Sure, it can go well, but your iconography is best when it’s grounded in something your users instantly recognize or know. For example, say you’re a sandwich company. Better to make an icon of your finished product (the sandwich) than the process of making one.

4. Icons are not copy
Icons, however wonderful, are not actually copy, and do not replace copy. They’re great at providing road markers of what a user is looking at, and are great at helping clarify what copy is going to say before the user reads it.
But make no mistake – your customers didn’t buy your product or service because of great icons. They probably purchased because at some point your copy resonated with them. Designers and copywriters should be working closely together, so that the iconography and copy are one cohesive package.

5. Don’t be (too) clever
Every company should be clever. But more importantly, every company should be clear and concise in their messaging, and this includes iconography. Too many try to be clever rather than clear. Never make the mistake of forcing your users work to understand your brand, your company, your product, or your service.
Iconography should be crystal clear, all the time. If you’re struggling to develop amazing and unique icons, then stick to the tried and true. Because at the end of the day, clarity trumps clever every time.

Clear iconography is an easy way to ice your amazing website/app and can go a long way towards helping you provide a superb user experience. Just follow these simple guidelines and your website is sure to shine.

Source: moveableonline.com/blog

Student Union Icons: Research

I found this incredibly helpful. Just building up a background and understanding of the reasons for creating. Icons are created to communicate. I need to be making things that work, that solve a problem, that are easily recognizable, that are easy to 'read'.

The Medium and Mechanics of Iconography 
Iconography is arguably the Esperanto of the digital world. Icons cannot replace the written word, yet they serve as cognitive waypoints for areas of interest and/or interaction. Iconography can also be an efficient way to communicate a concept in a small amount of space, which is increasingly important in the era of the shrinking screen. At its most basic, icon design is an exercise in illustration; at its most complex, the creation of a communication system. If understanding how to design icons wasn't enough, the way they are produced and displayed on a screen can have immeasurable impact on a person's experience.
The purpose of this lesson is to share some thinking behind creating signs and iconography as well as to focus on ways to create and display them.

Symbolic, Iconic, and Indexical Signs 
Focus on the meanings of symbolic, iconic and indexical signs, then think about common icons that employ each of these methods of communication. Try to come up with scenarios where each method would be appropriate to use.

Insights on Symbol Design
Look at all the elements that the article calls out as important. Which elements resonate with you the most? Try to understand why you gravitate towards any specific elements and how that may impact the icons you create.

The Floppy Disk means Save
Think about the implications of designing icons around objects that may no longer be relevant. Do those icons simply become abstract symbols? With the precedent set, should those icons ever be redesigned? Your task is to work out an informed opinion.

The Making of Octicons
Focus on the amount of systems put in place to design and output the final icons. Think of the type of icons you'd like to make (raster, vector, font, all of the above) and work to create your own systems and processes to support their creation.

The Era of Symbol Fonts
This article only scratches the surface of semantic iconography. Think of three unique ways you could use semantic icons on a site to create a unique or improved experience. Once you come up with those ideas, share them with the rest of us.

Source: hackdesign.org

Students Union Icons: Development

This was one of the quicker briefs but I still took the same time and care. I already had the suggestions which made my life easier. Now it was a matter of creating what she had sugested to the best of my abilities.

• Sports
  football/netball

Before & After rounding

I began my mapping out basic shapes within a football. then progressed by rounding edges. I'm experimenting with how stylized I want these to be: whether I'd like them to be thing, thick, angular, rounded etc. As I move on to the other icons I feel the guidelines will define themselves based on how the icons interact together.

I didn't like the style of the first football created. The pattern was too obvious and the angle allowed for a distracting and unattractive outline when the leather patches were coloured. I create another that was more flattering. The patches communicated more a spherical shape. It insinuated a 3D object as supposed to the one before, which didn't translate as well.

• Fitness
  weights/ fitness class equipment
  kettle-bells/ boxing glove

I wanted to try my hand at all, so for my own sanity, I knew I had explored all suggestions before settling for one. I made simple versions of all just to get a feel of what I preferred. The boxing gloves were alright, just not a strong enough image. I felt the kettle bells would not fit well with the clean aesthetic I wanted to achieve, due to its natural disproportions.
At this stage I'm leaning toward straight lines, non-rounded icons, hence the decision for my to take the weight vector further. 

• Representation 
  (light bulb/megaphone)

I found this one rather tricky in terms of proportions and 'style'. It was around this point that I realised my icons weren't following a set of rules, or that I had even considered writing some. I knew that the stroke sizes would all have to be the same thickness and that the corners could either be angled or rounded, but I haven't yet considered things like:

- Do all vectors touch/Do all ends join? (see football)
- Can sectors exist separate of each other? (see weights)
- Will they be a square format, the width and height be equal regardless of shape?

I feel like not having these answered is making the process longer than it needs to be. I would like to do some further research into guidelines, rules and iconography in general to help better my knowledge and by a result my practice.  Research is something I would have to do anyway, but to directly realise it's importance is very satisfying. To see that it will directly make my process easier and of a better quality will help me greatly.

• Advice & Support
  (two speech bubbles)

Again, I just created a few examples exploring more rules of aesthetics I might want to create. Should they be filled and use negative space? Focusing on the 'square' idea, making sure everything is a perfect circle. Do they exist separately or do they join?

• Events(Use the events calendar logo created for Elections)

Looked back at development from the events logo and finished an earlier version.

• Societies
  (Use the societies logo created for Elections)

I looked into altering the already created logo slightly for it to look more complete, and also fit the guide of all vectors joining. Additionally I explored differing line weights. 

Students Union Icons: Brief

This brief was a small live brief brought to me by Emma, the Student President, off the back of a conversation during a social, where I told her if she had any small design tasks she could ask me. Small networking really paid off in this sense and I feel making such a close contact will keep me busy with small tasks. Below is the email I was sent by Emma today. She also attached an example of how the icons would look on the website.


Brief: Create iconography for the Student’s Union's new website.

Background Considerations: Consider how all the icons look as a whole and in different formats. Perhaps look into iconography guidelines to create symmetry across the board.  Listen to Emma's suggestions to create visuals she has already approve/in visioned.

Deliverables: Create a set of icons to represent specific elements that the Student Union has to offer.

• Representation
• Sports
• Fitness
• Societies
• Advice
• Events

Hey Billie,
Hope you're good! I've got a mini project if you'd like to do it? I know you're underway with Elections stuff but thought I'd pass it your way first!
We basically need a few black line logos creating for the new, improved website.
Please see below for how these will look on the website;

We would need the following logos created;

• Representation [could be a light bulb or megaphone?]

• Sports [football/netball?]

• Fitness [weights/fitness class equipment - kettlebells/boxing glove?]

• Societies [please use the societies logo created for Elections]

• Advice & Support [two speech bubbles?]

• Events [please use the events calendar logo created for Elections]