Category: teaching

Pixel Party

Students enjoying the game, in preparation for the event on the 4 October 2023

 

Working as part of the Baseline Shift team prior to this job, we knew we wanted to connect more with the guests we have and understand more about their career and experiences to allow ourselves the best insight into future design paths. We knew we wanted to take on board the Pixel Party job as not only did it link to Baseline Shift and build on the communication element but would also allow us to experiment with the deliverables that would help build our portfolios, for example Mia working on motion graphics and Habibah on branding. The freedom of this job would enable us both to incorporate our current strengths within design as well as build on those we are interested in.

 

Toshi Omagari giving his talk for students and staff

About

Week 2 of the Autumn Term kicked off with a whole day with Toshi Omagari returning to the department! The day consisted of an afternoon and evening full of typography fun starting with a Baseline Shift Talk also hosted and organised by ourselves followed by a Post-it note and Lego letterpress workshop, ending the day with a department party including food, drink, music and most importantly games.

Toshi Omagari is a typeface designer specialising in arcade game typography and alumni of the MA Typeface Design course at the University of Reading. His book, ‘Arcade Typography, focusses on pixel-fonts used in arcade games between the 70­s and 90s and is available in the department. His passion for games is truly inspiring and the work he does within this field is profound.

Due to unforeseen circumstances, the original set date for the event was rescheduled from February to October. This gave us more time to work on furthering our deliverables and added a Post-it note storage system to our outputs.

 

Toshi’s talk

We started the day with Toshi’s Baseline Shift session, exploring his career in type design to both undergraduates, postgraduates as well as staff here in the department. He presented his in-depth research on arcade game typography and how they have developed over the years, specifically focussing on the characteristics of glyphs. It was very interesting to see the evolution of arcade typography from black and white to colour to the introduction of elements such as drop shadows and gradients. He also spoke about life after Reading and different fields in which he explored initially before finding his current passion. The very inspirational talk left many students feeling motivated with Part 1 student Ethan saying:

“It was an enthralling talk that really showed the lineage of digital fonts throughout video games – One of the best talks!”  

 

Students and staff engaging in the Q&A session of the Baseline Shift talk

 

Workshops

Following the talk, Toshi  hosted a Master’s session on type design, and then assisted us in hosting a Pixel Post-It note and Lego Letterpress workshop for the students. This session consisted of creating glyphs using both Post-Its and Lego using colours to create depth and shadows, much like arcade typography.

 

Toshi during his master’s session.

 

The Post-it note workshop decided to work as a group to create an entire alphabet of pixel font letters. The posters used an 8×8 grid to format the letters, which students created based on fonts in the Arcade Typography book, however one student: Emma from Part 1 was recognised and awarded with a prize for the best designed letter!

 

Students in action for the Post-it note workshop.

 

The Lego letterpress workshop invited students to design 8×8 Lego plates to print their letters. As the only colours available were green, blue, purple and pink, some students chose to layer the available four inks to create a dynamic printed letter.

 

Lego letterpress productions.

 

These letters were then handed over to Toshi during the evening to announce a winner, Lydia from Part 3 taking the trophy home and saying:

“I thoroughly enjoyed the pixel font workshop, not only was it an interesting challenge, it was a perfect excuse to use the letterpress equipment! A massive thank you to those who organised it!”

 

Arcade evening

 To round out the day, we hosted an arcade themed department social attended by students of the BA, MA and PHD design courses, as well as staff and friends. The attendees enjoyed the carefully curated arcade theme playlist, as well as the games, food, and drinks.

The event was a great opportunity to bring the department together and welcome the new Part 1 students of the BA course. We’d like to thank Toshi and everyone who attended for the awesome turnout!

 

Toshi enjoying the dance mat

Post-it notes storage unit

With the additional deliverable added as the deadline extended, we created prototypes to accommodate the hundreds of Post-it’s the departments holds. This began by measuring and counting stock and finding a way that we could display this in an aesthetic way.

 

Cardboard prototype

