This Creative Boom article explores how different designers responded to a branding challenge to create a visual identity for a fictional coastal music and arts festival. The article showcases diverse design responses, each using typography, colour, and illustration to reflect the emotional experience of the event. It highlights that successful branding (for music and cultural venues) goes beyond visual aesthetics and that it should evoke an emotional connection and create a sense of place.
A key insight from this article is the importance of storytelling through design. Many participants combined retro visual styles with modern graphic design to really represent the festival’s sound and movement. This demonstrates how visual identity can translate music and atmosphere into a cohesive design language. The article makes it clear that effective branding for music-related environments should feel authentic and immersive, giving audiences a taste of the experience before they arrive.
This article supports my proposed rebrand of Solos Music Cafe, as both projects share a focus on creating a music centred cultural experience rather than simply a logo or a visual system. Like the festivals branding examples, my cafe rebrand look to merge sound, culture and community into one cohesive identity. It reinforces the ides that good branding should invite people to participate and make them emotionally connect – In my case, by supporting local musicians and offering an engaging cafe environment. The articles examples of blending retro style with modern design resonates strongly with my project. Solos Music Cafe will include nostalgic musical elements e.g vinyls whilst introducing a modern twist through interactive features such as the NFC sticker. This technology allows customers to engage directly with the cafes music, reflecting how branding can evolve alongside audience behaviour and technology.
In Summary, the article validates my approach by demonstrating that branding for music and cultural spaces should combine visual storytelling, emotional design and modern interactivity to build a meaningful experience for its audience.
For the 360-degree content task, I designed and rendered a fully immersive 3D environment in Blender, choosing to create a prison cell scene. I wanted to go beyond simply following the tutorial or example provided, so I built and several of the main assets myself, including the bed, window bars, and smaller objects around the cell. I chose this confined setting deliberately because working with a limited space meant I could concentrate more on the core principles of 3D environments—the lighting, atmosphere, and realism.
Process of adding iron bars to the model
From the beginning, my goal was to make the space feel believable but also emotionally heavy. I used basic compositional and lighting principles to give the scene a distinctive tone. The main light source was a sunlight asset, providing ‘daylight’ filtering through the barred window, which casted shadows across the floor. I paired this with a ceiling point light to simulate the artificial glow often seen in real prison cells. The combination helped to soften the darker areas whilst still maintaining a slightly moody atmosphere. Getting the balance right between natural and artificial light took a lot of trial and error, but it also helped me better understand how light direction and intensity can completely alter the emotional tone of a 3D environment. The walls and the floor textures were found for free online, I tried to find a worn and rustic textures for both the wall and the floor to reflect realism.
Blender screenshot showing the positioning of the Sun asset
When it came to camera placement, I applied immersive UX principles related to embodiment and proximity (Sahu, 2025). I set the viewer’s perspective at around human height, giving them the sense of physically standing inside the cell. This choice was really about evoking empathy and discomfort, two feelings that are quite impactful when exploring themes like imprisonment and confinement.
I realised during the process that even without any animated characters, dialogue, or narrative, the environment itself can tell a story. The positioning of objects, the texture of the walls and the way the lights have been set up all work together to create a mood. This is what’s known as environmental storytelling, and it’s something I’ve grown to appreciate much more after completing this task.
This 360 environment could easily fit within a story sphere or interactive documentary, as it invites reflection on broader social issues. I can imagine using it in an educational or social justice context, where viewers could explore the emotional reality of imprisonment in a safe but thought-provoking way. If I were to develop it further, I’d love to add interactive elements such as moving assets, ambient sounds (like footsteps or cell doors closing) or even a brief narrative voiceover to make the experience more dynamic. This task definitely improved my confidence in Blender, particularly in lighting and atmosphere design, and gave me a foundation of skills I can build on for future projects.
For the WebVR task, I created an interactive virtual gallery using FrameVR, a web-based engine that enables users to explore and present in 3D spaces directly through their browsers. I chose this environment to showcase two of my previous projects—one with a 3D model, and the other with a logo design sequence, allowing me to present my work in a more engaging and interactive way than a traditional portfolio.
Cab-E section of the environment Cab-E Logo EvolutionTHRIVE Section of the environment
FrameVR supports a variety of media formats such as videos, images, and 3D models (Benham and Budiu, 2022). This made it possible for me to combine static and moving content to form a multi-media experience. I arranged my assets using spatial hierarchy, giving each project its own dedicated section with clear sightlines so visitors could intuitively know how to navigate.
THRIVE video Ad
A big part of this task involved thinking like a curator rather than just a designer. I had to decide where users would spawn, how they would move through the space, and what they would see first. These decisions were guided by principles of immersive UX and spatial narrative (Sahu, 2025). I added a few interactive features such as clickable videos and a magnifying glass tool so users could zoom in on smaller details. Additionally, I imported a 3D model of an energy drink can from a previous project and applied a gentle rotational animation. It’s a small detail, but it helped to bring a sense of movement to the gallery without becoming a distraction. This subtle use of motion reflects Eriksen’s (2023) point that animation should enhance engagement rather than overwhelm it.
Example of using the magnifying glass feature
Creating this gallery taught me how digital portfolios can be more than just a bunch of images and that they can be turned into immersive storytelling spaces. I noticed that giving users the freedom to move around and explore encouraged curiosity. Some might spend longer looking at one project than another, which makes the experience more personal. It’s also interesting how translating 2D work into 3D environments changes its impact. For instance, my flat logo design felt more substantial when placed in a three-dimensional setting.
If I were to continue developing this, I’d like to turn it into an online exhibition space that could be used for professional showcases or even client presentations. The biggest challenge was balancing visual aesthetics with usability—making sure users could navigate easily without feeling confused or distracted. In this task I learned a lot about how digital spaces can convey identity and personality just like a physical gallery would.
Augmented Reality & UX
For the Augmented Reality (AR) task, I decided to take a more playful approach by designing a mobile-based prototype in 8th Wall, where users can throw a virtual ball at 3D objects to score points. My main inspiration came from gesture-based games like Pokémon GO, where the user throws a ball to level up or achieve something.
A screenshot to show the depth and assets of my project in 8th wall
The interaction would be simple: users tap or swipe on their phone screen to throw the virtual ball, while moving their device to aim at the target objects. As for this task though, I focused on the physics and the basics of this prototype. I paid particular attention to user safety and ergonomics which is a key part of UX design. Since the experience uses the device’s camera to overlay digital content onto the real world, users can still see their surroundings, which helps prevent motion sickness or accidental collisions. This aligns with Eriksen’s (2023) recommendations around maintaining freedom of movement in immersive UX.
On the technical side, I modelled the target objects (bowling pins) in Blender and exported them as .glb files into 8th Wall. Setting up the physics interactions was by far the most challenging part. Initially, the pins simply fell through the floor because the system couldn’t detect their collision boundaries. After some troubleshooting, I fixed this by applying a capsule collider, which allowed the virtual ball and pins to interact realistically. This problem-solving process gave me a much better understanding of how physics simulation works in AR environments and specifically 8th wall.
Bowling Pin model created in BlenderManual Capsule Collider settings
The prototype demonstrated how AR can be used not just for entertainment but also for social and physical engagement. I could see this concept evolving into a multiplayer mobile game where users compete in real-world settings, turning any open space into a bowling alley. Visually, I made sure the scene had bright colours and clear contrasts to keep the focus on the action. This minimalist approach would be something I’d like to carry forward if was to continue this, as it maintains accessibility while enhancing immersion.
Overall, this project deepened my appreciation for user experience design in AR—particularly the importance of balancing realism with usability. AR’s strength lies in its ability to merge the digital and physical worlds together, and even a simple prototype task like this shows how creative and interactive it can be.
VR Art
The VR Art task, created using Open Brush, was one of the most creatively freeing part of this series of tasks. Working in a virtual 3D drawing space offered a completely different way of thinking about art and storytelling. Instead of being limited to a flat canvas, I could draw in mid-air, surrounding myself with designs and vibrant colours.
At first, I focused on getting used to the controls and experimenting with different brushes and effects. I started by sketching simple objects—a house, a car, a few abstract shapes, mainly to test how perspective worked in three-dimensional space. One of the biggest challenges I encountered was depth alignment. Without a physical reference point, it’s surprisingly easy to misjudge distances, leading to parts of the drawing overlapping in strange ways. However, over time, I developed a better sense of spatial awareness and hand-eye coordination, which are both crucial for immersive design work (Chang, 2025).
The second time I had the VR I decided to draw a house again, this time learning to try and improve the depth alignment and make a little scene. I used the table as a level so the floor was guaranteed to be straight.
Timelapse of me creating a house
What I found most interesting about this task was the emotional experience of creating in VR. Being inside the artwork gave me a sense of presence that’s hard to achieve in traditional digital work. Mistakes felt less frustrating because they could be fixed instantly, and I had no limit on where I could draw. This sense of embodiment and freedom aligns closely with what Polydorou (2024) describes as the connection between immersion and emotional engagement in VR storytelling. This exercise really reinforced how VR art can merge creative intuition with UX design principles, encouraging artists and designers to think spatially rather than flatly.
Conclusion
Across all four tasks—360 Content, WebVR, AR & UX, and VR Art—I’ve learned how immersive technologies reshape the way stories can be told and how experiences are designed. Each tool brought new challenges but also new ways to connect creativity with technical understanding. These tasks have strengthened my confidence in using immersive tools and have shown me how technology can be used to create meaningful, engaging, and emotional experiences. Looking ahead, I’d like to continue exploring one of these four tasks and use them to help me create a final project for this module – this being AR & UX. I believe AR is the perfect tool for me to use as a graphic designer because it allows me to combine my 2D skills and illustrations from Photopshop and Illustrator etc. with my 3D skills from 8th Wall to create interactive material.
References
Behnam, S. and Budiu, R., 2022. The usability of augmented reality (AR) [online]. Nielsen Norman Group. Available at: https://www.nngroup.com/articles/ar-ux-guidelines/ [Accessed 25 October 2025].
Chang, S., 2025. The impact of digital storytelling on presence, immersion and user experience in VR [online]. MDPI Sensors. Available at: https://www.mdpi.com/1424-8220/25/9/2914 [Accessed 25 October 2025].
Eriksen, M., 2023. 6 UX design principles for augmented-reality development [online]. UXmatters. Available at: https://www.uxmatters.com/mt/archives/2023/03/6-ux-design-principles-for-augmented-reality-development.php [Accessed 25 October 2025].
Polydorou, D., 2024. Immersive storytelling experiences: a design methodology [online]. Digital Creativity, Taylor & Francis Online. Available at: https://www.tandfonline.com/doi/full/10.1080/14626268.2024.2389886 [Accessed 25 October 2025].
Sahu, S., 2025. Designing for the immersive world: a UX designer’s guide to AR, VR, and XR [online]. UX Planet. Available at: https://uxplanet.org/designing-for-the-immersive-world-a-ux-designers-guide-to-ar-vr-and-xr-c2414802be59 [Accessed 25 October 2025].
Yang, S., 2023. Storytelling and user experience in the cultural metaverse [online]. Heliyon, Elsevier. Available at: https://www.sciencedirect.com/science/article/pii/S2405844023019667 [Accessed 25 October 2025].
Part Two: Research Proposal
Introduction
The Campus Wayfinder project proposes the creation of an interactive AR navigation tool designed specifically for new students, visitors, and staff at the University of Hull. The system aims to enhance spatial orientation and user experience by providing a digital assisted guide that overlays navigation information directly onto the physical environment. This project combines emerging AR technology with principles of accessibility and visual communication, which are key elements within graphic design. The proposed prototype will utilise 8th Wall, a web-based AR platform, and Blender for 3D modelling to produce an engaging navigational experience.
The research investigates how AR can bridge the gap between digital wayfinding and physical exploration, turning traditional campus maps into interactive tools that promote engagement and confidence amongst new users. This project also considers broader implications of ethical data use, accessibility, and inclusivity in AR design. Through design thinking, iterative testing, and UX principles, the project aims to demonstrate how we as graphic designers can apply emerging technologies innovatively and responsibly.
Research Overview
The goal of the Campus Wayfinder is to create an immersive and user-friendly AR experience that helps users navigate the University of Hull campus more easily. This project combines graphic design, UX design, and emerging technology together, demonstrating how traditional design can be evolved into interactive, spatial media.
Purpose and Context
Navigating a new university campus can be overwhelming, especially for first-year students and visitors during open days or events. While static maps and signposts provide guidance, they can often lack interactivity, accessibility and can easily become outdated. The purpose of the AR Campus Wayfinder is to reimagine the wayfinding process by introducing an AR experience that provides 3D visual directions, real-time orientation cues, and spatial awareness through a smartphone or tablet camera.
The AR experience would be activated by scanning a poster or QR code placed around campus (e.g. at entrances or key buildings). Once activated, users would see an AR overlay featuring a 3D model of the campus built in Blender, complete with markers, arrows, and animated pathways leading to destinations such as the library, student union, or lecture halls.
UX principles such as embodied cognition have been implemented into this design, which enhances the users understanding through physical interaction with the environment (Benham and Budiu, 2022). The idea is to empower users with spatial awareness by combining real-world visuals with digital augmentation — allowing for intuitive, immersive navigation rather than abstract map-reading.
Scope and Aims
The Campus Wayfinder will function as a design-led prototype demonstrating how UX principles and graphic design can be applied to a university environment. The project aims to:
Explore the relationship between spatial UX design and physical navigation.
Develop a 3D visual model of the campus using Blender, exported as. glb files for AR integration.
Prototype interactive elements including directional arrows, information panels and animated routes.
Help students be more familiar with their campus and improve their anxiety/disorientation from becoming lost or not knowing where to go.
The final prototype will not include real time GPS data as this is not achievable using 8th Wall. Instead, it will conceptually simulate how a full system could function through carefully designed interactivity, clear visuals, and animated transitions.
User Experience (UX) Considerations
The primary audience includes new students, visitors, and staff members who are unfamiliar with the campus layout. The secondary audience includes future students exploring the university during open days or events. The design will prioritise:
Ease of use: The application requires no installation and should load instantly via a QR code.
Visual clarity: The use of university brand colours and simple icons will not only ensure immediate recognition but also reduce cognitive load.
Interactivity: Users can tap on buildings to reveal names and information or select a destination to visualise a suggested route.
Spatial comprehension: The 3D map will be slightly elevated and have a slight isometric perspective, helping users to understand layout and distance.
The system will aim to foster a sense of orientation and belonging, encouraging exploration rather than frustration.
Ethical considerations
When the project involves interactive media and environmental data, ethics can be critical in emerging tech design:
Privacy: the AR system will operate locally without collecting user data or location tracking.
Safety: The passthrough camera view allows users to remain aware of their surroundings whilst navigating.
Accessibility: Colours and texts will have contrast standards, so they are legible in outdoor environments.
Testing Consent: If any user testing is done it will be voluntary and anonymised, with clear participant consent forms.
Inspiration and Case Studies
This project draws inspiration from two main applications. Marks & Spencer’s (M&S) in-store AR Wayfinder app, which uses augmented reality and interface overlays to guide customers through retail spaces with ease. The other being Google Maps Live View, which integrates arrows into navigation and allows the user to view a location in first person view through their smartphone. These applications are prime examples that help demonstrate how spatial information can be communicated in intuitive ways.
Project Plan
Methodology and Approach
The research adopts a Design Thinking and Agile methodology. Design thinking enables creative exploration through empathy, ideation, prototyping and testing whist Agile methods (Scrum), structure progress into measurable sprints. A sprint is a short, fixed-length period during which a team works to complete a set of prioritised tasks to deliver a tangible, potentially releasable product increment.
User Stories (Scrum Format)
As a new student, I want to scan a QR code to instantly access an AR map so I can find my way around campus.
As a visitor, I want to explore the 3D models and be able to identify key buildings without the need to download an app.
As a student with accessibility needs, I want clear visual and audio cues that make it easier to navigate without reading smaller text.
As a staff member, I want to be able to recommend this AR tool to help visitors find my department easily.
As a designer, I want to showcase how AR can enhance physical spaces through immersive storytelling.
Milestone
Tasks
Timeframe
Deliverables
Research & Ideation
Analyse AR navigation examples and competitors
Week 1-2
Research summary, moodboards
Concept Development
Sketch wireframes, plan user journey, poster mockups
Week 3-4
Concept sketches, stroyboards
3D modelling
Model Campus and create direction assets
Week 5-6
.glb models and materials
8th Wall Prototype
Build AR experience, import 3D models
Week 7-8
Working prototype
Testing & Iteration
Conduct informal tests with 3-5 students, improve based on feedback
Week 9
UX testing report and improvement to-do list
Final Presentation
Record screen capture of AR in use, create any supporting visuals.
Week 10
Finalised prototype and presentation slides.
Task board and Workflow
Tasks will be tracked via a Trello board divided into ‘To-Do’, ‘In Progress’, ‘Testing’, and ‘Complete’ columns. Each milestone will have specific subtasks e.g ‘Export .glb model from blender’.
Tools and Technologies
These are the Tools and applications that will most likely be used to complete this project:
8th Wall: For AR development and scripting interactions
Blender: For creating optimised 3D assets and exporting. glb models.
Adobe Illustrator and Photoshop: For poster design and interface graphics.
Trello: For workflow management.
Figma: For prototyping UI overlays and visual testing.
UX and Design Principles
The AR Wayfinder will be guided by UX and spatial design principles:
Visibility of interaction confirmation: Provide feedback when users interact with an element e.g highlighted building animation.
Recognition over Recall: Present all key destinations on the map rather than making users rely on memory.
Minimalist Design: Use clear, colour-coded arrows and icons without unnecessary clutter.
Consistency and Branding: Ensure colours and typefaces align with the University of Hull’ identity system.
Anticipated Challenges
Managing to achieve accurate spatial alignment between the 3D models and the real-world environment.
Ensuring performance is stable on different devices.
Diverse user groups are considered when designing for accessibility.
The camera will be anchored to be aligned with eye level perspective, this ensures the user feels present within the environment rather than perceiving seperate detached models (Eriksen, 2023). This design choice supports immersive UX theory and enhances user embodiment within the digital-physical interface.
Concept Storyboard
Storyboard
Visual Style and Tone
The AR interface will follow a minimalist and modern visual identity with vibrant green and blues, referencing the University of Hull’s branding. Arrows and route lines will use glowing gradients for clarity in outdoor light. Typography will prioritise legibility, using bold sans-serif fonts such as Helvetica or Poppins. To maintain visual interest subtle animations will be added, without causing any distraction or motion sickness.
User Journey
The user journey is designed to be smooth and instant, requiring no installations or logins. QR codes are used a lot in today’s world meaning the simplicity of scanning and interacting with the codes, encourages repeat engagement and reduces technological barriers which can be a crucial UX factor for first-time AR users.
Reflection and Emerging Tech Justification
Why AR?
Augmented reality is one of the most promising emerging technologies for spatial communication, as it seamlessly can combine the digital and physical worlds together. For graphic designers, AR can help shift our flat 2D pieces of work into spatial experiences – merging visual communication, interactivity, and immersion together.
Innovation and Trends
The innovation of this project comes from its accessibility and its purpose. Unlike high- budget corporate AR tools, this project uses web- based AR meaning no downloads required, making it practical for public use. This reflects a growing trend in the UX design – frictionless access (Eriksen, 2023).
AR technology highlights its relevance as an emerging design tool by not only continuing to redefine how information is communicated, consumed, and visualised, but also Its integration within educational and navigational contexts. The project also addresses sustainable design thinking by replacing printed maps with digital overlays.
Design Thinking
After researching design thinking strategies, the ‘Design Thinking framework’ appeared. It is a non-linear, iterative methodology for creative problem-solving that focuses on understanding user needs through five stages. These being empathise, define, ideate, prototype, and test. This framework will help form the foundation of this project’s research.
Empathise: This stage involves understanding the challenges new students face navigating campus. This insight gave me the idea to create a digital orientation aid rather than a traditional map that can become easily outdated.
Define: The project’s goal is to reduce spatial confusion through accessible visual storytelling.
Ideate: I explored multiple concepts, including gamified campus tours and AR treasure hunts, but they had already been done before. The wayfinder was chosen for its practicality and its inclusive potential.
Prototype: Blender was chosen to design the environment and 8th wall was chosen as it enables quick iteration. Animation and interaction will be refined based on student feedback and usability principles.
Test: Feedback sessions will assess clarity, visual comfort, and intuitiveness.
Success Criteria
The success of the Campus wayfinder will be measured by:
Ease of use: Users navigate intuitively without instruction.
Engagement: Users spend longer exploring due to interactive features.
Accessibility: The design supports diverse users effectively.
Reliability: The AR functions smoothly across different devices and environments.
Future Development
With further development, the prototype could integrate real time GPS and indoor positioning systems, expanding to support live navigation. It could also include voice assisted guidance for users with visual impairments, improving the accessibility of the system. The concept could then later be extended as part of a university-wide welcome campaign, not only reinforcing student engagement through emerging media but also improving accessibility and usability to universities across the country.
Conclusion
This project proposal demonstrates how graphic designers can apply emerging technologies in meaningful ways. By using AR to enhance real-world navigation, the Campus Wayfinder bridges digital communication and physical experience. UX design, 3D modelling, and AR development have all been combined to create a practical and innovative solution for students and visitors. In developing the project, design thinking will be used to guide every stage – from mapping user empathy and prototyping to user testing and refinement. This ensures that innovation is always driven by human needs. The wayfinder is not only a digital navigational tool but is also a reflection of the future of graphic design, where interactivity, accessibility and storytelling all coexist. As this technology will continue to evolve, we as designers must adapt, refine, and reimagine how information can be delivered. This project incorporates that evolution, turning a traditional campus map into a dynamic, immersive, and interactive experience.
References
Benham, S. and Budiu, R. (2022) The role of spatial cognition in AR navigation design. Nielsen Norman Group. Available at: https://www.nngroup.com/articles/ar-navigation-design (Accessed: 24 October 2025).
Eriksen, M. (2023) Designing frictionless experiences in augmented reality. UX Collective. Available at: https://uxdesign.cc/frictionless-ux-ar (Accessed: 24 October 2025).
I have created an imaginary music venue called ‘Neon Pulse’ for this assignment task. This music venue focuses on electronic dance music and future house music. This took inspiration in the design of the logo and the brands identity. For example, the logo uses bold stretched out lettering which stands strong and looks very energetic. For the colours I chose neon for the futuristic style, using florescent pink and blue as they are very bright colours resulting in more people seeing the event being promoted through eye catching visuals. I created a hierarchy in my colours to make sure nothing was clashing to make the viewer confused and made sure I stuck to this throughout my designs. For example, pink was the primary colour, blue was the second and black was the tertiary colour. I added the wave not only to signify the word pulse but to also tell people that it is an electronic music event. My intended audience for this event is quite broad from people aged anywhere between 18 – 55 because anyone can like electronic music whatever age they are but as alcohol will be sold it has to be an 18+ event. moving onto how I planned my infographic. I decided to make the video as futuristic as possible using the same colours and elements as in the logo. My plan was to slowly present the logo but make it flicker like neon signs do sometimes in real life. I also created a music visualiser at the bottom to reinforce viewers that it’s a music venue and animated it to move with imaginary music. The next most important thing when promoting a venue is the line-up which is why I decided to include this in my infographic. I used the florescent colours for the headliners then used white text and a slimmer font for the rest of the acts. This was done so viewers see the headliners first which will be people they mostly know and will make them read the rest of the acts due to their interest. During this exercise I learnt how to animate different elements at different speeds at the same time and transferring elements I created in Illustrator to Adobe Animate.
brand banner
3D Blender Modelling
I created a series of 3D models for my music venue. I created a range of things that you would find at a music venue. This includes barriers, lanyards for VIP members and hanging stacked speakers that are found on music stages. I thought modelling different various aspects of a music venue would be better than focusing on just the main stage etc. Instead, I wanted to also focus on safety measures like crowd control, merchandise and other electrical equipment used in a music festival. I also chose these 3 things to model because they helped me learn how to create more complex shapes like the speaker grill mesh and the shape of the barriers, ultimately improving my blender modelling skills. The barriers were the hardest object to model because it involved me stretching out, bending and rotating circles to form the structure of the barrier. To give the barriers a smooth and realistic bend I did it freeform meaning it wasn’t stuck to an axis and would be hard to replicate an exact copy on every corner. To solve this problem, I modelled half of the barrier then duplicated and mirrored the object to make a whole barrier. This not only resulted in all of the corners being in symmetry with each other but also meant I didn’t spend valuable time trying to refine every corner to look the same manually. The lanyard also had its own challenge of the formation of the neck piece. This involved overlapping elements to replicate the objects realism. For example, the cube was thinned down, stretched and looped round back on itself to create the piece. This took a lot of time to execute as I had to rotate each part of the rectangular shape to make sure the looping of the flimsy material looked realistic.
modelling the neck piece of lanyardmodelling of the barriersmodelling the speaker
3D TEXTURING AND CONCEPT RENDER
All my assets I textured using Blender. The first asset I textured was the hanging speakers. I decided that I wanted the speakers to stand out and not just be one colour like all the black ones you see. This is why I decided for the speakers to follow the music venues colour branding. I used the pink as the primary colour for the mesh grill as this colour stands out to crowds and is seen most on the venues branding. I combined this colour to a metallic texture to give the realistic sheen mesh grills have on speakers. The actual speakers inside the housing were presented in the secondary colour. The electric blue gives a distinctive contrast that you can see the speakers pop out through the grill. These were also combined with the metallic texture as it allows for them to be more noticeable when the light shines on the speakers. My second and third asset I textured saw me using an image texture including the branding of the venue. The lanyard asset saw a version showing the music venues VIP passes with a fluorescent pink to show off the very important people to other guests and a gradient border around the lanyard to reinforce its importance. The lanyard used a material called Principled BSDF which allowed for me to tweak the roughness and metallic of the object, resulting in the asset having a small shine to it. The neck piece of the lanyard was made of the same material but with the roughness level all the way up as they are normally a very matte material in real life. The barriers included a branded banner that used the material principled BSDF again, but the material of the barriers themselves were made using metallic BSDF. A few tweaks were made to the roughness and the edge tint to get the colour to look realistic as possible. The U.V wrapping was straightforward as there were no curves involved in my assets where the branding needed to be. This resulted in no issues occurring and from my past blender experience it meant I got this done quickly.
Lanyard assetBarricade assetSpeaker asset
3D ANIMATION AND LIGHTING
The first thing I planned out for the product showcase was what environment I was going to put my assets in. I suddenly thought of crates and boxes that are used to transport electrical equipment to and from festivals and decided to put my assets into a container crate. The crate was created by using a standard rectangular cube as the base but then sections were cut up and extruded to make the design pattern you find on containers. I used an Image texture as the material and tried to make a graffiti abstract look using the brands colours. I did this by importing one on the brands banners I made and started to upscale and stretch certain parts to create some unique shapes to add to the container. The material underneath is Principled BSDF with a low level of roughness to give the container a sheen for realistic reflections. For the ground I created a grass texture using a brush I made in another software. Although the grass still looked really flat, so I decided to create some 3D grass using the particle system modifier making the illusion that all the grass texture is 3D. After creating the environment, the next thing was to plan to showcase the assets. I thought it was a good idea to have all the assets showcased as a whole at the start to show that they all fit in the environment that’s been created for them. I then decided it was a good idea to get a closer look at the assets by capturing them in their original size on a blank canvas in the air. This way, I can animate a full 260 degree of the assets to give people a good idea of what the products look like from every angle. As the environment I created was quite large I added a sun to the animation to make sure everything was lit up and able to be seen. I also added a light to the container inside, so no shadows were casted on any parts of the assets I wanted to be showcased.
Subject, Audience & Purpose- Describe the Live Design Brief and include general background research about your chosen subject, audience, and purpose (500 words plus visuals with captions)
eDecks Logo
The live design brief involved a collaboration with a UK-based company called eDecks, which specialises in the sale of decking, timber, fencing, and roofing products through its online platform. Known for catering to both amateur DIYers and professional landscapers, eDecks provides a wide range of outdoor improvement materials. The company operates primarily online and serves customers across the UK. This project was conducted in partnership with the Marketing students at the University of Hull, forming a cross-disciplinary collaboration between design and marketing.
The marketing students were tasked with developing an innovative Integrated Marketing Communications (IMC) Campaign to address a commercial challenge faced by eDecks: the seasonal drop-off in sales during the colder months. Traditionally, the company sees strong performance in spring and summer when customers are more inclined to invest in outdoor projects. However, sales significantly decline in autumn and winter, resulting in reduced revenue during half the year. Our job, as graphic design students, was to support the marketing concepts visually and creatively, translating the campaign strategies into digital content and user interface elements. Our role involved applying UX/UI design principles, visual communication skills, and branding strategies to bring their campaign to life on a practical level.
target customer slide from eDecks brief
The target audience identified by the marketing team includes UK homeowners aged 28 to 60, many of whom are invested in maintaining or improving their outdoor spaces. Within this broader group, three key customer groups were identified:
Gardeners – typically seeking decorative or functional enhancements to their gardens.
DIY Hobbyists – often interested in user-friendly, ready-to-install kits.
Small-scale Landscapers – looking for reliable supplies for residential jobs.
The purpose of the design brief was to reduce the seasonal sales slump by engaging customers year-round, encouraging them to continue planning and purchasing for their outdoor spaces even in the off-peak seasons. This aligns with the company’s broader goals of maintaining profitability and visibility throughout the entire year.
The marketing students proposed several key ideas to support this aim. One of their suggestions was the integration of an AI-based design tool into the eDecks website called Evergreen Design Bot. This interactive tool would allow users to visualise their outdoor spaces across different seasons, using eDecks products. For example, customers could upload a photo of their garden and see how it might look in winter, complete with decking, fencing, or lighting. This feature not only enhances the user experience but also encourages out-of-season purchases by helping customers envision year-round utility.
Additional ideas included the “How To” digital leaflets and engaging social media content to promote the new tool. Our design response to this brief involved creating visuals for these deliverables, designing a new homepage layout, and prototyping designs that would promote the AI tool’s features. Our work supported the marketing strategy by ensuring that the digital presentation was appealing, functional, and brand aligned.
2.) Relevant Design History- Include at least three examples related to your Live Design Brief and analyse them. How have they influenced your final presentation? (500 words plus visuals with captions)
In developing my final presentation for the eDecks brand, we focused on creating a new website landing page, instructional leaflets, and social media assets. These designs were heavily informed by comparative research into existing market leaders. Mainly B&Q, Wickes, and James E Smith—each offering distinct approaches to DIY and home improvement branding.
1. Website Landing Page – Inspired by B&Q and Wickes
B&Q landing page
My homepage design adopts a visually engaging and interactive layout, incorporating seasonal visuals and an AI tool to “instantly see your dream garden.” B&Q’s homepage prioritises seasonal relevance and promotions, while Wickes leans toward functionality and category hierarchy. Drawing from B&Q, I embraced a bold colour palette allowing for the existing category banner to look 100 times better just by changing the colour. Wickes’ navigation not only looks strong but interactive and personalised, like the current eDecks category banner, so I ensured I kept the categories the same. Instead, I took inspiration from B&Q’s colour palette, using a bright orange as the primary to highlight and then a dark navy blue to make other elements stand out like the category banner.
Wickes landing page
2. “How To” Leaflets – Drawing from James E Smith’s Simplicity
The how to leaflet series focuses on specific builds (e.g., Rustic Rose Pergola), enhanced by bold colours, minimal text, and prominent QR codes. These were influenced by James E Smith’s clean and product-focused marketing materials, which emphasize clarity over complexity. Where B&Q and Wickes often clutter print designs with multiple offers and excessive product data, we aimed for minimalist design, clean typography, and quick mobile access via QR codes.
This clarity and ease of navigation reflect the needs of DIY users—clear steps, relevant tools, and fast access to info. The consistency in branding also creates a visually memorable print item, reinforcing trust and recognition. Including actual product prices and uses adds immediate utility and reinforces eDecks’ value proposition as affordable and expert.
James E. Smith landing Page
3. Social Media (YouTube) – Blending Wickes’ DIY Community with Personality
The YouTube banner and thumbnail designs adopt a how-to tone, influenced by Wickes’ content-driven social presence. Wickes and B&Q both invest in project tutorials, but often lack a unified visual identity across platforms. We resolved this by introducing a distinctive style (orange accents, bold “How to” headers) across all thumbnails and headers. This consistent tone strengthens brand presence and recognizability, critical on a platform like YouTube.
3.) Project Development- Document your group’s developing design work and what you contributed (500 words plus visuals with captions)
Our group project centred on designing elements to advertise the AI tool the marketing team came up with whilst modernising the visual branding and digital presence of eDecks. This included a redesigned website, promotional banners, social media content, and how to leaflets. Our group worked collaboratively to divide tasks according to our strengths, resulting in a final outcome that reflects a fresh, user-friendly that promotes the new Evergreen AI tool at a professional standard.
As a group, we laid the foundation by researching the current eDecks branding, identifying areas that needed visual and functional improvement. We then worked to include the Evergreen AI tool into those new visual elements so when presented at the end everything looked in uniform with each other. One team member focused on how to leaflets, which featured a QR code to help customers build their products, meaning their consumer audience can expand and broaden to novices due to the ease of a step by step. The QR code helps increase footfall to the website and in result promotes the Evergreen AI tool when people see it after scanning the code. Another created social media content, with a strong focus on brand consistency, engagement, and clarity. Having concise and eye-catching graphics are essential to increasing footfall to the website and overall sales in the winter, especially when the socials are updated daily, it keeps the audience in the loop with products and keeps customers loyal.
How-to leafletsYoutube Channel Mockup
My role was to take full ownership of the website redesign and accompanying advertising banners, including an external ad example showing how eDecks could be advertised on partner websites.
To start, I designed two wireframes for the new eDecks website. The first is a homepage layout that emphasizes a clean, modern interface with clearly structured sections—featuring a hero banner, featured categories, product tiles, and easy-to-use navigation. The second wireframe presents a category or product page, with intuitive filters, tidy product organization, and room for promotional content. These layouts were designed for both aesthetic appeal and improved usability, focusing on enhancing the user experience through simplified navigation and visual clarity.
Design 1 Design 2
When compared to the current eDecks website, the improvements are significant. The existing site appears visually cluttered, with too many elements vying for the user’s attention—large amounts of text, mixed font styles, and busy imagery that detract from the shopping experience. The colour palette is also heavy and outdated, lacking the modern polish expected of commercial websites today. My wireframes present a more refined layout with white space and a clearer visual hierarchy, which helps users engage with content more naturally.
Current eDecks website
I also designed website banners for promotion. Importantly, the banners align visually with the new site aesthetic, avoiding the visual overload seen in the current site’s graphics. For example, the existing site uses a lot of cartoon-style imagery, which I replaced with cleaner, more professional visuals to give the brand a more polished look.
Vertical banner
Additionally, I produced a vertical banner ad designed to run on external websites. This ad maintains consistency with the internal banners while being tailored for the format and function of a sidebar advertisement. It captures the attention of new users while staying true to the brand tone we established.
Example of the vertical banner on another website
In summary, my contributions involved envisioning a complete design overhaul for eDecks’ digital storefront and branding strategy. The wireframes and banners I produced form the foundation of a more modern, efficient, and customer-focused user experience which create a perfect new space to present and advertise the AI tool the marketing students came up with. This project allowed me to apply my digital design skills to solve real-world communication problems and collaborate effectively within a creative team.
4.) Teamworking- Include Rob’s Psychometric Test results and explain your role and experiences while working within your groups. (500 words plus visuals with captions)
Filling out the psychometric test results I came to the conclusion that the conductor was the most fitted for me. This is because a conductor has strong leadership skills, effective in communication and can adapt in situations. I’m known to do all these things whilst I work as I manage a team through stressful situations and find ways to adapt and overcome elements when needed.
Throughout the duration of our group project, I played a core role in shaping the digital identity of the eDecks brand. While the rest of my team worked on other online and offline marketing content such as leaflets and social media, I concentrated on developing the web-based elements—specifically the site design to promote the AI tool and digital banner advertisements. This division of responsibility allowed us to each take ownership of our areas while contributing to a shared goal of revitalizing the brand’s overall visual identity.
Being the person responsible for the website and banner ad work meant I often had to initiate ideas independently, while still coordinating closely with my teammates to ensure alignment. This taught me the importance of communication. While we were each focused on our own elements, we had to regularly exchange progress, give feedback, and adapt ideas to maintain consistency across all outputs. These moments of back-and-forth were particularly valuable, as they helped me develop confidence in presenting design decisions and explaining my thought process clearly.
One of the challenges I encountered was finding a balance between creative freedom and team cohesion. For instance, I had ideas to modernise the website layout drastically compared to the current version—which is cluttered, heavily branded, and visually overwhelming—but I had to ensure that the changes still reflected the essence of eDecks and aligned with what the rest of the team was creating. I navigated this by suggesting subtle visual improvements that wouldn’t alienate the current customer base, such as simplified layouts, softer colours, and more streamlined navigation, while keeping some familiar design cues.
Another key takeaway from this project was understanding the value of adaptability. When creating the web banners, I had to think beyond static visuals and consider how these designs would be experienced in context—on desktops, mobile devices, or as part of a wider advertising campaign. At one point, I adjusted the banner layout based on feedback from a teammate working on social media, which helped me think more flexibly about cross-platform consistency.
Working as part of a team also reminded me of the importance of trusting others to handle their roles, and how a good final outcome doesn’t always rely on doing everything yourself. Seeing how the social media and leaflet content came together alongside my web designs was a highlight, as it gave me a greater appreciation of how all aspects of a brand need to work together.
1.) Ethical or Sustainable Subject- Include background research about your chosen subject, audience and purpose (500 words plus visuals with captions)
Ocean pollution, particularly plastic waste, has emerged as one of the most pressing global environmental issues. The scale of the problem is immense—each year, an estimated 11 million tonnes of plastic waste flow into the ocean, a figure projected to triple by 2040 without urgent action (Pew Charitable Trusts and SYSTEMIQ, 2020). This pollution damages marine ecosystems, harms biodiversity, and endangers the health of both animals and humans. Plastic debris is commonly ingested by marine animals such as fish, turtles, and seabirds, often leading to death through starvation, internal injuries, or entanglement (National Geographic, 2023).
Dolphin eating plastic
Scientific studies have also shown that plastics break down into microplastics that can be ingested by smaller sea life, eventually entering the human food chain. Recent findings suggest microplastics have now been detected in human blood and even lung tissue, raising concerns about long-term health effects (BBC News, 2022). This highlights the widespread and systemic nature of plastic pollution—not only as a threat to wildlife, but also as a human health risk.
In my animation, the fish serves as the central protagonist. This decision was made to personify the impacts of plastic waste on marine life and create an emotional connection with viewers. Through classical animation techniques, the fish is shown moving freely before being confronted and ultimately trapped by a plastic bag. The use of character-driven animation makes abstract issues like pollution more tangible and emotionally compelling, especially when communicated visually (WWF, 2023).
A key part of the narrative is the conceptual design transition: as the fish becomes trapped and dies, the camera zooms into the plastic bag, transitioning to a new scene where the bag is resting on top of a recycling bin on land. This moment symbolically ties the underwater tragedy to human behaviour, showing that pollution in the ocean originates from our actions on land. According to the International Union for Conservation of Nature (IUCN, 2021), more than 80% of ocean plastic comes from land-based sources, primarily due to poor waste management and littering.
The animation concludes with the message: “The ocean is NOT a bin. Dispose of waste responsibly.” This call to action serves both educational and motivational purposes. The animation encourages audiences not only to understand the consequences of pollution but to take responsibility and change behaviour through proper disposal and recycling.
My target audience includes children, teenagers, and the public. Animation is particularly effective for youth education due to its accessible, engaging format (UNESCO, 2020). The freedom of animation allows complex issues like sustainability to be represented in a visually striking and emotional way, which is critical for awareness campaigns. By combining narrative, symbolism, and a clear moral message, the animation aims to raise awareness of ocean pollution while promoting ethical and sustainable behaviour.
2.) Conceptual Design Transition Planning- Include your eight-panel storyboard (500 words plus visuals with captions)
Storyboard of my animation
My storyboard represents a classical animation narrative centred around the theme of ocean pollution and its consequences on marine life. The heart of the story follows a lone fish, who is a symbol of innocence and vulnerability. Through the fish’s journey, I aimed to tell a story that’s both emotionally engaging and something that gets people thinking about their actions and responsibilities. The fish begins swimming happily in a clean, unspoiled ocean. This visual was chosen deliberately to create a peaceful baseline from which disruption could occur. As more rubbish gradually appears in the scene, the tone starts to shift. The slow fade-in of debris mirrors how environmental damage doesn’t happen all at once but increases over time due to neglect and human activity. The fish attempting to avoid the rubbish reflects nature’s struggle to adapt to unnatural threats
The pivotal point is when the plastic bag appears unexpectedly, and the fish swims directly into it. This was designed to be abrupt and shocking. A sudden danger to the fish that feels almost predatory. The fish’s fight to escape, and eventual stillness, marks a tragic turning point in the narrative. Rather than cutting straight to a new scene, I decided to employ a conceptual design transition to shift the focus from underwater to land.
I chose zooming into the plastic bag and emerging out of it onto a bin on land because it avoids a jarring scene change and instead guides the viewer through the object that represents the central problem: the plastic bag. This bag serves as both a literal and metaphorical tool, tying the tragic underwater moment to its cause—human waste disposal practices.
The decision to zoom into the bag was also influenced by the idea of visual continuity. Instead of using a traditional fade or cut, this method maintains the viewer’s focus on the plastic itself, forcing them to confront it directly. When the scene transitions to the bag resting on a bin near a beach, the viewer immediately recognises it as the same object. This continuity deepens the emotional impact and reinforces the message that the pollution harming marine life originates on land, often just carelessly discarded.
Furthermore, this kind of transition creates an unexpected but smooth flow between two contrasting scenes—one tragic and one corrective. It subtly shifts the narrative from despair to potential hope. The storyboard shows that once on land, a plastic bottle is thrown into the bin, and the camera pans out, allowing room for the final message to fade in: “The Ocean is NOT a Bin. Dispose of waste responsibly.” This transition wasn’t chosen just for its visual appeal. It ties the death of a fish to the moment someone chooses to recycle—a symbolic loop that makes the issue personal and actionable.
The storyboard is an early idea and development of what I want my animation and story to look like. When animating ideas can change and new ones can develop, so my final result of this piece may be slightly different to what my storyboard shows. But the core concept will remain the same.
3.) Visual Design Treatment- How have you incorporated Edward Tufte’s five theories into your work? (500 Words plus visuals with captions)
Edward Tufte, a pioneer in data visualisation, outlined five core principles for effective information design: 1. above all else, show the data; 2. maximise the data-ink ratio; 3. erase non-data-ink; 4. erase redundant data-ink; and 5. revise and edit (Tufte, 1983). While originally intended for quantitative graphics, these principles can be applied to visual storytelling like animation.
1. Above All Else, Show the Data
My animation centres on a fish’s journey through polluted waters, culminating in its entrapment by a plastic bag. This narrative illustrates the impact of ocean pollution on marine life effectively “showing the data” by transforming statistics into an emotional story. By illustrating the consequences of plastic waste, the animation conveys difficult environmental issues in an accessible manner, aligning with Tufte’s emphasis on presenting data clearly and compellingly (Tufte, 1983).
2. Maximise the Data-Ink Ratio
Tufte believes in maximising the proportion of a graphic’s ink that presents data, minimising non-essential elements (Tufte, 1983). In my animation, every visual component serves a purpose: the fish represents marine life, the plastic bag symbolises pollution, and the transition to a recycling bin shows the importance of proper waste disposal. By ensuring that each element contributes directly to the narrative, the animation maintains a high data-ink ratio, enhancing its communicative efficiency.
Improving data visualisation using the principle of Data-Ink Ratio
3. Erase Non-Data-Ink
Non-data-ink refers to decorative elements that do not convey information. My animation avoids unnecessary elements, focusing solely on the story’s essential components. The absence of excessive visuals ensures that the viewers’ attention remains on the core message, demonstrating Tufte’s principle of eliminating non-informative elements to prevent distraction (Tufte, 1983).
4. Erase Redundant Data-Ink
Redundant data-ink involves repeating information unnecessarily. My animation presents each narrative point, such as the fish’s entrapment and the transition to a recycling bin. It only happens once, avoiding repetition. This approach maintains the viewer’s engagement and reinforces the message without redundancy and follows Tufte’s guideline of eliminating repetitive elements that do not add value (Tufte, 1983).
5. Revise and Edit
My animation’s conceptual design transition from the ocean scene to a road with a recycling bin, demonstrates thoughtful revision and editing. This shift not only provides a solution to the story but also reinforces the call to action: “The ocean is NOT a bin, dispose of waste responsibly.” By refining the animation to include this transition, its impact and clarity is enhanced, embodying Tufte’s principle of continuous improvement through revision (Tufte, 1983).
By integrating Tufte’s five principles, my animation effectively communicates the severe consequences of ocean pollution and the importance of responsible waste disposal. The deliberate design choices ensure that every visual element serves the narrative, enhancing clarity and emotional resonance. This alignment with Tufte’s guidelines highlights the animation’s potential as a powerful educational tool.
4.) Relevant Animation History- Include at least three links to existing animation examples related to your chosen sustainable or ethical subject area and analyse them. How have they influenced your final animation? (500 words plus visuals with captions)
In creating my classical animation on ocean pollution, I analysed several existing animations that address similar sustainability themes. Three key animations—The Beauty by Pascal Schelbli, Hybrids by students at MoPA, and All the Way to the Ocean by Doug Rowell. These have significantly influenced my creative decisions in terms of visual storytelling, tone, and environmental messaging.
1. The Beauty (2019)
Pascal Schelbli’s The Beauty is a short film that visualises an underwater world where plastic waste appears as part of the natural ecosystem. Plastic bottles and bags move fluidly with the currents, mimicking marine life (Schelbli, 2019). The film blurs the line between pollution and nature, drawing attention to the dangerous normalisation of plastic in our oceans. This idea of integrating pollution into the marine environment influenced the way I introduced rubbish in my animation. Rather than simply presenting rubbish as background litter, I had the fish encounter and interact with the waste directly. This was inspired by Schelbli’s approach, which reinforces how deeply embedded plastic has become in aquatic ecosystems.
The Beauty – Animated Short Film by Schelbli, P.
2.Hybrids (2017)
Hybrids is a short, animated film produced by MoPA (Montpellier’s School of Computer Graphics) students, portraying sea creatures that have adapted to survive by incorporating trash into their bodies (MoPA, 2017). The concept of marine animals becoming one with pollution had a serious impact on my storytelling. Although my animation follows a traditional narrative arc, I used the idea of inescapable pollution to drive the tension. Like Hybrids, I wanted to present plastic as something unavoidable and life-threatening in the fish’s environment, culminating in its tragic entrapment in a plastic bag.
3. All the Way to the Ocean (2016)
Doug Rowell’s All the Way to the Ocean uses a simple, educational style to teach younger audiences about how litter travels from urban areas into the sea (Rowell, 2016). The animation demonstrates the consequences of human negligence in a relatable and hopeful manner. This influenced my decision to include a clear cause and effect sequence in my animation. The transition from the underwater death scene to a street with a recycling bin echoes the narrative structure of Rowell’s film. It conveys the idea that individuals have the power to intervene and prevent such tragedies through responsible waste disposal.
These three animations influenced my work by demonstrating how visual storytelling can be used to evoke emotion, convey urgent environmental messages, and encourage behavioural change. By studying their use of metaphor, tone, and structure, I was able to shape my own animation into a compelling piece that communicates the tragic reality of ocean pollution while also suggesting a solution.
1.) Conceptual Design Idea (metamorphosis) and Research (500 Words plus visuals with captions)
I found interest in this topic because a lot of people my age are targeted by energy drink advertisements, so I know how they are presented and I can use that to my advantage. For example, to help boost product engagement and overall brand awareness. The brand name for my energy drink company will be called THRIVE. The word means to flourish, stay strong and to be full of life, which aligns with the idea that energy and wellness does not stop for over 60’s. The name avoids youth-focused branding and doesn’t scream extreme sports unlike ‘Monster’ or ‘Redbull’. This makes the brand feel more welcoming and approachable for the older adults. The logo for the brand has been conceptually designed by replacing the ‘I’ with an upwards arrow. This instantly tells consumers that this product will boost your energy and get you up and active. The use of the retro style font was also intentional in attracting the right target audience and not teenagers for example.
Thrive Can Label
Metamorphosis animations are a technique used where one object transforms into another in a seamless manner. There are many different types of metamorphosis animations including shape morphing, organic growth/evolution, and Perspective-based transitions. Organic growth/evolution is often used in nature-inspired animations the elements evolves/expands into a different state whereas perspective-based metamorphosis uses camera angles and depth to change elements in a 3D space. For inspiration I decided to try and find examples of these different types of animations and in doing so found this one below.
Metamorphosis | Svasti
This metamorphosis animation caught my attention because the transition is subtle and not in your face like other animations can be. Using a more subtle approach for my animation could be a good idea because as my consumers are a mature audience, gradual transformations can allow them to follow the narrative more comfortably, ensuring the message is clear and engaging. The text morphing into the butterfly gave me inspiration to possibly transition my logo into another object. Although, I liked the idea of using a perspective-based metamorphosis, using the camera angles to mask the transition into the can. This then gave me the idea to combine the text morphing into the can with the help of using perspective-based metamorphosis.
After researching, my conceptual design idea involves easing in the viewer by introducing the name of the product and its purpose. Then with the use of perspective-based metamorphosis the text will turn into the energy drink itself. The transition will focus on zooming into the arrow on the logo to the point where it takes up the entire screen. This will act as a mask allowing all the previous elements to move out of the cameras view. The arrow will then seamlessly change into the can by colour matching the arrow with a section of the can together, so it looks like the object has not changed.
2.) Animation Storyboard (500 Words plus visuals with captions)
Thrive Storyboard
The storyboard was the first time I visualised my ideas for this animation. Looking at the board from a whole I think the animation does a good job in not only including the use of metamorphosis but showing the viewer what the product’s intended use is. For example, the slogan ‘Because energy has no age limit’ instantly tells us that it is an energy drink and its suitable for the target audience – people over 60.
I used a different slogan to finish the animation off with than the start. This is because people tend to remember the first and last things they see in a sequence. So, in having two different slogans it allows the brand to communicate multiple aspects of its identity. This marketing approach helps enhance the brand’s audience engagement and the brand’s recall.
I plan for the project to use one continuous camera making it a one-shot animation. By eliminating abrupt cuts, one shot animations allow for a more fluid viewing experience, reducing distractions and keeping the audience focused. Smith (2016) argues that “continuous motion helps in sustaining attention, as viewers are naturally drawn in to the uninterrupted sequence.” The method is beneficial to this animation because retaining the viewers interest is crucial to effectively communicate with the brand’s message.
3.) Visual Design Treatment- How will you incorporate Edward Tufte’s five theories into your work? (500 Words plus visuals with captions)
Edward Tufte’s principles of data visualisation provides great guidance for designing impactful and clear visuals. The principles that were originally developed for presenting quantitative data can also be applied to motion and animation graphics. The animation I am creating where the Thrive logo zooms into itself and transitions into the energy drink can, will include these principles to ensure clarity, purpose, and audience engagement.
Graphical Excellence Tufte (1983) highlights that “well designed graphics should convey information clearly and efficiently without being too complex.” In my animation, I plan to do this by using a smooth zoom transition that leads from the logo to the product, ensuring that the transformation feels intuitive and engaging. This approach will make the animation easy to follow for the target audience, by keeping the movement simple and avoiding any complex transitions.
Graphical Integrity “Maintaining honesty and accuracy in visual representation is essential” (Tufte, 1983). My animation will go by this principle by avoiding misleading transitions that might distort the products perception. The zoom effect acts as a direct and authentic connection between the product and the brand’s identity which results in reinforcing trust.
Data ink ratio Tufte’s data ink ratio concept (1983) talks about the importance of “eliminating non-essential elements to keep the designed focused and purposeful.” In my animation, I intend to follow this by removing any decorative effects that do not contribute to the core message. The background will be kept clean, and any additional effects like glows and motion blurs will be kept subtle so the focus remains on the transition.
Mastering Tufte’s Data Visualization Principles – GeeksforGeeks
Avoiding chart junk Unnecessary additions, which Tufte (1983) refers to as “chart junk”, can distract people from the core message. For example, having excessive motion and lots of sudden colour changes can not only confuse the viewer but it may make them drift away from the importance of the animation. To prevent this, I will avoid excessive colour changes, rapid movements, and flashy effects. Instead, the animation will remain clean and simple with a limited colour palette and smooth motion. This will ensure the audience remains engaged with the brand transformation rather than being overwhelmed by any excessive visual noise.
Multifunctional elements Tufte (1990) suggests that visual elements “should serve multiple purposes to enhance efficiency.” In my animation, the logo will act as both a branding element and a transition device. Instead of simply fading out, the logo will transform directly into the can, reinforcing the direct connection between the brand and the product. This dual functionality will help create a fluid and engaging experience, ensuring each element contributes to the effectiveness of the animation.
4.) Final Design- How did you incorporate Tufte’s five theories into your work? (500 Words plus visuals with captions)
After completing my animation, I noticed some differences between my initial plan and the final execution. Refinements were made to enhance the clarity and engagement of the sequence.
Graphical Excellence Initially, I planned for the zoom effect to be simple, but during development I did some adjusting. Tweaking with the easing and timing helped create a smoother and more engaging transition. I found that adding a slight pause before the zoom into arrow helped build anticipation, making the transformation more visually appealing for the audience.
Graphical Integrity Originally, I intended for the zoom to transition directly to the product, but I refined this by introducing a brief glow effect on the arrow before it morphed into the can. This small addition helped reinforce the energy drink theme whilst keeping the motion the same, so it’s still easy to follow for the target audience.
Thrive logo glowing and change of colour
Optimising the Data-link Ratio My initial plan focused on minimising unnecessary elements but through testing, I realised some subtle enhancements could be beneficial. I added a soft background gradient to create depth to the animation without overwhelming the viewer. This kept the animation focused but improved its visual look greatly.
Soft background gradient
While my initial approach was focused on strict minimalism, the final version balanced clarity with small refinements that enhanced the overall animation viewing experience. By carefully considering Tufte’s theories during the development phase, I ensured that the animation remained engaging, purposeful, and visually coherent, successfully translating his principles in quantitative data into an effective motion design.
5.) 3D Metamorphosis Animation (30 Seconds, 24FPS)
The colour palette communicates a relationship with sustainability, clean energy, and reliability, which connects with environmentally conscious customers.
Featuring both technology and nature creates a balance between the environment and innovation. As well as imagery focused on the community builds relatability and trust which results in high customer engagement.
Positive, forward-thinking slogans and messages, reinforces the company’s mission whilst helping confidence grow in the audience.
Green Stile font ensures readability across devices, whilst having unique characteristics that adds a friendly and approachable connection.
A clean, green focused aesthetic is recognisable and instantly communicates sustainability.
Research MoodBoard 2 – InfluentHull
This colour palette conveys trustworthiness, expertise, and forward thinking. This is with the help from the golden yellow which suggests success and growth. A combination of blue and teal reflects energy and reliability, which can be appealing to modern businesses.
Mixing modern and traditional fonts is a good way to reflect InfluentHull’s ability to bridge practices with innovative strategies, as well as showing that they not only have the expertise, but their strategies are future proofed.
Combining imagery that includes professionalism, local pride, and growth highlights InfluentHull’s dual focus on community influence and their corporate expertise.
This mood board ensures InfluentHull can build a professional online presence that engages with businesses that value expertise, innovation, and the community.
Research MoodBoard 3 – Cab-E Online
This colour palette makes people aware the company provides an eco-conscious yet forward thinking service.
Using clean and approachable typography ensures the brand feels both user friendly and innovative.
Balancing imagery of nature, technology and people humanises the brand and positions the company as innovative.
Imagery focused on people also builds emotional connection and dynamic visuals can emphasise the forward momentum the brand provides.
Cab-E Online Style Guide
The Inclusion of electric vehicles reinforces CabEonline’s core identity as an eco-friendly and sustainable transportation alternative. It also highlights the company’s advancement in innovation and leadership in modern mobility as it sets them apart from traditional taxi firms.
Featuring families, professionals, and individuals, generates a wide demographic that promotes inclusivity throughout the company. This shows that CabEonline caters to all types of customers and creates an emotional connection with diverse audiences. Smiling customers in comfortable settings also builds trust and confidence in the service, showing the user satisfaction it can have and its reliability.
Including Hull landmarks like the Humber Bridge roots the company in the local community, resulting in not only relevance to residents but a connection of trust. Also adding urban settings to the environments section shows people the service is optimised for busy cities. This appeals to people who navigate city environments including both locals and tourists.
Poppins is a clean and modern sans-serif font that has an approachable and simple feel. This ensures its readability across digital and physical formats, which is crucial for a company relying heavily on a mobile app. The bold fonts of Poppins convey confidence and authority, suggesting to other people that CabEonline is superior in the taxi industry. The italic font adds a sense of movement, symbolising progress, and forward motion. This is effective for headlines and taglines as it reinforces the notion of speed and efficiency.
The slogans are clear, concise, and impactful using positive and eco-focused language. They resonate with a broad audience as they appeal to both practical (affordable, convenient) and emotional (green, future) aspects.
The Colour palette balances eco-conscious tones (greens) with modern and professional tones (blues and teal), making it ideal for both the environmental focus and the tech aspect of things. The harmonious mix maintains a premium and forward-thinking feel, appealing to a wide audience.
Logo 1
Throughout the logo designs I have only used colours from the palette on my style board. This was the first logo created within Illustrator. This logo was vector focused more than type focused. I used the darker teal green as the background so any lighter shade I used would look more vibrant and stand out. This speaks the brands product because the vector of the taxi was created with the traditional chequered markings on the side. These were created to make it an instant visual that help people decide the car is a taxi. Another instant visual is the leaf on top of the car. I took inspiration from the pizza cars you see with slices on top of the roofs that are used to help people recognise what service they are offering. In this instance the pizza was replaced with the leaf, to signify that the taxi is eco-friendly and innovative, speaking the brands product. This logo would work to promote the company’s identity because the scale of the taxi vector would catch people eyes right away. The leaf on top of the car would be the first hint of the company’s purpose. But the vibrant text underneath would confirm that it is an eco-friendly taxi service. The typography used is Poppins Bold.
Logo 2
This logo was also created with Illustrator. I experimented with merging the text and the vector together to make the logo look more minimalistic. The text was made bigger and the vector smaller as I wanted the logo to be more type focused. I left the ‘A’ behind the taxi and presented it bigger than the rest of the letters as it looks like a road on a perspective that the taxi is driving down. The vector doesn’t have much for it to signify it is a taxi, but by placing it where the ‘A’ should be, people can still see it reads ‘CAB-E’. The typography in this logo has been capitalised, as capitals make text look more energetic and stronger which makes it easier to see. I added ‘online’ to this logo as it not only fills the negative space underneath but the white also contrasts nicely with the green making it more vibrant. This logo speaks the brands product by this time mixing the focus of the taxi and the typography together. The combination of the two creates a simplistic but affective approach to show people what service the company offers. This logo wouldn’t do as well as the first one in promoting the company’s identity. This is because the text is not as readable, and the taxi could be mispresented for a different letter. Although, the unique style of the logo could represent the same uniqueness the company has to different taxi services in being eco-friendly.
Logo 3
This is the last logo I created, also using Illustrator. Learning from what I had made from the previous 2 logos I took some inspiration from them. I tried to make the taxi vector as important as the typography. This was done by making them the same colour and similar size. The colour was changed to a brighter green as I believed it increased readability of the logo from the contrast it has against the background. This logo speaks to the brands product because the typography used (Poppins Bold) presents the logo as being professional, sleek, and strong, which makes the brand look superior to other competitors. This logo would work well to promote the company’s identity because the bright green used makes the taxi and the writing hard to miss on any visual or physical form of advertisement. The subtle use of the leaf replacing the bridge of the ‘E’ tells people that the company is in fact an eco-friendly solution of transport. The ‘online’ was kept for this logo as it tells consumers that the company is an online space and gives them a sense of direction to look for the app. This will be the logo that I choose to go forward with because I feel it can promote the company’s identity the best and will look good across the whole brand.
Wireframes
rough example 1
rough example 2
Final HQ.
I believe this design would benefit the company’s agenda because ‘CabEonline’ is superior to other firms so booking a taxi needs to be the quickest thing. Once loading up you can see your location straight away and next to it how long it will take to find a taxi. This is a good way of keeping positive customer reviews because normally people don’t mind waiting the time if it states to them. For returning customers, it is quicker to get a taxi as below you can click one of your pre-saved destinations and order a taxi without having to type the address in and wasting time.
For new customers it is still as easy by clicking ‘Where to?’ which allows you to type your address straight away and add stops if needed. ‘CabEonline’ is all about efficiency as well which the app provides by allowing you to prebook your taxi, so it automatically comes later without you doing anything. The confirmation screen also shows the route the taxi will take which will be the quickest and the safest route. This comforts the passenger in knowing that they will get there the quickest way but can also see the exact route in case they didn’t feel 100% safe. To make payment easy as possible the app allows phone payments like ‘Apple Pay’, which saves time not having to put card details in.
The actual design of the app would benefit the company’s agenda as the colours are from the palette created, meaning the company’s online presence will match across the board. Using the bright green to highlight key elements like the ‘Confirm booking’ button and other CTAs improves the overall readability of the app resulting in faster booking times and a higher rating from customers. ‘CabEonline’ has a very broad demographic meaning the design of the app must be easy to use for most ages’ erg 18+, and I think the design has successfully done that as it follows a simplistic but affective style throughout.
Banners.
The three banner designs are very similar because I want each one to send the same message and use the same elements as people remember more when they see something multiple times.
The rectangle design captures in a summary what the company is all about. This includes the care for the community and the purpose of this new service. The first thing people will see is the picture of the Humber Bridge as it’s a landmark of their hometown which results in them building an emotional connection with the company. The ‘Faster, Greener, Smarter’ entices people to wander what will improve their lives. The mock-up of the person on the app helps to do this by showing them booking a taxi. The slogan underneath then confirms what this app is about, and the CTA then entices people to download it. The way the story of the banner flows is down to the colours and the size of the texts and elements. Having white text against a dark background makes it much easier to read, and when read at long distances the bigger text is always read first.
Moving on to the Mobile Banner. This keeps the same essential elements and text to tell the story of the company. Including the Humber Bridge and the slogans. Having only a few slogans makes it easier for people to remember and it can also bring the opportunity for people to create hashtags out of them to use on social media, helping the goal of increasing the brands online presence. The background on the left is a collage of photos of taxi passengers smiling and looking satisfied. I added this because when people see this banner and the collage of people it will give them a sense of trust that ‘CabEonline’ can put that same smile on their faces.
Moving onto the skyscraper banner. This long banner gives the opportunity for more of the story to be shown and possibly create a stronger connection to passers-by that see this. The new addition to the story is of a smiling man in the back of a taxi giving their driver a high rating. This new part of the design helps build that trust even more by making expect to have the same customer service as the man on the poster. Having the collage of the passengers wasn’t needed in this case as this part of the design replaced that. To help drive footfall to the app I decided to add a QR code to the banner so people potential customers can download the app in a few clicks, saving time just like the poster says it will. The Humber Bridge will stay in the background of these posters because it’s an instant connection to people, catching their eyes and making them read along.
My main goal when starting to design my website was to improve the navigation throughout the site and make it as user friendly as possible. This is because youths are the target audience so simplistic navigation throughout will keep the user engaged and will not get frustrated. Thinking about the user’s needs, they are primarily looking for information on the website. So, to improve the time taken for the user to find the information, a menu bar with core subjects could be created, replacing the drop-down menu. In addition to this, a search bar could also be included in case the user had something specific they needed to find.
Accessibility is crucial for a community website like this one, so I will have to plan for inclusivity. This could include contrasting the text with the background making it easier to read for visually impaired users as well as using buttons and icons for users that struggle to read text. Another goal to improve the website was to include more Imagery as the current Corner House website has hardly any. Including enough Imagery within your website not only grabs the viewers’ attention but it also supports accessibility as some users prefer visual learning over reading. Imagery can be used anywhere suitable on the homepage as we want all the content to stand out.
When moving onto information pages Imagery isn’t as important as the text is what the user wants to read. 3 images max can be used to break the text up as well as large heading boxes on certain sections to emphasise their importance. Having UI/UX elements is a must for this website as the target audience is young, so animations and other elements will catch their attention and make them stay on the website for longer. UI/UX elements also help improve the navigation throughout the website because for example, an infinite photo carousel allows users to see various parts of the website right on the homepage.
Initial Sketch/Low Fidelity.
Mock up of the homepage
I went into my low fidelity design focused on the goal of making the site user friendly, making sure I used the correct layout to optimise my goals. Having large boxes across the whole of the landing page allows for enough space for content to be placed and viewed with full clarity. This combined with having large text boxes for headings to be placed will allow for an affective but simplistic design layout. On the current Corner House website there is an option to hide the website quickly to give the user discretion if anybody walked by. I decided that this feature should be kept in the new design as it gives the user closure, to know they don’t have to worry about people looking. I also made the decision to move the social media buttons to the top of the page rather than the bottom. This makes it more noticeable, and the user doesn’t have to scroll to the bottom, improving ease of access and navigation. At the very bottom of the homepage, I have created a wider layout, for the plans to have a carousel that show latest news posts for the user to see. This is at the bottom of the page because users tend to only look at news in something they are interested in, and it is secondary in importance to everything that will go above it. Users will only scroll that far down if they have decided to stay on the website.
Below are sketch examples of what the information pages plan to look like with different layouts.
Flipside page mockupParents and guardians page mockup
Donations page mockupNews Page mockup
Logo Design.
I spent a lot of time designing the logo for this website and had a lot of different varieties.
Perspective logos
First, I tried to play with the words ‘corner’ and ‘house’ to create a corner perspective in the logo. I really liked the concept and the way it looked but it doesn’t show what the organisation is about and looks too formal. I then tried it with different typefaces to see if I could make it look like it fit in a community website, but it didn’t work. Then I also tried using the initials to create a corner house but again it would not present the organisation that well.
typeface focused logos
After that, I moved away from the perspective idea and tried to design the logo around a house I had created. I used Helvetica as it didn’t seem as bold as other typefaces I tried, and it has a simplistic neat look to it. I used a pastel colour pallet on ‘house’ and alternated it on the letters to try and give it more of a childish look. I do think that this combined with the house makes it look like the logo represents some sort of charity. As a result, I liked the colour scheme of this logo as it was different, but there was no sense of community in it.
foundations of the logoLogo variation design with people
I decided to have a final go at using shapes to create a house of some kind. In the end I managed to create this shape by combining two squares together. I added a window at the top of the shape to make it clear the user that it represents a house. Gradients seem to make things look outdated in 2024 but when I experimented with this gradient, I believe it made the logo look a lot better. I used inspiration from the current Corner House website and tweaked it slightly to give it a fresh look. The sense of community still felt absent from the logo, so I started to experiment trying to fill that space with people. After different variations I found the one I was most happy with.
Different text variations
The next step was to find a typeface that complimented the rest of the logo. After much experimentation I found the typeface, I wanted to use. Gambado Sana Forte is a unique typeface as the letters are slightly out of line and rotated. This gives the logo the youthful and playful look I was looking for, and when you put the full logo together, it is clear to see this is an organisation that focuses on the younger generation.
Initial Selected logo
A last-minute swap was made to the logo before I could call it complete. I thought that the window at the top could be replaced with something that would hold significant importance or signify something. This is when I created a flower like shape to take its place. Flowers bloom because of care and growth, which symbolises hope and new beginnings. They are also central to symbolising happiness and success, so having this symbol in the logo gives it the significant importance the organisation supports. As I had created a lot of logo variants it was important to get feedback on which one my fellow course mates liked best. Fortunately, the majority agreed with the one I chose. One person said they ‘really liked’ the house concept as it gives it a ‘unique look’ and someone else really liked the typography used as it ‘adds a lot of character’ to the logo. One thing that I got told I could improve on was the ‘placement of the text’. So, to fix this I moved it to the side instead of underneath which looks a lot better.
Final Design Logo
Mid Fidelity.
Mid fidelity homepage
Moving onto my mid fidelity I focused on organising where things will be placed. For example, putting the projects at the very top in a particular order and then other important information below that. These were placed in this order from being most important to least important, creating a type of hierarchy. The font that has been chosen will be used as the main font throughout the website. The main reason I chose this was because it’s the same font that I used to make the sub-text in the logo, October Devanagari. The typeface is rounded and uses curves to make it look sleek but also playful, which can be visually appealing for younger audiences. Using the same font for the logo and the website not only strengthens brand recognition but it also enhances visual harmony. Having lots of different fonts on a website can look unprofessional and increases the users cognitive load which can result in them leaving the website, whereas one font allows the design to flow smoothly.
Throughout the website I decided to use curved corners on boxes, buttons etc. This is because curved boxes can reduce visual tension, which can lead users to have a much calmer experience when visiting the website. Creating a calmer environment allows the website to become more inviting and friendly which is something that is very important when your audience is of the youthful generation.
menu bar
The headings in the menu bar are mostly the same as the ones in the drop-down menu on the current Corner House website. Having them spread across the top of the landing page means it’s the first thing the user sees, which will result in faster search times. I added the ‘How to find us’ from the current website onto the menu bar as well because as it is a form of contact, it’s a vital part of the website that should be available at the user’s fingertips. Some people like to speak about their matters in person, so to have it at the top, it means they don’t have to scroll down just to find the address like the current website. I gave the donation button its own space as this needs to stand out differently to the rest of the sections so the user can donate with ease if they wish to.
Thinking ahead for my high fidelity and my UI/UX elements I used the underline tool to highlight the page the user would be seeing, with each section having this feature. So, when it comes to prototyping and animating, the underline will smoothly move to the next selected section and vice versa. Although even without the animation the underline still makes an impact, improving the user experience as it provides feedback and confirmation to what the user has pressed.
There is one slight change that has been made from the low fidelity to the mid fidelity. At the bottom of the homepage, the one button has now been split into three. I did this because there was some information embedded deep on the website that I thought should be displayed on the landing page, for users to have quick access to. These being ‘Work with us’ about job vacancies, ‘Local events’ which displays upcoming events, and ‘History’ which tells us how the organisation started. I’ve kept the layout of the footer the same as the current website, just making a few tweaks like the round corners and adding the new logo.
The rest of the pages are information focused meaning I have left Imagery to the minimum. This allows the user to read and find their relevant information quicker rather than scrolling through images they don’t need to see. At the top of the information pages is a content holder, which will be filled by an image relevant to the section as well as a title heading. This not only gives the user clear confirmation on what they have clicked on but helps to bring a small dose of imagery into the information pages without causing distraction.
Flipside Mid fidelity
My plan with the boxed headings is to do something similar, and that is to add content in the background and then have the headings overlap them. I thought this would be a clever way to implement imagery again without causing distraction because as it’s a heading we want it to stand out from the rest of the text anyway. Visual elements like photos can help guide users through the site, which improves navigation and usability.
Before I moved to my high-fidelity version, I wanted to see how the menu bar layout would look with a gradient. As this is my mid fidelity, I used greyscale, but I think it might be a good addition to have in my final website design.
Example of the Parents page – Mid Fidelity
High Fidelity.
Moving into my high fidelity my focus was to bring the content into the website and colourise it. I decided to keep the gradient on the menu bar and matched the colours to the gradient on the logo, to strengthen the brand identity. Due to the vibrancy on the gradient the black text did not look aesthetically pleasing. So, to fix this all the text was changed to white. This gradient has been implemented onto certain things across the website e.g. the buttons, which makes the user be drawn to them faster. I decided to set the purple from the gradient as the primary colour used on the website. This includes text and some headings.
The high fidelity homepage
The large box at the top has been filled with a selection of content that will switch automatically between, when prototyping is finished. The ‘Welcome to Cornerhouse’ message is very large on the current website, so I thought it would be a good idea to do the same because a warm message sets the tone for the users experience and makes the organisation/website feel approachable and user friendly. I created an illustration on the right, using photos to show what the organisation supports. I think this was a good thing to add because it not only fills the white space around the text, but it shows the user that the organisation is inclusive and is all about support. All the photos I used were downloaded from Unsplash.
The different content on the infinite carousel
The other two slides to this section follow a different layout. On the current website there is a ‘latest post’ section, but it is squished to the side, which does not look aesthetically pleasing. The current website also does not showcase their YouTube videos which not only reduces the content the organisation provides but results in missed engagement opportunities for users that prefer watching videos. So, I took the opportunity to improve both problems. As the content is the primary focus on these slides, I moved the text to the side to allow for a clear look for the user. Most of the text stayed the same in terms of size and boldness. However, a new sub-heading was created to show what the content is about. This needs to be clear to the user, so I made sure to make it bolder than the paragraph text but not enough to overpower the title. Both Images used were taken from the current Corner House website.
Moving down there has been a change in layout in terms of the headings. Instead of them being central in the middle, I made a decision to move them to the far-left side of the page. This is because it results in everything being in line with each other which reduces the user’s cognitive load. Each box section follows the same design principles apart from having a different image that is relevant to the topic. For example, ‘Flipside’ is about sitting down and having interventions with young people, so I chose an image of two people having a serious talk.
All the box sections will behave the same when they are hovered on and will reveal a short summary of what that section includes so the user doesn’t have to leave the homepage if they don’t want to. I used a ‘Latest News’ post as an example.
Example of how the information changes when hovered over
The ‘Latest News’ section brings the use of buttons into the design that were not in the low or mid fidelity. This is because I realised that if the news was on an infinite scroll it would make it hard for the user to read and keep track whilst it was continuously moving. Once Prototyping is complete these buttons will be used to seamlessly animate over to the other stories and vice versa.
The information pages have changed from the crossover of mid to high fidelity. The Flipside page for example is now full of colour and looks a lot better. I’ve used the same image that represents Flipside because after prototyping this should allow for a smooth transition. One problem I did face is that the title heading didn’t stand out enough against the background. To fix this, I applied the same gradient used on the menu bar and decreased the opacity to still let the image come through. The combination of this, adding a drop shadow and making the title heading bold, improved the readability of the text.
Flipside Page High Fidelity
For this same reason I decided against adding imagery in the heading boxes. Instead, I filled it with the primary colour to highlight that these sections were important. To make sure the other headings still stood out, I made it a different colour to the body text and made sure they were underlined.
After the problem with the title heading and the background, I decided to follow the same procedure on the other pages, as we can see on the ‘Parents and Guardians’ page.
This page has a different layout to the other pages. It is because there’s a lot of information on this page, so it must be presented in a way that the page isn’t too long, but the information isn’t squished together either. That’s the problem with the page on the current website, as the information looks too cramped together leaving no room for Imagery.
Donations page high fidelity
In the end I settled for a banner layout that will expand when clicked. The banners follow the same design as the title headings with the gradient and the relevant imagery. I’ve used ‘Sexuality and Gender’ as an example of how everything will look when it opens. I had the issue again where the text was unreadable with the background behind it. So, to fix this problem I had to make the background darker and give the text a drop shadow to make it easier to read. Once prototyping is complete the different sections should smoothly swap out when they are being clicked on.
High Fidelity Mobile.
The final version of the website should be responsive meaning the websites can adjust to different sizes. To give an idea what this will look like I created a high-fidelity mock-up of the landing page and one of the information pages.
example of homepage on MobileExample of homepage on MobileExample of Homepage on Mobile
In terms of layout all the text has been centralised on the landing page. I thought this was a good idea as phone users focus on the centre of the screen more than anywhere else. Instead of being in a row horizontally the boxes were flipped to be in a row vertically. Keeping as many as the same elements from the desktop version allows for a more seamless transition for the user. Which is why instead of adding lots of new elements I tried to reorganise the ones we already had which I though was a good decision.
One Problem I faced with the transition was the menu bar because If I added one to the mobile version, it would have to be that small that it would be hard to read the text. As a solution I decided to create a drop-down menu like the one on the current website. This allows for the user to see the text clearly and makes the site look more professional due to nothing looking cramped.
Drop down menu open
The three buttons at the bottom of the website have also been added to the drop down because it prevents the user having to scroll down to the end if they want quick access to one of those buttons. As it’s a phone the width is narrower so it’s a longer scroll whereas on desktop there’s a larger width meaning the buttons at the bottom are fine on desktop.
The socials and the donate button are grouped together by a banner that will stay in the same position throughout the mobile site. This is because they are both important interactives with the socials leading them to more content when they have finished on the site, and the donation button being always there to entice them into clicking it.
I kept the ‘latest news’ the same but with only one post showing at a time as this keeps all the content in line and keeps the user’s cognitive load to a minimum. The information pages stayed much the same, only did I expand the heading boxes to stretch across the whole screen. This helps break the sections up and makes it easier for the user to read.
example of Flipside Mobile versionExample of Flipside Mobile version
Sustainable and Ethical practices applied.
Throughout building the website I have thought and considered a few sustainable and ethical practices. One sustainable practice was that I used digital tools to design my sketch and fidelities instead of printing and using paper. This was more time consuming than pencil to paper, but it was much better for the environment. Another sustainable practice is building the website on your own because if you had a team that were not local, people would have to travel to meetings etc. contributing to co2 emissions. I tried to keep animations and script use to a minimum and only where needed to encourage digital minimalism. The landing page has the most animations as it needs to be eye catching to the user to keep them on the site. The other pages make up for it though because all they have are a few feedback animations. Animations and scripts increase data transfer but also energy usage. So, reducing heavy elements like animations results in a more energy efficient website.
