2021 SFSU Virtual Senior Design Show;
Brand Identity, UI Design, Social Media
The word interconnected is defined as being connected at many varying points and in many varying ways. The show “Interconnected” is about reminding the students, graduates and viewers that although we are disconnected physically, there are many other ways we remain interconnected. A senior, graduate show should be positive in tone as its an exciting, proud time for the graduates; and although we can all agree we feel more disconnected than ever, it’s important that the theme of the show shines light on the positivity and reminds the graduates of a hopeful future after such a hard year. This is the goal of the brand identity and theme.
Ideation & Process
Through looking for inspiration, I looked for ways to visually represent connection. In the end, I was most inspired by the shape and form of a string element as it added a positive and playful tone the brand identity is going for. Also, through knowing that the show is virtual and the website will show a wide array of student works, the brand identity shouldn't be too overpowering as it could clash and overpower student's design; so, modern minimalism was also an inspiration.
Sketches
Early on in the sketching stage, I explored the concept of representing connection through technology; this, though, didn't give the brand identity the positive feel it was going for, it rather felt cold and disconnected.
Then went on to explore intertwining the prefix “inter” throughout the word “connected”. This is based around the concept of interconnecting the word “interconnected”. Through this exploration, I started the incorporation of string-like material.
Early Iterations
space
Brand Identity
Animation
The animation's goal is to add to the brand identity's positive and playful tone. The viewer watches as the string-inspired element weaves its way through the word "connected" virtually interconnected the word.
The brand identity's typefaces are both Didot and Lato.
Didot is the primary typeface used for the title in the logo/splash header. Didot gives the brand identity the modern feel that the brand is going for and inspired by. Through type study, this type proved to be best fit in comparison to other modern typefaces, such as sans serifs and condensed type, as the thick and thin lines of Didot contrasted well with the one-weighted string-like element in the logo and the brand identity.
Lato was mainly picked for its legibility at small sizes unlike Didot and its wide range of weights. In the splash header, Lato is used for the subtitle. The "2021" is put in bold to compliment the thick lines of Didot, and the "SFSU Senior Design Show" is thin to compliment the thin lines of Didot.
The brand identity's colors are a deep teal, a bold orange and a pale orange.
The deep teal is a bold modern color while the bold orange compliments the teal and adds a pop of color to the brand; the pale orange eliminates a plain white background, while also balancing out the bold orange color from looking to gaudy as it does against white.
space
UI Design & Website Mockup: Desktop
Mockup of the Desktop Website
Video run-through of Homepage
The brand identity's orange string element continues throughout the homepage, not only extending the brand identity throughout, but also guiding the viewer's eye downward.
The student profile images are added on the homepage to add personality and a face to the name, while also reducing risk of boredom with just a list of names.
There is negative space added in throughout to help reduce clutter or congestion and help maintain balance with the string element.
The overall goal of the student page’s is to have the student's work be the main focus, as this is a design show. To accomplish this, the pages are made simple and clean to limit any distraction. The student's work is in a slideshow format to show one at a time so each work gets the undivided attention it deserves.
The student is also important, since this is a student show. So, next to their work, their name, major, and description of themselves will be displayed. The image is optional, if a student doesn't submit an image, there will be no placeholder to reduce unnecessary distraction with it.
The sidebar of links to other student’s pages continues on the connection theme- each student page is connected to the other designers. It is made collapsable, again, to reduce distraction from the student page the viewer is on. This sidebar also eliminates frustration and annoyance with having to go to back to the homepage every time the viewer would like to see another student's page.
Profile Image Treatment
Profile images are in duotone treatment using the brand colors in order to have cohesiveness throughout the design.
Mouse Cursor & Favicon
The mouse cursor continues the brand identity throughout the website with form and color. It is inspired by Celtic Knots- Bowen Knot and Triquetra. One of the meanings of Celtic Knots is the unity between people, tying back to the concept of connection
The favicon is made simple in order to work at such a small size. The colors, again, reflecting the brand identity, and the "21" reflecting the year of the show.
space
UI Design & Website Mockup: Mobile
The mobile homepage doesn't vary much from the desktop homepage.
The main difference between the two is that the student profile images are actually taken out on the mobile version. They're taken out in order to reduce the amount of space each student name takes up; therefore, reducing the amount of scrolling one has to do and with that reduce risk of boredom and annoyance with scroll.
Similar to the desktop site, the student pages are simple and clean with limited distraction, giving each student the attention they deserve.
space
Social Media Design
The social media campaign for the 2021 SFSU Senior Design Show will be shown through Instagram stories. The social media design reflects the brand identity both conceptually and aesthetically. Each slide is connected through the brand identity's string element that continues throughout the story.
The writing also ties back to the positivity the brand identity is trying to remind the viewers and graduates of; reminding us that we are still interconnected, even if not physically, showing the graduates how they are connected while also pertaining it to the design show, then there is an interactive slide for people to participate, finally concluding with the introduction to the design show.
Social Media Animation