We chose to create a box, with 8×8 slots joining to create boxes for individual colours and found this worked well, so proceeded with materials involving acrylic and designing this complimenting existing branding. Experimenting with placement, we decided that organising the colours by hue and shade would be the best option for easy recognition and access of different variations.

 

Prototyped storage unit, created using the laser printer

 

Considering feedback and testing, we opted to order external acrylic boxes to house our grid in. Doing so allowed for a more stable unit, which is entirely square and the edges are flush. One issue we had building this using the laser printer was having to use multiple sheets of acrylic to build the base, which felt unstable. The glue used to attach elements also broke away after use, which showed we needed a stronger frame to hold the Post-it notes.

We chose to use a black acrylic for the external elements as it contrasted the colours of the paper and fit the branding of the event. This created a sleek appearance, which we decided did not need additional branding or decoration.

We made an additional unit for department displays and activities, recycling materials where possible from the prototypes. These units are stronger, and have handles to hold the weight more comfortably and manoeuvre more easily.

 

The completed Post-it note storage units

Posters

We designed the posters using relevant typography and decided on a black background with the colours of yellow, cyan, and pink. We based the design off of classic arcade games, and used Pac Man to attract students who were not overly familiar with arcade gaming. The box Pac Man follows groups the core information, with the main event title and decorative pixels aiming to show movement on the ‘screen’.

 

Poster design, printed and displayed around the department.

Animation

The animation featured on the department Instagram and Facebook. Social Media posts which are motion tend to increase engagement, which we wanted to take advantage of in promoting the event. The glitch and bounce mimic the movement of arcade games and served as a punchy teaser to build anticipation before the event.

View the animation here

 

Screens

The main screen at the department featured the 8X8 logo, to remind students and staff of the upcoming event.

 

Department static screen

 

Social posts

Social media was the primary method of marketing, as the department Instagram is the most frequented point of contact for the BA students. These were shared on Instagram and our Facebook groups, as well as a daily countdown on the stories to further build anticipation and act as a reminder. Social media and email marketed the sign-up form for the workshops, which were fully booked for the day of the event. You can see the day unfold on our department Instagram story, where we documented the events @uortypography where the highlights are still available.

 

Example story countdown post

Playlist

Researching into arcade inspired music and games using ‘chip-tunes’, we carefully curated a playlist representative of this to be played throughout the night during the department social. As well as this, we additionally added some songs popular in the noughties party scene to cater for our young audience and create a livelier atmosphere.

Here is a link to have a listen!

https://open.spotify.com/playlist/4luy20bYOQF57xwMuTw8oO?si=ace0935cd36f45e5

Food and drink

We concluded that the food served throughout the party should reflect the theme so bought things served as shapes such as circles or squares and involving colour. Our shopping list involved pizza, marshmallows, and brightly coloured drinks, both alcoholic and non-alcoholic as well as many more.

 

Food and drinks being enjoyed by the attendees

 

Games Organisation

The games were a popular feature, with dance mats and arcade video games within two of the largest rooms in the department. To frame the iMac screens, we designed a foam board consisting of instructions on how to operate the controller and promote the branding for the vent further.

 

MA student enjoying the game, with the frame surround

 

Games room ready for the start of the event

 

Decoration

Finally, the last part of planning was organising decoration to revamp our standard department to something special for the night. We did this with paper chains and balloons representative of our colour scheme as well as lanterns, LED and fairy lights to create a arcade vibe.

The decoration for the rooms.

 

Conclusion

We both had a lot of fun planning this and seeing our ideas come to life with an amazing turnout. After overcoming organisational obstacles, it was all worthwhile and we thoroughly enjoyed connecting with everyone in the department more. As team leaders for Baseline Shift, it was valuable to take on another role more closely linked with the people we host, to build connections, network and prepare us for the future. It not only taught us event and time management, but how to collaborate with different people as well as develop our design skills along the way. We each were able to apply our existing knowledge in areas we were confident in (Habibah, branding and Mia motion graphics) and were open to learning new things, making the whole process a lot smoother.

