At the current state, we have a concept for our app and a code of conduct that highlights the community we’re hoping to foster with it. The next steps are to figure out what this thing will look like, how it will work and how it will be communicated. Today we’re going to start developing a cohesive design system for your app and iron out some of these questions. We’re going to go through an abridged design process so that everyone jumps in to each section of their project. It will be your job to keep pushing all of these categories for next week.
Final Presentation Info
For the final presentation on 12/09, each student will give a presentation that introduces your concept and ends in a demo of your app(on figma). The entire presentation should feel rehearsed and consistent. The entire deck(PDF, InVision, Google Slides) should feel like it’s in the same tone of voice and design aesthetic as your app/website. The presentation and the design of your app will be graded equally.
Example Structure for Presentation
Title of project(come up with a strong title that summarizes your project)
What is it?
Why did you make it?
What issues is it addressing?
What is the community that uses this like?
What is the design system and what is the story behind the design?
How does the design system get integrated into the app and beyond. Consider showing how the brand can extend past the interface of the app. Where else does it live? What does it look like in these platforms? Everyone should have at least one instance of the brand extension that makes sense with your project. You can consider: real life blocks(Kyle!), social media, club t shirts etc.
Demo of the app that shows the main pages as well as the code of conduct
Your goal is to highlight the most exciting parts about your project and to highlight the concept and strategy behind your design. For this reason, you do not need to design the ENTIRE app. You only need to show the screens that highlight the key functions and features of your app/website.
BEFORE WE BEGIN
Create a dropbox paper document where you’ll house each activity as we complete it.(I.E, After we do Activity 1, you should have either a list or an image of your site contents on your document)
Activity 1 – Site Map
Even though we aren’t designing every page of our social network, we need to understand all the pages that go into creating it. When I work on this, I like to start with a list and outline all the pages that go into it and jot down notes of what each page has, here is an example:
screenshot of an outline for a recipe website i’m making. I start with a general list of all the pages, and then break each page into sections with all the content that will live on it.
If you prefer, you can also create a visual sitemap either in Figma, illustrator or an online tool like this: https://www.gloomaps.com/
A more common approach to sitemaps
Think about what is necessary to sign up and use the core functionality of the app and consider what kind of navigation your website will have. Even though we aren’t going to design all the pages, the navigation should be completely thought through and realistic.
Take 30 minutes and create a site map(either an outline or visualization) for your project.
We’ll move on at 11:15 am
Activity 2 – Key Concepts & Reverse Engineering a Brand
Based on your initial presentation and your community guidelines, let’s try and articulate the visual point of view of your project.
While we’re not creating a commercial product, the way a strategy is developed for brands is really helpful in breaking your project into digestible chunks and giving reasons to your design decisions. To show what I mean, let’s take a look at a few brands that have a strong and consistent point of view, and see how if we can figure out how they got there.
Take 30 minutes to work on the 5-8 keywords, concept sentence and mood board. Then present your work to a partner and get some feedback on if it’s clear, memorable, and appropriate to your project’s goals. Revise if necessary.
Final Presentation Info
BEFORE WE BEGIN
Activity 1 – Site Map
Activity 2 – Key Concepts & Reverse Engineering a Brand