COMX 2020 Branding

For my CT6014 - Advanced Concepts in Web Module, we had to complete the COMX branding for this years event. This consists of creating a branding guideline with promotional material as well as a website which promotes this event. 

Initially, I looked at various websites and created an infographic to find out the best elements from each exhibition site which I could potentially use - this can be a double-sided blade however and can remove any sense of originality the piece may achieve without following these guidelines. It is important that I refine my design using these aspects.

Aaa1ccd5ec7043523fbd68d284105521

Logo Design

After inspecting various exhibition websites for their logo, I moved forward with beginning some sketches of my own. I created 11 initial sketches and asked others for feedback (as represented as the *s in the picture below) to refine my designs and see which ones would be taken further into Photoshop.

4e2f9b79ba7f149bd4fec0d44e4456e2

Using the pen and text tools, I created a series of refined logos with varying 'X' elements and colours to find the best fit for the COMX logo.

The 'X' element was emphasized to allow a symbol a user can recognise for the brand of the logo, and it would be crucial for this to be something clear and unique.

852f39d8612deb5aec66c4838eff2825
036fce0f98ca7da06f212192fdaa954e

After consideration, the final logo was achieved using the 'Timeline' typeface from the top row, combined with a unique X shape for the logo. Hardy (2011) states that a logo must be able to be read and have clarity, as well as being the correct size in relation to the mark of the logo - in this case the X. These two elements provide a clear logo which is easily read and identifiable on websites, posters and branding material.

Hardy, G. (2011). Smashing logo design. 1st ed. Chichester, West Sussex, U.K.: Wiley, Figure 8-8.

This will be the COMX logo that is used for the event during 2020. The branding guidelines take this forward and incorporate it into the workflow for the branding.

It is important to define the boundaries of a logo and looking at other branding guidelines such as Slack, it was shown that you can use part of the logo to define those boundaries; I used a similar concept where I took one quarter of the 'X' element as a size boundary, and I believe this allows enough space around the logo for it to be a prominent aspect of the material it is used on.

5c29f299ad15b0720f29af2ae26aa761

Colour Design

Once I had discovered the sizing elements and final logo, I looked forward into variations for colour and interactions within the logo itself; making sure the logo had enough contrast was key as it would allow the logo to be accessible on all media it was used. I looked into white and dark colours as backgrounds, as well as key core/secondary colours which could compliment the logo and work as complimentary colours on further branding and the website.

Upon deciding on colours for each course, I implemented some conditional functionality which allows the logo to change dependent on which course the student is studying. I believe this allows the logo to look a bit less static and also allows another step of personalisation to the student pages.

703bf2776d1dd25b77c8bd608eedef95
0010aa999c3191ea3a3f577a7dd7fdd2
Ac80d97ea06eadb4bbf4526f93448db5

After using colour palette services like Adobe Kuler, I discovered a palette that allowed me to take the logo's main coloured element and find darker colours for text/heading/background use. 

With Robin's Egg Blue being the main colour chosen, Puerto Rico and Lochinvar were found to compliment this colour quite well, as well as being accessible themselves when added onto other primary colours. Using the WCAG 2.0 AA colour ratio, it is found that the green colours are contrasted well against Charcoal Black and the secondary colours/darker colours contrast against White - through a combination of these colours, I should be able to implement these into my branding guidelines and make sure it is accessible. 

E6858b1f4fc32efa5d13da41275e9e7e

Making sure these colours represent the University of Gloucestershire was also important, which is where the original concept of using Robin's Egg Blue arose from. The chevron the university uses is the same colour, and I believe using a similar colour allows the logo to have a place of purpose and be related to the surrounding where the branding and advertising material would be used (Hardy, 2011).

Hardy, G. (2011). Smashing logo design. 1st ed. Chichester, West Sussex, U.K.: Wiley, Chapter 10.

Following the finalisation of my logo and its branding scheme, I took it into Adobe Dimension and branded some basic items to see how the design flows and looks on varying colours and sizes. In hindsight, I could've added the slogan onto these also but I believe the logo is able to fit into the design throughly and create an identity for the COMX brand.