For events like this in the future, we would find a longer run-up to the event useful. Unfortunately with only 2 weeks to promote, we felt numbers could have been higher but overall the turnout was good considering this. We would have also liked to encourage attendance across the year groups face-to-face or using printed material ourselves . Our supervisor helped us get the attention of the whole course through emails and verbal promotion, which we believe encouraged Part 1s to be particularly involved and present.

We struggled with time dedication and motivation to produce our storage deliverable. Without experience in product design, the novelty of this process was often challenging and tedious. Despite this, we did eventually find it rewarding to have a physical item alongside the iMac frames to show our hard work.

Thank you for everyone who attended, and we hope you have been inspired by the events of the day. Another massive thank you to Toshi, for doing this. It wouldn’t have been possible without you!

 

– Habibah Begum and Mia Bryan, 2024

 

*There is no Trello Board for this Real Job as advised by our supervisor*

FAB Lab Laser Cutter Instructions

How to laser cut using Glowforge materials

1. Create your file for laser cutting using Adobe Illustrator and save file as SVG, PDF, JPG, GIF, BMP or PNG.
2. Login in to glowforge.com.
3. Switch on laser cutter (switch at back of machine) and place Glowforge material on bed of laser cutter. The camera will read the QR code on the Glowforge material and set the speed and power using the QR code.
4. Select ‘Create new design’ and ‘Upload a file’ (see photo 1). Your computer screen will display the bed of the laser cutter, the material you placed on the bed of the laser cutter, and the file you uploaded. If you are using black acrylic, put a piece of white paper under it so you can see it. Make sure to remove it before laser cutting.

 


Photo 1

5. Move the uploaded file to the space on the material you wish to cut (make sure it is within the material and not overlapping any edges).
6. Check the ‘Engrave’ and ‘Cut’ settings to check your file will be engraved and cut as desired. Solid shapes will be engraved, thin lines will be cut (if the uploaded file is not correct return to Illustrator, adjust file, and upload a new file).

7. Switch on extraction unit (the laser cutter will not run without fume extraction).
8. Press ‘Print’ to send your file to laser cutter. This is the stage where you would remove white paper from the machine if using black acrylic. You may need to repeat some previous steps as the lid has been opened).

9. To start laser cutter, press flashing switch on top of laser cutter. Your computer screen will display how long your file will take to cut and when process is complete. If anything goes wrong, press ‘Stop’ on your computer.
10. Wait until your computer says the cutting has finished and then open lid and remove material.
11. Switch off laser cutter and extraction unit.

 

How to laser cut not using Glowforge materials

1. Create your file for laser cutting using Adobe Illustrator and save file as SVG, PDF, JPG, GIF, BMP or PNG.
2. Login in to glowforge.com.
3. Switch on Glowforge laser cutter (switch at back of machine) and place material on bed of laser cutter.
4. Select ‘Create new design’ and ‘Upload a file’ (see photo 1). Your computer screen will display the bed of the laser cutter, the material you placed on the bed of the laser cutter and the file you uploaded. If you are using black acrylic, put a piece of white paper under it so you can see it. Make sure to remove it before laser cutting.


Photo 1

5. Move your uploaded file to the space on the material you wish to cut (make sure it is within the material and not overlapping edges).
6. Check the ‘Engrave’ and ‘Cut’ settings on your file to make sure your file will be cut and engraved as required. Solid shapes will be engraved, thin lines will be cut (if the uploaded file is not correct return to Illustrator, adjust file, and upload a new file).

7. Switch on extraction unit (the laser cutter will not run without fume extraction).
8. Press ‘Print’ to send your file to laser cutter. (This is the stage where you would remove white paper from the machine if using black acrylic. You may need to repeat some previous steps as the lid has been opened).

9. To start laser cutter, press flashing switch on top of laser cutter. Your computer screen will display how long your file will take to cut. If anything goes wrong, press ‘Stop’ on your computer.
10. Wait until your computer says the cutting has finished and then open lid and remove material.
11. Switch off laser cutter and extraction unit.

