ROLE: PRODUCT DESIGN LEAD/ WEB DESIGNEr
Reading School of Art
Team: 7 people
Completion time: 2 months
Completion time: 2 months
The common room
About the project
The University of Reading annually hosts a BA/MA art exhibition for final year students. In tandem, a publication and website are designed to promote their work as a calibration and collective presentation to peers, family and friends, the public, alumni, and possible employers. Additional graphic material such as posters and banners are also produced for promotion.
Project name: Art Degree Show Website and Catalogue
Location: Onsite
Client: Reading School of Art
Role: Project design Lead/Website Designer
My Role
1.Served as project manager and creative director, maintain contact with the clients via Email, Teams meetings and WhatsApp messaging. Communicate with supervisor, Rachel Warner with additional help from James Lloyd. Face to face meetings and supervisors are organised to which input and note taking are provided.
2. Defined wireframes
3. Designed the website
4.Offer creative and pragmatic ideas and solutions to problems
What I most accomplished
1
Designed web template, that will be used in future as brand guidelines for Reading School of
Art
30
Developed an implemented an idea or archive website, that will serve for the next 30years.
90%
Payment usability was improved
1. Produced inclusive/accessible design
2. Simplified user experience by producing minimalistic web layout
4. Decided most final design based on users feedbacks/data, then the design outcome looks more clean, simple and clever
The University of Reading annually hosts a BA/MA art exhibition for final year students. In tandem, a publication and website are designed to promote their work as a calibration and collective presentation to peers, family and friends, the public, alumni, and possible employers. Additional graphic material such as posters and banners are also produced for promotion.
Project name: Art Degree Show Website and Catalogue
Location: Onsite
Client: Reading School of Art
Role: Project design Lead/Website Designer
My Role
1.Served as project manager and creative director, maintain contact with the clients via Email, Teams meetings and WhatsApp messaging. Communicate with supervisor, Rachel Warner with additional help from James Lloyd. Face to face meetings and supervisors are organised to which input and note taking are provided.
2. Defined wireframes
3. Designed the website
4.Offer creative and pragmatic ideas and solutions to problems
What I most accomplished
1
Designed web template, that will be used in future as brand guidelines for Reading School of
Art
30
Developed an implemented an idea or archive website, that will serve for the next 30years.
90%
Payment usability was improved
1. Produced inclusive/accessible design
2. Simplified user experience by producing minimalistic web layout
4. Decided most final design based on users feedbacks/data, then the design outcome looks more clean, simple and clever
Design Process
1️⃣ Accept & Analyse 2️⃣ Define 3️⃣ Ideate 4️⃣ Select 5️⃣ Prototype 6️⃣ Evaluate
Project name: The Common Room
Location: Reading, UK (on-site)
Client: Reading School of Art
Time: 4 months
Role: Project design Lead/Website Designer
Location: Reading, UK (on-site)
Client: Reading School of Art
Time: 4 months
Role: Project design Lead/Website Designer
Photograph: Meeting with clients
Brief
Publication
The clients expressed they wanted the publication to be a document of student work in progress, with informal tonality. Examples produced by the clients suggested a grunge design aesthetic was desired.
The clients initially suggested a recycled paper stock and quantity of 300-350 copies produced. Among this were suggestions of an A5 format and open back binding, all of which to distinguish itself as a modest publication from prior years.
Website
The website was requested to be a separate conceptual entity, having little to no relation to the design aesthetic and tone of the publication. The website was desired to contrast such in a way that presented work as finalised pieces with formal tonality. To reflect this, they requested a clean contemporary feeling design, reminiscent of art galleries aesthetic.
Content
Forty-two BA students and 11 MA students partook in both deliverables, offering images of work in progress for the publication, intended to be edited, and more formally photographed bodies of work for the website. MA students requested that they be clearly presented as separate from BA students, featuring additional text about relative work.
Goals
Some goals have been set with the clients for the publication and website:
Publication
o To represent 1990’s grunge aesthetic and design principles
o To present a modest and informal tone
o To avoid feeling structured and boring
o To suggest artistic flare
Website
o Minimalist approach with a clean and formal aesthetic.
o Easy user journey and simple navigation
o To be a platform to celebrate and promote final pieces ofwork
Deliverables
Primary
1. A printed publication–203mm x 258mm format
2. A WordPress website adaptable for mobile and desktop screens.
Secondary
1. Opening night Poster–A3 Format
2. Public Viewing Poster–A3 Format
Communication and project structure
In attempt to uphold efficient communication, we faced challenges in receiving content late (images and text) and struggled to communicate with one of our team members during the project’s duration. Obtaining the work requested on time led us to a later organised submission.
Design Process
Ideations
Publication and poster
From initial meetings, the client loosely described a work in progress concept, to which Sam created a mood board, drawing inspiration from low budget grunge zines. The clients wanted work to be exclusively black and white, but colour examples were included in the board to encourage reconsideration. This helped solidify the aesthetic style and conceptual direction of the publication. The clients felt all examples embodied their concept, but gravitated towards the ‘of cinema and theatre’ zine, which was used as an initial baseline for further research.
Publication
The clients expressed they wanted the publication to be a document of student work in progress, with informal tonality. Examples produced by the clients suggested a grunge design aesthetic was desired.
The clients initially suggested a recycled paper stock and quantity of 300-350 copies produced. Among this were suggestions of an A5 format and open back binding, all of which to distinguish itself as a modest publication from prior years.
Website
The website was requested to be a separate conceptual entity, having little to no relation to the design aesthetic and tone of the publication. The website was desired to contrast such in a way that presented work as finalised pieces with formal tonality. To reflect this, they requested a clean contemporary feeling design, reminiscent of art galleries aesthetic.
Content
Forty-two BA students and 11 MA students partook in both deliverables, offering images of work in progress for the publication, intended to be edited, and more formally photographed bodies of work for the website. MA students requested that they be clearly presented as separate from BA students, featuring additional text about relative work.
Goals
Some goals have been set with the clients for the publication and website:
Publication
o To represent 1990’s grunge aesthetic and design principles
o To present a modest and informal tone
o To avoid feeling structured and boring
o To suggest artistic flare
Website
o Minimalist approach with a clean and formal aesthetic.
o Easy user journey and simple navigation
o To be a platform to celebrate and promote final pieces ofwork
Deliverables
Primary
1. A printed publication–203mm x 258mm format
2. A WordPress website adaptable for mobile and desktop screens.
Secondary
1. Opening night Poster–A3 Format
2. Public Viewing Poster–A3 Format
Communication and project structure
In attempt to uphold efficient communication, we faced challenges in receiving content late (images and text) and struggled to communicate with one of our team members during the project’s duration. Obtaining the work requested on time led us to a later organised submission.
Design Process
Ideations
Publication and poster
From initial meetings, the client loosely described a work in progress concept, to which Sam created a mood board, drawing inspiration from low budget grunge zines. The clients wanted work to be exclusively black and white, but colour examples were included in the board to encourage reconsideration. This helped solidify the aesthetic style and conceptual direction of the publication. The clients felt all examples embodied their concept, but gravitated towards the ‘of cinema and theatre’ zine, which was used as an initial baseline for further research.
With work in progress being an established theme, research was carried out, with photographing the art department for inspiration of how to present students work and draw on ideas for the publications design. A collection of ephemera was discovered, offering as a fun source of textures for the publication
It is necessary to choose a visual aid that is appropriate for the topic and audience.
Content of the publication
Text and images for individual BA and MA students were provided, to which the clients expressed a desire for a lack of structure. Regardless, the large amount of content needed devising into sections to avoid obvious repetition. The publication was mixed between, BA student work, MA student work, with integrated spreads of student photo booth images. The Photo Booth served to break up the flow of content and be a fun refection of the personalities in the department.
Text and images for individual BA and MA students were provided, to which the clients expressed a desire for a lack of structure. Regardless, the large amount of content needed devising into sections to avoid obvious repetition. The publication was mixed between, BA student work, MA student work, with integrated spreads of student photo booth images. The Photo Booth served to break up the flow of content and be a fun refection of the personalities in the department.
It is necessary to choose a visual aid that is appropriate for the topic and audience.
Initial discussions suggested a small format to suggest a zine like experience, however, content provided was typically photographic, and had limitations to how they could be edited to fit within the negative space of spreads. Experimentation into how photo heavy spreads could be formatted presented too much structure. As such, experimenting with a larger custom format inspired by Spin’s ‘Adventures in Typography’ (203mm x 258mm) was favoured. It was large enough, to blow images up across spreads, avoiding small content and offered a more relaxed integration of images, at high and low volumes.
Adopting symmetric margins, and asymmetric layout helped keep boarders consistent with image heavy spreads, whilst offer an underlying structure for each page that was adaptable. Implementing running heads and folios helped provide structure to the spread, whilst avoiding a strict dogmatic approach. The website features obvious use of symmetry to counter this, offering a sense of structure and consistency.
Adopting symmetric margins, and asymmetric layout helped keep boarders consistent with image heavy spreads, whilst offer an underlying structure for each page that was adaptable. Implementing running heads and folios helped provide structure to the spread, whilst avoiding a strict dogmatic approach. The website features obvious use of symmetry to counter this, offering a sense of structure and consistency.
Design development
1. Publication
Some different spreads have been suggested below for the development of the publication of the inside pages and cover.
1. Publication
Some different spreads have been suggested below for the development of the publication of the inside pages and cover.
Initial test publication cover:
Specification
Catalogue
· 203mm x 258mm Custom Format Portrait
· 4pp Cover prints 1/1 Nautilus Supreme White 250gsm
· 144pp text prints 4/4 throughout Nautilus supreme white 120gsm
· Perfect bound
Quantity
· 300 copies
Page dimensions
· 203mm x 258mm
· Spine Dimensions
12mm x 258mm
Bleed
· 3mm
The format was intended to feature light paper weight of 90gsm, like a zine, but the content required a thicker stock to prevent images from shining through. The thicker spine made it gravitate towards a expensive feeling publication, to which the design and aesthetic and porous paper stock relied on maintaining its sense of modesty. Additionally the quote had to be reduced to 300 copies as the larger format and colour prints drove prices up.
Specification
Catalogue
· 203mm x 258mm Custom Format Portrait
· 4pp Cover prints 1/1 Nautilus Supreme White 250gsm
· 144pp text prints 4/4 throughout Nautilus supreme white 120gsm
· Perfect bound
Quantity
· 300 copies
Page dimensions
· 203mm x 258mm
· Spine Dimensions
12mm x 258mm
Bleed
· 3mm
The format was intended to feature light paper weight of 90gsm, like a zine, but the content required a thicker stock to prevent images from shining through. The thicker spine made it gravitate towards a expensive feeling publication, to which the design and aesthetic and porous paper stock relied on maintaining its sense of modesty. Additionally the quote had to be reduced to 300 copies as the larger format and colour prints drove prices up.
Website Layout
The final decision was 4 columns and no menu with thumbnails of the main work, very clean minimalist layout of the website to have all the attention on the art pieces presented on the website. The thumbnails allow visitors to easily navigate to the pieces they are interested in, while the lack of a menu keeps the focus on the artwork itself. The 4-column grid helps to evenly distribute the artworks, creating a balanced and clear hierarchy.
Additionally, the use of white space on the website helps to draw attention to the artwork and prevent the website from feeling cluttered. The typography is also clean and minimalist, helping to create a cohesive overall design.
The final decision was 4 columns and no menu with thumbnails of the main work, very clean minimalist layout of the website to have all the attention on the art pieces presented on the website. The thumbnails allow visitors to easily navigate to the pieces they are interested in, while the lack of a menu keeps the focus on the artwork itself. The 4-column grid helps to evenly distribute the artworks, creating a balanced and clear hierarchy.
Additionally, the use of white space on the website helps to draw attention to the artwork and prevent the website from feeling cluttered. The typography is also clean and minimalist, helping to create a cohesive overall design.
Final version of the website
Ideations
Website
From initial meetings, the client loosely described a work in progress concept, to which I created a mood board, showing a few examples of websites. The clients requestd to have user-friendly website with minimalistic design. The clients loved concept and layout of https://www.ucl.ac.uk/slade/events/degreeshows, “White with simple content”.
Content
The content of the website includes:
Home page: The landing page of https://www.rsagraduates2022.art features a full-width banner video with the exhibition title, "Graduates 2022 MA/BA and logo on the top left. Further down the landing page, there is a list of the graduates whose work is featured on the website, with a thumbnail of each graduate's artwork and their name displayed in a clean 4 column grid layout.
Artist profiles: The website features individual pages for each of the graduates whose work is showcased. These pages include a profile picture, a brief bio, and a gallery of images showcasing their artwork. The personal page provides more information about the art pieces, it also has links to social media links. Social media links are represented as icons, for users to easily navigate and distinguish elements on the page.
Gallery: Carousel gallery features thumbnails of artist’s artworks showcased on the website. Clicking on a thumbnail brings up a larger image of the artworks and more information about the art piece.
Website is focused on showcasing the artwork of the graduates in a clean and minimalist way, with UX/UI friendly design.
Website
From initial meetings, the client loosely described a work in progress concept, to which I created a mood board, showing a few examples of websites. The clients requestd to have user-friendly website with minimalistic design. The clients loved concept and layout of https://www.ucl.ac.uk/slade/events/degreeshows, “White with simple content”.
Content
The content of the website includes:
Home page: The landing page of https://www.rsagraduates2022.art features a full-width banner video with the exhibition title, "Graduates 2022 MA/BA and logo on the top left. Further down the landing page, there is a list of the graduates whose work is featured on the website, with a thumbnail of each graduate's artwork and their name displayed in a clean 4 column grid layout.
Artist profiles: The website features individual pages for each of the graduates whose work is showcased. These pages include a profile picture, a brief bio, and a gallery of images showcasing their artwork. The personal page provides more information about the art pieces, it also has links to social media links. Social media links are represented as icons, for users to easily navigate and distinguish elements on the page.
Gallery: Carousel gallery features thumbnails of artist’s artworks showcased on the website. Clicking on a thumbnail brings up a larger image of the artworks and more information about the art piece.
Website is focused on showcasing the artwork of the graduates in a clean and minimalist way, with UX/UI friendly design.
Reflection
Our reflection as a team for this project as a whole was an enriching experience. We have not worked and experienced a job like this one before, and this had taught us a lot. As we were as a team having different responsibilities, the communication was essential for this project to move forwards. However, some miscommunication appeared in the group, and this has led us to some issues and delay in the work. It is a shame that we haven’t worked as a group effectively and submitted this project last minute, as much more work could have been done towards this project. On the overhand, the communication between Sam and Eva was efficient and we enjoyed working as a group together. In the future, we will apply carefully what we have learnt during this job and what should be improved to work more efficiently with the clients and during other potential group work.
❤️