2b363ae4e84e4afc5d94e43c29293a16

Website Design

Along with completing the branding guidelines we had to create a website for the COMX20 event. The first step was designing some ideas and concepts within Photoshop using the branding guidelines I had already completed. Here, I made sure to draft up the three pages I believe would be the most important in terms of design.

63b8892ae8d055df9588cf7dd00cbf66
D9b609de9de9276a889e740f4cbd83a7
1ffc6ea1fe7df41096ce0aa049f9520d

Once these initial designs had been established, it was important to try and create these designs quickly to see if they work in a 'fail fast' approach. Using a WordPress plugin called Elementor, I was able to utilize a drag-and-drop system to create mock-ups of each website and understand the integration between each element in Elementor - after experimentation, I was notified of Advanced Custom Fields, CPTUI, Anywhere Elementor and Dynamic Custom Fields which allowed me to understand the workflow of creating fields, creating a back-end for them, connecting them to the front-end and displaying the right information which can be updated remotely from the back-end.

One thing I wanted to make sure of was having accessible fonts which are easy to read. I used Google fonts (thanks to its integration within Elementor and WordPress) to select two fonts which complement each other and are easy to read and define. Initially, Sans Serif fonts were my first idea but after looking further into typography design, it is suggested that spacing, size, kerning and other characteristics play a larger role in readability than the lack of serifs (Shelly, G., Napier, H. And Rivers, O., 2009).

Shelly, G., Napier, H. and Rivers, O. (2009). Web design. 3rd ed. Boston, Mass.: Course Technology, pp.133-134.

Taking this in mind, I decided to use ‘Montserrat’ (with 75 tracking) for titles and headers due to its bold and easy to read typeface, and ‘IBM Plex Sans’ (with +33% kerning) for smaller headers and paragraph texts. These are both able to define different elements of the text with their size, style and colour definitions which allows for a stack to be created and displayed within my branding guidelines.

E93ead7cec1ed8d79645ac8ae7e2dced

Allowing the layout to be accessible and easy to navigate was a necessity. Elementor implements a fixed-width design which allows a designer to keep structure and consistency across a variety of setups and resolutions (Gillienwater, 2009).

Gillenwater, Z. (2009). Flexible web design. 1st ed. Berkley, Calif.: New Riders, p.2.

By utilizing this, I was able to create a column layout which can be split evenly thanks to Elementor’s integration. By using this combined with Anywhere Elementor, I have been able to create templates which can be integrated into the pages and take the data entered into the custom fields; showing them on the page within the template depending on what is connected where i.e. a Title field will usually be defined as the ‘Post Title’ field in ACF (Advanced Custom Fields) which will display the name of the student/team/taxonomy with the way the site has been set up using plugins.

Ff67faa078ddad4bfd8b6bb3aa51badd

Advanced Custom Fields (ACF) combined with Custom Post Types (CPTUI) has allowed me to create a responsive back-end with custom sizing to create an easy to use interface where information can be entered. Utilizing the information available on COMX19, I could define the fields needed for teams and students and create them dependent on their type, for example, a ‘Text’ field for a Name, a ‘Text Area’ field for a Description and an ‘Image’ field for a logo.

Having completed this data entry during COMX19, I can understand how tedious it can be to enter information within fields that are not as responsive. I took this forward and made an interface that I would be comfortable using myself, and made sure to include ‘Instruction’ fields which explain what to do so the user doesn’t have to ask me how to use the interface and can use it easily; this prevents frustration and allows an ease of use with the user interface (Spolsky, 2011).

Spolsky, J. (2011). User interface design for programmers. 1st ed. Berkeley, California: Apress, p.6.

By connecting these fields to templates created using Anywhere Elementor (AE), I was able to create pages which would automatically be made upon a new Student/Team etc.'s creation; the functionality within AE allows a user to set up a page with all the elements they need and then assign it to every post of that type - for example, a template for Student A could be made and assigned to the Student ACF Template and this will then be automatically be assigned to Students A-Z.

7af19cb082a82a6cd1eb533da862bd91