FAB Lab Cricut Maker Instructions

How to die cut plain paper, card and adhesive vinyl

 

1. Move Cricut Maker to table which allows for movement of the cutting mat (see photo 1).


Photo 1

2. Open top and front flaps and switch Cricut Maker on (see photo 2).


Photo 2

3. Open ‘Cricut Design Space’ app and click ‘Canvas’ tab.
4. Upload a SVG, JPG, GIF, BMP, PNG or DXF file, or create your own design in the ‘Cricut Design Space’ app. You can change the colour of your shapes to make them easier to see on the canvas background by selecting items in the ‘Layers’ window and changing the colour (small box on top tool bar, see photo 3). Once upload complete select ‘Add to Canvas’.


Photo 3

5. Move your selection to fit within your page size (always leave a margin of at least 1.5cm).
6. Select image type based on the complexity of image, then press ‘Continue’.
7. In ‘Layers’ panel select ‘Attach’ to group your items together (if you don’t do this your shapes will be moved around by the app in the next stage to optimise the cutting material) (see photo 4).


Photo 4

8. Select ‘Basic cut’ in ‘Operation’ tab at the top of your screen (see photo 5A).


Photo 5A

9. Select ‘Cricut Maker’ in ‘Maker’ tab (see photo 6).


Photo 6

10. Select ‘Make’ (top right) and select relevant cutting mat size. Place paper stock to be cut on cutting mat in top left corner of grid and load cutting mat in placement slots on Cricut Maker loading bed (see photo 7A).


Photo 7A

11. Select ‘Continue’ and follow prompts on screen to select paper stock (see photo 8) and start the process by pressing buttons on Cricut Maker as directed on screen until die cutting complete (see photo 9).


Photo 8

Photo 9

12. Switch off Cricut Maker. Return to side area for storage, return cutting mat to storage area.

 

How to die cut printed paper, card and sticker stock

1. Move Cricut Maker to table which allows for movement of the cutting mat (see photo 1).


Photo 1

2. Open top and front flaps and switch Cricut Maker on (see photo 2).


Photo 2

3. Open ‘Cricut Design Space’ app and click ‘Canvas’ tab.
4. Upload a SVG, JPG, GIF, BMP, PNG or DXF file, or create your own design in the ‘Cricut Design Space’ app. You can change the colour of your shapes to make them easier to see on the canvas background by selecting items in the ‘Layers’ window and changing the colour (small box on top tool bar, see photo 3). Once upload complete select ‘Add to Canvas’.


Photo 3

5. Move your selection to fit within your page size (always leave a margin of at least 1.5cm around edges).
6. Select image type based on the complexity of image, then press ‘Continue’.
7. Select ‘Print Then Cut’ in ‘Operation’ tab (see photo 5B).


Photo 5B

8. Select ‘Cricut Maker’ in ‘Maker’ tab (see photo 6).


Photo 6

9. In ‘Layers’ panel select ‘Flatten’ (to group your layers and so that the printed area won’t be cut by Cricut Maker after printing).
10. Select ‘Make’ (top right) and select relevant cutting mat size. In next window check paper size is set to A4, select ‘Continue’. In next window select ‘Send to printer’, select the printer you require and ‘print’ (if using bypass tray select ‘Use system dialogue box’). The Cricut will add required registration marks to your print (photo 10).


Photo 10

11. Place print on cutting mat and place mat in placement slots on Cricut Maker bed (see photo 12).


Photo 12

12. Return to Cricut screen and select ‘Base material’ (paper stock) to the type of paper stock you are cutting. Follow prompts on screen pressing buttons on Cricut Maker as directed on screen until die cutting complete (see photo 9).


Photo 9

13. Switch off Cricut Maker. Return to side area for storage, return cutting mat to storage area.

 

How to die cut foiled paper, card and sticker stock

1. Move Cricut Maker to table which allows for movement of the cutting mat (see photo 1).


Photo 1

2. Open top and front flaps and switch Cricut Maker on (see photo 2).


Photo 2

