moonling
graphics
•stvdio•
Year:
Final Year Project
(2020 – 2021)
​
Medium:
Adobe Photoshop
Adobe Illustrator
Adobe InDesign
Figma
Wix
The sudden shift of tertiary design education from the physical to virtual space was made necessary during the COVID-19 pandemic. This created a flurry and growth of digital resources for online teaching and learning; but due to the short span of time, there was a lack of expertise in streamlining the most relevant resources online for remote design educators.
In addition to that, there is a challenge to recreate a similar level of social interaction and collaboration that goes on in physical studio sessions, that is vital to the reiteration process of design projects. stvdio is designed as a digital product platform for design educators, meant to help recommend a plethora of collaborative resources, provide suggestions on how to utilise them strategically, and raise discourse about how to best take advantage of educational technology.
DESIGN SCOPE
​
The entire stvdio project consists of four main segments:
​
1. Overall branding
2. Web design (www.stvdio.org)
3. Print and Event collaterals
4. Animated explainer video
5. Graduation Show Booth
1. overall branding
During the initial ideation for stvdio’s identity as an organisation behind the main digital product platform, I experimented with and reiterated many different forms and colours of the logo of stvdio. The main concept I wanted to communicate was the novelty of new platforms, coupled with the conviviality of social interaction that happens during design classes.
2. web design
After compiling useful EdTech resources and their features, I started to plan my website structure by first creating a sitemap on Figma, which I used to plan out and reiterate the site structure and user flow of the page.
​
After the sitemap was established, I moved on to create wireframes to plan the layout of elements and components which would be included on the website. Thereafter, the style and layouts of the screens underwent several rounds of iteration before arriving at a finalised template
SITE ARCHITECTURE
​
The main tabs of the stvdio website consists of a home landing page, a ‘Resources’ resource recommendation page, a ‘Bulletin’ articles page. ‘Community’ forum page and an ‘About’ page.
3. print and event collaterals
PRODUCT POSTER
​
I designed an A2 poster which would be featured in the vicinity of local tertiary institutions offering design-related courses.
This product promotion poster briefly summarises the key features of the stvdio website, and a point of access for design educators to gain awareness of how the website can help them better facilitate remote design classes in the future.
EVENT POSTER
​
In order to promote a ‘Digital Design Pedagogy Panel’ event, I designed another A2 poster which promotes participation in the virtual conference, with details about the session. It features the different fields of design education which may benefit from using such collaborative digital platforms (product design, user experience design, graphic design and interactive design).
WELCOME PACK COLLATERALS
​
As mentioned in my primary research, participants of the Design Education Summit 2021 had received a welcome pack with a variety of gifts. This inspired the creation of physical collaterals for hypothetical attendees of the “Digital Design Pedagogy Panel”, consisting of T-shirts, a tote bag and a doorknob hanger.
4. ANIMATED EXPLAINER VIDEO
Last but not least, I created a motion graphic (accessible at https://youtu.be/BAX59FKS4pI) to quickly summarise the stvdio website in a visually engaging manner. Firstly, I planned out a script and storyboard on Miro to draft out visuals and animation transitions.
After doing so, I illustrated and prepared the assets for animation in Adobe Photoshop, before proceeding to create and render the animation in Adobe After Effects.
5. Graduation show booth