“A taxonomy within WordPress is a way of grouping posts together based on a select number of relationships.” (WordPress, 2019). For the purpose of COMX, I created two taxonomies named ‘Student Skills’ and ‘Team Role’ which are attached to the profiles of students and are displayed on their profile using ACF. I also took taxonomies and used them on a ‘Student Skills’ page, where the taxonomies are displayed with links to their pages which show a description of the skill and the students who have the skill entered on their profile.

WordPress (2019). Taxonomies | WordPress.org. [online] Wordpress.org. Available at: https://wordpress.org/support/article/taxonomies/ [Accessed 17 Nov. 2019].

98bd887090d07506ddedd0d944da2b70

Making sure this website is accessible on all devices is key for creating an experience available for all, including students, teachers, professionals and families of all ages – this is also the target audience for the event. Moving forward with this, I have to take into consideration how the website looks on desktop and then try to replicate the same on tablet and mobile resolutions. Considering I had no prior experience in this, I researched how other exhibition sites had accomplished the same feat and discovered most utilize padding and a small change in layout when changing devices. Utilizing this, I did not change much on tablet aside from some image sizes and positions which allowed the site to flow fuller and have bigger tap areas for those to press. Porting to mobile was considerably harder, but I managed to accomplish this by centering text elements and images, ordering elements in a priority, adding further columns to images and text templates and making sure menus had a large hamburger icon which allows users to press it easily by minimizing the complexity of the interaction (Horton, S. And Quesenbury, W., 2015).

Horton, S. and Quesenbery, W. (2015). A web for everyone. 1st ed. Brooklyn: Rosenfeld Media, p.78-79.

934ab1e8c21a9ac2c1b283f972dc8215

After researching branding guidelines, I made sure to find imagery which was suited for purpose and a high quality for the website. During the creation of COMX19, there was minimal imagery used in the advertising and website aside from the profiles and since we had a photographer take images I decided to use these for COMX20. By making sure these images conveyed a happy, engaging and fun personality, visitors are able to see a brand which also showcases positivity and engagement (Panda, 2006) - this is essential for the games industry as employers will want to work with positive, hard-working and friendly faces and that is the purpose of the COMX exhibition.

Panda, T. (2006). Contemporary Marketing. 1st ed. Hyderabad, India: ICFAI University Press, p.38.

4f9c6db44781e311a18f6846c12e7063

To further promote the social media of COMX20, I introduced a pop-up window using Elementor on the website. While users can consider this method of advertising to be intrusive (Warner, 2011), it can easily be closed or disabled using an Ad Blocker - however, having social media links shown to the user over the main website allows them to see that they are available and may entice the user into visiting/following the sites.

Warner, C. (2011). Media Selling. 1st ed. New York, NY: John Wiley & Sons, Chapter 17.

I made sure to incorporate the colours of the branding guidelines into this box; I used Robin's Egg Blue to show a high contrast and have the box look slightly different than the normal contrast, this allows the pop-up box to stand out more than it would normally.

72a2ba47eb69ee79896e619720a89693

Conclusion

In conclusion, creating the branding guidelines and website for COMX20 has given me a new insight into marketing, its implementations and the overall production process for an event further.

Strengths

The branding guidelines I have produced offer a simple and intuitive guide to producing material for COMX20. By implementing the marketing techniques I have learnt previously, the seven deadly wins and the plugins within WordPress and Elementor, I believe I have created a brand that could be used by the University of Gloucestershire for the event which conveys an excellent front and back end - especially in terms of usability, visuals and data entry. I am very happy with how this project has concluded.

Weaknesses

The weakness of my brand could also be how simple it is - the simple black and white colours could arguably be considered as boring due to its lack of colour. The website could also have coded areas to allow for further customisation of a students' page by the students themselves, but I do not have this knowledge and cannot implement it during the current timeframe.

Next time?

If I had more time for this project, I would like to add further functionality to the student profiles which would allow it to work similar to the Fiverr service. This would allow students to be hired by those in the industry and would also allow me to implement the monetization element of the seven deadly wins. I believe this would allow my website to stand out thoroughly. 

Website Link: s1602904.ct6014.uogs.co.uk (Please contact me if this link is not live).