3. Open ‘Cricut Design Space’ app and click ‘Canvas’ tab.
4. Upload a SVG file with black toner area for foiling set to Cyan 50%, Magenta 50%, Yellow 50% and key 50% (when upload complete select ‘Add to Canvas’). You can change the colour of yourshapes to make them easier to see on the Cricut canvas background by selecting items in the’Layers’ window and changing the colour (small box on top tool bar, see photo 4).


Photo 4

5. Move your selection to fit within your page size (always leave a margin of at least 5cm around edges).
6. Select image type based on the complexity of image, then press ‘Continue’.
7. Select ‘Print Then Cut’ in ‘Operation’ tab (see photo 5B).


Photo 5B

8. Select ‘Cricut Maker’ in ‘Maker’ tab (see photo 6).


Photo 6

9. In ‘Layers’ panel select ‘Flatten’ (to group your layers and so that the foiled area won’t be cut by Cricut Maker after foiling).
10. Select ‘Make’ (top right) and select relevant cutting mat size. In next window check paper size is set to A4, select ‘Continue’. In next window select ‘Send to printer’, select the printer you require and ‘print’ (if using bypass tray select ‘Use system dialogue box’). The Cricut will add required registration marks to your print (see photo 10).


Photo 10

11. Attach foil to area of toner to be foiled using Washi tape (see photo 11) and run through Toner Foiler (see Toner Foiler instructions). Remove unused foil.


Photo 11

12. Place foiled vinyl on cutting mat and place mat in placement slots on Cricut Maker bed (see photo 12).


photo 12

13. Return to Cricut screen and select ‘Base material’ (paper stock), ‘Vinyl’ and ‘Make’. Follow prompts on screen pressing buttons on Cricut Maker as directed on screen until die cutting complete (see photo 9).


photo 9

14. Switch off Cricut Maker. Return to side area for storage, return cutting mat to storage area.

Promoting the Sustainable Development Goals

Spring Term 2024

An exhibition by second-year students in the Department of Typography & Graphic Communication

The work featured in this exhibition are posters designed in response to a brief inspired by Project Everyone, a United Nations Global Partner dedicated to promoting the Sustainable Development Goals (also known as the Global Goals). The work aims to inform, engage, and inspire individuals, organisations, and institutions to take meaningful action towards achieving the goals by 2030.

The task

The project to promote the Global Goals was devised and led by tutor Greg Bunbury. Each student was given the task of creating a compelling poster and supporting materials to promote one of the seventeen goals. Their work needed to incorporate graphic, typographic, or illustrative elements, and feature the ‘Halftime’ campaign hashtag #ImagineWinning, as well as project branding and a call-to-action.

The exhibition

The display of twenty-nine posters has been installed in the Department’s exhibition space, grouped under four headings: economy, equality, environment, and well-being. The exhibition was designed by second-year students, Aaron James and Olivia Moors, as part of the Department’s Real Jobs scheme. The exhibition project was supervised by tutors Sara Chapman and Geoff Wyeth with support from Department colleagues. The posters and other exhibition graphics were printed by the University’s Creative and Print Services.

The exhibition has been made possible by a generous award of funding from the University of Reading’s Arts Committee. Following its display in Typography & Graphic Communication, the exhibition will travel to the University’s library foyer where it will be installed for an additional run.

Installation

MagCulture Trip 2022

During the Autumn term, the Department organised and paid for a trip for the Part 3s to go to London and visit the MagCulture. Not only were we immersed in inspiration for our own magazine designs and concepts, but we also enjoyed a talk from Jeremy Leslie about the current state of the independent magazine scene. After the talk and trip were done, the year went out together as a Department social in London. With train tickets provided by the department through the Typography Student Fund we were able to get out of the building and experience magazine world in its fullest form.

During Jeremy’s talk, he showed us a range of current trends and creative ideas… to to the extremes of a single plank of wood being sold as a magazine! He opened up his shop to us, which covered every genre in the magazine world, where we were allowed to browse, take pictures and experience the materiality of these objects firsthand. Take a look at their instagram for inspiration: https://www.instagram.com/magculture/

From all of us in Part 3, I would like to thank Sara and Rob for organising this trip. We’d also like to thank all the clients from Real Jobs who have donated to the Typography Student Fund, making an educational event fun.

 

Cover Inspo


Inside pages Inspo

 

Designing a brand onboarding system with Bottomline Technologies

Amrita Shrilal has been involved in an exciting new collaboration with Bottomline Technologies this past year. Amrita is one of our MA Communication Design Graphic Design Pathway students graduating this week. She’s also a BA Graphic Communication (Hons) alumnus.

Bottomline focuses on transforming complex business payments and processes into simple, smart, and secure systems. They work with financial companies and institutions globally, and are widely recognised as a payment and collections enterprise. They have banking relations with global banks, UK banks and, building societies, growth banks and payment service providers.

A young woman smiling. She has long dark hair and is wearing a striped top.
Amrita Shrilal (MACD class of 2021)

Amrita has a particular passion for user interface design. To develop experience in user interface design for the financial sector, she undertook a design brief for Bottomline’s Head of UX Design (EMEA), Kellie White and, Senior UX Designer and Reading alum, Matthew Standage for her MA professional practice assignment. Dr Jeanne-Louise Moys, MACD Graphic Design and Information Design Pathway lead, supervised her project.

The brief gave Amrita the opportunity to explore approaches to designing a system that allows customers of different-sized businesses to customise the interface design, of a particular product, to match their brand needs. The challenging aspect of the brief was creating a seamless and easy process of designing elements of pages for customers with different levels of expertise on brand and webpage design. It required her to consider ways of presenting complex information and processes in a more straightforward method for end-users. Her design decisions were supported by her research into UX design, market competitors and the development of personas which helped her understand the user and business needs.

Amrita said: “I enjoyed this project as it was different from all the other UX projects I had done in the bachelor programme. It focused on Business-to-Business (B2B) rather than Business-to-Customers (B2C) which is more complex as you need to consider not just the user’s goals but different types of business capabilities and interests. I had to think about how a particular organisation could utilise or benefit from the features of the system to make their process of designing the web interface a seamless experience.”

The outcome of this project was a prototype of an interface system that allows businesses to brand themselves within Bottomline’s products. It considers different user design needs and attempts to make the process of designing interfaces straightforward to those who are not familiar with design conventions or terminology. Some of the features within the system included editing the colour scheme, text styles and button styles.

Animation showing functionality within the project
Process of uploading the brand logo and ability to view the placement of these elements in different pages.

Reflecting on the project, Amrita said: “the project was a stimulating experience as I had to think about different user perceptions of design elements. I had to constantly ask myself whether it would be easily understood by someone without any design experience. Despite that, I enjoyed the opportunity to collaborate with Bottomline on an ongoing project and it helped develop my understanding of UX/UI design”.

Kellie White said: “Amrita did a fantastic job of taking a complex problem and making it simple, a difficult task to accomplish. She worked well to align to good UX process throughout, from research through to ideation and user testing. I was thrilled with the outcome, she achieved a well thought out design solution and growth in her UX skillset through the experience. Well done Amrita! We look forward to future collaboration with the Department.”

Matthew Standage added: “It was a pleasure to collaborate with Amrita and the Department on a professional practice brief. We were not only impressed with the overall quality of the outcome, but also the thorough research and design thinking that went into the process. One of the common challenges in B2B user-experience is striking the balance between complexity and flexibility. The work Amrita produced solves this problem well, using both visual and interaction design techniques to progressively disclose more advanced options to the user and provide guidance when necessary. We look forward to seeing how we can integrate her work and thinking into future product releases.”

This project is the first collaboration between Bottomline and the Department of Typography & Communication. We look forward to exploring new briefs with them for our postgraduate students to work on in the future.

We also look forward to welcoming Matthew back in January for the two-day “Branding and user experience” workshop that he leads for our MA Graphic Design and Information Design pathway students in the spring term.