Book Size: Standard Portrait 8x10
1
This is the first printable page in your book and will print on the right side.
These instructions should not appear in your exported pdf. Please be sure to complete your Pages design prior to creating your Cover template. The Page Count must be exact when creating your Cover template.. You’ll need to upload a PDF for the pages and at least one cover type. Remember, all books must be an even number of pages. The first page will be on the right side as you open the cover and the last page will be on the left side as you close the book. Hardcover books include an end sheet on both the front and back of the inside pages for binding purposes. Please note, all critical text and art should appear within this gray area. Any content outside this area may be unevenly trimmed or hidden by the gutter when the book is bound. If you would like your artwork to extend to the very edge of your finished book then pull your artwork edge to the red bleed line.
Be sure to review your exported PDF in an outside program (like Adobe Reader) to ensure it appears correctly and without these instructions. Further info can be found at: http://v/apps/indesign-plugin
2
3
4
5
( or ) How I lost my soul in the course of 14 weeks.
6
PART 1
INTRO
8
Introduction
WE DIDN’T HAVE A WHOLE LOT OF MONEY GROWING UP When I was a child, my family didn’t really have a whole lot of money. My Dad works at a Steel Mill and my Mom stayed home to take care of my brothers and I. We made ends meet, but it took a lot. My Aunt Rosemary ended up putting us all through school since we couldn’t afford to go to the schools we wanted to; the private schools where our family wanted to send us to get the best education. We were fortunate to have my Aunt, but not everyone has that benifactor waiting to help you up when things get a bit rough.
9
This is how it starts...
A HOP, SKIP, AND A JUMP When it came time to go to college, I knew that it was going to be up to me to put myself through a achieving a degree and making my way to a professional job within the creative field. I knew I wanted to study graphic design, so I took classes at a local community college back home to earn an Associate’s Degree before transferring to the Kansas City Art Institute. I
Introduction
worked my way through college and I wouldn’t give that up for anything.
10
11
This is how it starts...
12
Introduction
13
This is how it starts...
IT’S ALL ABOUT PEOPLE While at KCAI, I have learned more than I could have possibly imagined. I’ve been able to craft so many different systems with so much different media on so many different platforms. The biggest thing I have learned, though, is that design is for people. In some way, with everything we do, our end goal is always to better someone’s life.
1.28.15 14
Research | Initial Phases
TECHNOLOGY IS GROWING Also while at KCAI, I have been able to design for multiple platforms
15
and have truly fallen in love with technology. Through technology, created their work on paper or some other medium. Thorough class assignments, personal exploration, and internships dealing with technology and seeing how vast and accessible it is, it made be begin to question by education isn’t beggining to utilize tech a bit more to help reach more people and even cut the cost.
Pre-research Ramblings
designers are able to access a much wider audience than if they were
PART 1 17
RESEARCH
Research | Initial Phases 18
GOT A BIT CAUGHT UP... Today, on the first week of class and the first Degree Project class, I realized that I was way over thinking everything.
19
Pre-research Ramblings
20
21
ANYTIME, ANYWHERE Skillshare touts itself as the learning platform for creators that allows people to learn at anytime, anywhere. The platform has a pretty minimal interface that is fairly easy to understand and offers a rather large number of classes taught by industry giants. The amount of classes offered and the validity of instructors lends a lot to the credibility and excitement of the site, but there are quite a few drawbacks as well. Not taking advantage of the devices the app is on (phone, tablet, desktop) and the technology they have is a pretty big one. The classes also don’t feel personal because they are so darn large, which also disuades instructors to really give valuable feedback and connect with the students.
THE HOME PAGE..... There’s just really not a whole lot to look at. It’s mostly just random Information with a big ol’ image at the top and a basic call to action button. It gives a few sections that shows trending classes and a few student projects, but it’s pretty bare bones. Which, don’t get be wrong, can be a good thing. But...I just don’t think it is in this case. I wish there was a bit more of a story telling the user what this site is about and why
Audits | Skillshare (cont.)
they should be super excited to use it.
22
23
Interaction / Structure Audit
Audits | Skillshare (cont.)
HOME PAGE •
pretty bare
•
top tracks = top class categories
•
trending classes = top, most popular classes
•
trending students = most popular projects
WHEN YOU SIGN UP •
can sign up with Facebook = helps promote more social media interaction
24
•
“what are you interested in?”
•
have to choose 3 interests to continue
•
recommended for you
•
save 5 recommended classes to continue
•
takes you back to your classes
CLASS PAGE •
introductory video
•
gives an overview of teacher + course
•
unpaid users can only access this video, then prompted to enroll in class / pay when you try to watch other videos.
•
the number of students, # of projects, # of reviews
•
home = overview of class and a few projects, related
•
discussions, about the class, related classes
25
Interaction / Structure Audit
26
Audits | Skillshare (cont.)
PROJECT ASSIGNMENT •
deliverable = what’s to be turned in
•
resources = books, etc.
•
attached files
PROJECT GALLERY •
trending, most recent, most liked
PROJECT PAGE •
description of project (by student)
•
show process and final
•
constantly updating project
•
NOT EASY TO SEE INDIVIDUAL UPDATES
27
DISCUSSIONS Basically a FAQ pertaining to the class
•
There are SOME teachers who hold open houses for students so that they can visit the instructor’s studio and get personal feedback (or Skype call them), but... they charge for it $$$$$$$$$$$$$$$$$$$$$$$$$
......What?
Interaction / Structure Audit
•
28
Audits | Skillshare (cont.) | Pros and Cons
29
30
DISCOVER, CREATE AND SHARE HELPFUL CONTENT ONLINE. Skillshare touts itself as the learning platform for creators that allows people to learn at anytime, anywhere. The platform has a pretty minimal interface that is fairly easy to understand and offers a rather large number of classes taught by industry giants. The amount of classes offered and the validity of instructors lends a lot to the credibility and excitement of the site, but there are quite a few drawbacks as well. Not taking advantage
31
32
Audits | Guides
33
Pros and Cons
34
Audits | Guides | Pros and Cons
35
Even more Cons!
TEACHER
Keywords
There has to be something to keep students and teachers both coming back to the app and completing what they need to get done. For teachers, they need reason to put together stellar curriculums and continue to keep them updated. They also need to be continuously active in their classes, constantly leaving feedback for students as well as being available for emails / chats when students really need them. Instructors aren’t intended to be on the student’s beck and call, but they should be an impactful part 36
in their students’ education. And they should want to be as well.
ACCOUNT
37
TABILITY STUDENT Student’s need reason to upload solid work and to be a contributing part of the classes they are signing up for. They need reason to post process, keep up with deadlines, leave valuable feedback for others, and even keep up with their notifications. Student should feel responsible for their work and keeping up with their classes. This should come about through excitement for the classes and the system. This should be fun.
Students and teachers both can benefit from a sense of accountability that is fueled by one another.
38
Keywords
PRO
39
Something that a lot of the creative sites out there are missing, I feel like, is the ability to show the process a project goes through in getting to the final stages. I should state that some sites do allow for this, but it’s mostly in allowing users to make multiple posts which contain hundreds of really unsorted and unorganized comments. It’s not a constructive way to show development or to keep track of valuable feedback (which most of these sites tend to lack as well). The process should be able to be shown in a more linear fashion, which eventually works it’s way up to the final product. Almost like a case-study.
40
41
PART 3
BRANDING
44
Research | Brainstorming
45
Ooooooh lightning!
Branding | Name Studies 46
QUITE THE PROCESS... For some reason, branding has really been taking me a while to figure out. With the research that I’ve done, it’s been easy to come up with keywords and perimeters for the project, but it’s really throwing me for a loop trying to figure out the damned name. I ended up word-vomitting all the words and phrases that even had the tiniest of connections to the project until I came up with two that I thought represented the project the best and held the most verbal appeal: Scribble and Workshop.
47
...and forever...
Branding | Typeface Studies
WORKSHOP
48
WORKSHOP WORKSHOP WORKSHOP WORKSHOP WORKSHOP
WORKSHOP WORKSHOP WORKSHOP
woRkShop woRkShop WORKSHOP
scribble
scRiBBle scribble scribble scribble 49
The winners of the word-vommiting were Workshop and Scribble. Scribble spoke to the rough birth that some creative ideas have and the haste in which they are scrawled into existence. It’s also a fun, approachable word that aims to be inviting. Workshop speaks to the process element and the idea of a collaborative learning environment. Most of the classes being put on within the application have a workshop air to them as well.
Easy to see which one won out, huh?
WORD PLAY
For these reasons and a few more, Workshop ended up being the prize fighter and ultimately won out. It has a professional tone to it, which helps with credibility.
dRKSHrp poop
HEX: #e0881d R: 224 G: 136 B: 30 C: 0 M: 49 Y: 98 K: 10
HEX: #e3a03a R: 228 G: 160 B: 58 C: 0 M: 35 Y: 85 K: 10
HEX: #f16321 R: 242 G: 99 B: 34 C: 0 M: 76 Y: 100 K: 0
HEX: #f7941e R: 247 G: 148 B: 30 C: 0 M: 49 Y: 98 K: 0
HEX: #f9af3f R: 250 G: 176 B: 64 C: 0 M: 35 Y: 85 K: 0
Branding | Color Palette
HEX: #db5a1e R: 219 G: 90 B: 30 C: 0 M: 76 Y: 100 K: 10
50
HEX: #259bcd R: 38 G: 156 B: 206 C: 70 M: 15 Y: 0 K: 10
PICK A COLOR, ANY COLOR Bright, approachable, attention grabbing. While going through colors, I chose colors to compliment the keyword I had initially set for the application itself. Orange is the main color and has certain connections to a feeling of renewal (sunrise) and sense of being fresh. The student’s using this app are trying new things and taking chances, so the goal is for this to come through within the palette. The blue serves as a compliment to the orange. It’s mostly only used for small call outs, especially notifications. The blacks and greys are toned down to appear more approachable and less demanding on screen.
51
CIRCLES CIRCLES CIRCLES
HEX: #27a9e1 R: 39 G: 170 B: 225 C: 70 M: 15 Y: 0 K: 0
HEX: #3f3f42 R: 64 G: 64 B: 66 C: 69 M: 62 Y: 58 K: 46
HEX: #bcbfbf R: 189 G: 191 B: 191 C: 26 M: 19 Y: 20 K: 0
Branding | Logotype Studies
SHOWING THE PROCESS After I selected the title and typeface of the application, I dove in and begun to figure out what it was going to look like. Almost immediately, I begun to develop some fun icons for the application, which I then begun to add to the logotype to help emphasize the focus on process.
52
The slab-seriffed typeface itself shows sturdiness and durability, but the addition of the rounded corners adds an element of approachability. The face also has a nice way towing the line between classic and modern-hip, which I think helps with credibility and overall visual appeal.
53
Always Important
Branding | Mark Studies 54
MAKE A MARK The symbol / mark for the brand started to come together when I began arranging some of the icons and ended up making them into a ‘w.’ The ‘w’ itself references the name of the application, but the build of artistic tools further speaks to the importance of process; these pieces illustrate the important individual elements and discoveries that create a whole. W
55
Doesn’t look right? Throw a circle ‘round it.
Branding | Mark Studies 56
FINISH THE DAMN MARK! After many, many, many...many tries on trying to get a solid logo and brand mark created, I ended up going with some of the earlier concepts. I really wanted to show the process that is focused on within the app itself and I think these marks get at that, all in their own unique ways. Above image: The logotype / overall logo utilizes an adjusted version of the typeface Deming to speak to the accountability and professionalism of the product itself. The addition of the icons helps further connect it to the element of process. The logo is used within branding, while the logotype is included throughout headers within the iphone application. Right top image: This is the primary brand mark, which utilizes similar elements as the logo to expand the brand. This mark is used primarily throughout the iPad and desktop applications as the header icon within the navigation bar. Right bottom image: The secondary brand mark mainly focuses on process by showing the ‘W’ of Workshop created with various icons. This mark is used sparingly, usually within branding or to great users on the website when the visit.
W 57
Branding | Final
FINAL MARKS
58
Logomark
59
Finalized, FINALLY!!
Icon
60
PART 1 61
WIRE FRAMES
Wireframes | iPhone Screens
1
62
2
63
Ever heard of a straight line? Yeah, me neither.
Wireframes | iPhone Screens
3
64
SKETCHUP The wireframe journey began simply by (roughly) sketching out some possible (very rough) layouts. These sketches allowed me to begin to see where elements could begin to be placed and what kind of geometric personality the application was going to take on. I started with the iPhone since it is going to be the most simplified version of the application. This allowed me to work from the conceptually / functionally easiest design and work towards the most complicated. The key below gives a bit more information about the sketches on the past few pages.
1
This first sketch shows a super visually-heavy design for the home screen. Each block would be a menu item with some kind of image at the bottom
65
and an icon or text on the top telling the user what the menu item is for. This would be for a user who spends quite a bit of time on mobile devices
2
The second sketch continues with the visual emphasis, but does so in a more stripped-down, refined way. Lots of white space is utilized to allow for breathing room and space to move from one menu item to another. The space allows for a much more relaxing experience which might appeal to a larger audience.
3
The third and final sketch shows the most experimental design of them all. It’s much more text-heavy and attempts to get the user’s attention through strong typographic arrangements and the curiosity sparked by the new interface.
Is that screen made from a lasagna noodle???
and is familiar with icons.
Digital Wireframes | iPhone Managing Schedule 66
1
The menu system within the iPhone began (and stayed) as a simple grid
2
Notifications are pushed down below the header and, in turn, push the rest
structure, allowing the menu items to
of the contents of the screen further
both be visual and easily recogniz-
down as well.
able upon first glance of the home screen / menu.
1. The user taps on the drop-down notification to go to the planner.
67
3
The planner section of Workshop aims to be glanceable as well, giving
4
Once the user is in the class page, they are greeted with a brief but
the user the ability to immediately
comprehensive overview of the course,
see upcoming deadlines and quickly
including instructor information and
swipe through their planner to see
the most recent project.
other deadlines. Looking at the overview of the class, Monica review the information, then
Monica then swipes left to access the
taps on the deadline and jumps to the
“recent projects� section.
class page to make a post.
Digital Wireframes | iPhone Managing Schedule 68
5
The recent projects page is made to look similar to the main menu. The
6
When adding a new project post, the user is given the option to add
stacked structure allows for quick
multiple photos, give the project a
swiping and easy recognition
title, as well as add a few callout elements, such a tags and specify
Tapping on the plus icon, Monica is able to begin uploading a final project
if the post is for a final project or if it is a process post.
post. for her typeface design. Monica taps on the plus icon at the top of the page to attach a photo, then goes into the rest of the fields and details the rest of the information.
69
7
Slider notifications are used throughout the application, allowing for a non-obtrusive, visually fluid way of notifying users of important happenings.
70
Digital Wireframes | iPhone Managing Schedule
1
This is just a terrible rendition of what a possible menu could look like.
2
After leaving the last scenario (adding a project post), the user decides to
That’s really all that needs to be said about this screen.
add a meetup to his calendar / planner. Doing so allows users of the app to meet virtually or meetup in person. This helps with gaining more valuable critique of work as well as making more of a connection with the other students in the class in addition to the instructor. Monica swipes to the right to add a meetup to her schedule.
71
Digital Wireframes | iPhone Managing Schedule 72
1
When setting up a meetup, users are able to set specifications for the meeting, such as who you are meeting with, adding a note, and date / time / location. Both parties within the scheduled meeting can get back in and edit the meeting information as needed, with app-notifications communicating the changes to everyone involved. Monica selects who she want to meet with via the visual selector, then fills in the rest of the information as needed.
73
2
Once the meeting is scheduled, it is then added to the list of current, scheduled meetings. The layout of this screen utilizes some elements form the interface of the planner, to provide continuity and to allow users to get into this section and immediately know what they are seeing. From this screen, you can add more meetings as needed. The user can now leave the section and then be reminded of the meetup once the scheduled event draws closer.
Digital Wireframes | iPad Camera Crit
iPad : Camera Crit
74
This was a first attempt at creating what the menu system would look like. The top bar would essentially be pulled down to reveal the entire menu... which I thought could basically find all the elements you would find on a home screen (profile, messenger, notifications, etc.). Not sure why I thought that was a good idea. Hence the X through the design.
75
2
The home screen was refined drastically to take on a much more gridded structure and the menu was regulated to a stationary sidebar that will stick with the user as they go from page to page. This includes the standard menu items that were found in the iPhone menu, but introduces icons for the Notebook and Messenger feature that can be pulled out to enable their ability to float (illustrated further in the desktop screens). The home screen consists of items that the user would immediately want to see upon getting into the app (profile info, portfolio items, upcoming deadlines, etc.)
Monica gets a glance at the important things going on, then taps the class icon within the menu to get to her class schedule.
76
Digital Wireframes | iPad Camera Crit
3
Pop-up notifications within the app will blur / darken the screen when they pop over it. The structure is simple linework, which will match with the overall aesthetic of the rest of the application. User taps on the check mark icon to accept the “Call for Crit” and joins the virtual classroom.
77
4
After the user accepts the call, they are greeted by a video-call interface where the instructor is automatically made the presenter (since they are most likely the one who set up this call, and they have the “administrator status”). A secondary menu appears showing controls for the call. Other students are shown with their videos towards the bottom of the screen. The presenters information is shown within the top left corner of the call.
User listens to the call and then, when made presenter, taps on the desk icon to show presenter images specific to the presentation.
Digital Wireframes | iPad Camera Crit
3
78
1
3.2.15
2
5
Once a student is made presenter, they are able to utilize their “desk space� (within the desk icon) to view images specific to the project being presented. Presenters can then tap to show the images and those viewing the images (other students or instructors) can take notes on top of the image with either the pen tool or the type tool. This information is then saved within the presenters notebook for the class.
1. Once the user is made presenter, they can tap on the desk icon to view other presentation options... 2. ...Including the ability to write on the screen. 3. The images in the top right corner can be tapped to swap out the images being presented
79
6
Pop-up notifications within the app will blur / darken the screen when they pop over it. The structure is simple linework, which will match with the overall aesthetic of the rest of the application. Monica taps on the check mark icon to accept the “Call for Crit� and joins the virtual classroom.
80
Digital Wireframes | iPad Camera Crit
81
1
Much like on the phone version of the app, the class screen gives an overview off the class and gives easy, visual ways to access other elements of the class, such as instructor information, student information, and detailed posts about the work being done in the class.
Monica takes a look at the assignments student’s have posted recently and decides to dive into one to learn a bit more.
Digital Wireframes | iPad Camera Crit 82
2
After tapping into a project, Monica is greeted with a comprehensive post detailing what the project is about, including text and image entries. The right side includes comments that relate to the image or text selected on the left side.
Monica taps on an image she finds interesting so she can leave some more in depth feedback and see what other people are saying.
83
3
Once into the image, hotspots can be tapped to see what comments have been left. Users can also leave their own feedback when they want to or when they are prompted by an instructor. Monica taps on an open hotspot to add her own commentary and tell the user how his poster is looking, as well as leave constructive feedback on how it can be improved.
Digital Wireframes | iMac Messenger and Notebook
WELCOME
MORG
WHAT YOU ARE UP TO UPCOMING MEETINGS
84 Class: Class Name With: Student’s Name When: Time Where: Location
Class: Class Name With: Student’s Name When: Time Where: Location
Class: Class Name With: Student’s Name When: Time Where: Location
Class: Class Name With: Student’s Name When: Time Where: Location
UPCOMING DEADLINES
E BACK
GAN
WHAT YOUR STUDENTS ARE UP TO UPCOMING MEETINGS
85
Class: Class Name With: Student’s Name When: Time Where: Location
Profile
Message
Class: Class Name With: Student’s Name When: Time Where: Location
Class: Class Name With: Student’s Name When: Time Where: Location
Profile
Profile
Class: Class Name With: Student’s Name When: Time Where: Location
Class: Class Name With: Student’s Name When: Time Where: Location
Profile
Profile
1
The desktop version of Workshop is the most complex and allows for the most in-depth interactions within any of the devices. The desktop version is also where many of the instructor’s elements come into play. Here, instructors can manage their classes, contact their students, and much more.
Is that screen made from a lasagna noodle???
Class: Class Name With: Student’s Name When: Time Where: Location
86
PART 1 87
FINAL SCREENS
Final Screens | iPhone, Process Post Scenario 88
1 The home screen (which also doubles as the menu screen) houses the most important navigational elements. The user can also add items to this menu as needed, when they feel like there is something else they need to access quickly while on the go and want to personalize their Workshop application experience.
89
The sweet end is in site!!
2 When a user gets a notification, the notification drops from under the app header and pushes the rest of the screen down. To dismiss the notification, the user can tap on it to take them to a page to complete the action (turn in homework, make a post, etc) or they can swipe up on the notification. The user taps the notification.
Final Screens | iPhone, Process Post Scenario 90
3 The planner within Workshop helps users keep their lives in order and helps them keep track of what is due. The planner interface is a simple list with focused textual hierarchy as well as a color-coded system put in place to allow users to quickly swipe through the planner but maintain a glanceability of what is important and what is due soon.
User taps the first due date to start the task of making a post.
91
4 Once the user navigates to the class page, they are created with an overview of the class, including immediate contact information for the instructor, a glimpse at the current assignment. and a few of the most recent class posts. Since the interface is layered, the user can swipe left and right to get to other sib-sections of the section they are currently on.
The user swipes to the left to navigate to the recent posts sub-section.
Final Screens | iPhone, Process Post Scenario 92
5 The recent posts section provides a quick, glanceable way to view what other students are creating as well as quickly post your own project.
The user taps on the plus button to add their own project to the section.
93
6 Within the New Post section, the user is invited to add photos as well as supporting information for the post, allowing them to add as much depth as they want to the post. This is especially handy with final project posts, which can evolve and turn into case studies if wanted.
Tapping on the image icon. The user navigates to the image-picker.
Final Screens | iPhone, Process Post Scenario 94
7 The image picker allows for the user to sift through images on the camera roll itself, or from external sources like DropBox or Adobe Creative Cloud.
The user taps on however many images they would like to attach to the post, then taps on the check mark to continue.
95
8 After selecting an image, the user can then fill in the rest of the information, which includes specifying if the project is a final project or process, as well as choosing which connected social networks to be shared to.
User fills out the post details and then taps on the submit button at the bottom of the page.
Final Screens | iPhone, Process Post Scenario 96
9 After submitting the post, the user can then review the post to make sure the details are correct before sharing it with the rest of the world.
The user taps the submit button at the bottom of the screen to finalize it.
97
10 After the post is finalized, a dropdown list notifies the viewer of the post going live and also gives the user a look at what the post now looks like for everyone else viewing it.
FINAL SCREENS:
Final Screens | iPhone, Meetup Scenario 100
1 Once the user is done with the last scenario (adding a new post to the class page), they tap the hamburger icon in the top left corner to navigate back to the menu.
The user then taps the Meetups section to view what Meetups are coming up as well as get the ability to add a new one.
101
2 Within the Meetups section, a list of upcoming meetings is displayed in a visual manner, sorted by month allowing the user to swiftly swipe through the events to get to the month and meeting they aim to find. Or, the can tap the plus symbol at the top of the section header at any point to add a new Meetup to the list.
The user taps the plus symbol to add a new Meetup to the section.
Final Screens | iPhone, Meetup Scenario 102
3 After taping to add the new Meetup, the user is then invited to select who they would like to meet with, as well as specify other details to round-out the Meetup.
After filling out the information, the user then taps the submit button to finalize the Meetup and send the information.
103
4 After the information is finalized, the details are then sent to the recipient so they can also add it to their calendar.
Final Screens | iPad, Feedback Scenerio 106
1
The home screen of the iPad version of the application is a bit more in-depth, utilizing the larger screen space to show more information and provide a bit more details to the user, including more information about the user themselves, to provide more motivation as well as give immediate access to the user’s portfolio.
The user reviews the newest updates and then taps on the classes icon within the left-side menu bar.
1
The classes section breaks down all of the classes a user is taking and displays them in a simple, visual manner. The class image is accompanied by the name of the class and instructor information.
The user taps on the first class, Typeface Design, to see some more specific information.
107
3
After tapping into a specific course, the user can then see broken down chunks of specificities located throughout the course. Again, this is similar
Final Screens | iPad, Feedback Scenerio
to the iPhone screen, but with more additions specific to the iPad.
108
The user reviews the things happening with the class as well as the newest project posts, then decides to tap into the ‘‘Stature” post to view a bit more about it.
109
4
Tapping a project leads the user to a list of the posts made concerning a certain project. Posts are organized within the section via categories and specifying if a post is a process post or a final post. Final posts are shown at the top, whereas process posts are sorted by date underneath,
The user taps the final, most recent post to look at the final projects as well as to see how other final projects are formatted.
Final Screens | iPad, Feedback Scenerio 110
1
Once into the final post, the screen is divided into two sections: the left side shows the images and textual elements that are input by the user who created the post, then the right side shows annotations and comments left by others viewing the works.
The user taps the comments section and swipes through feedback.
1
Constructive feedback is one of the most important features within Workshop, which assist the curatives who are part of the community to grow and continue making better work. User finds that there is some unconstructive and negative feedback left within this post, so they tap on the flag to see it to the instructor for review.
111
Final Screens | iPad, CritCall Scenerio 114
1
After flagging the comment, a popup appears informing the user that their CritCall for the final typeface design is about to begin.
Tapping on the check mark, the user is taken into the critique.
115
2
CritCalls allow for mobile critiques, helping students who aren’t in the same area to give feedback and interact with each other.
The user taps the Desktop icon on the left after they are made presenter to show critique tools and view images connected to her project.
Final Screens | iPad, CritCall Scenerio 116
3
Once a user is made presenter, they are able to show their work to the rest of the class and get feedback. While others are viewing the work, they can draw on the screen and take typed notes to show exactly what they are talking about with the image that is on the screen. As people annotate the images, their annotations are given a color code to distinguish themselves from the others.
The user taps the image they want to show and then sits back to take in crit.
117
4
After the CritCall ends, the user is notified of the terminated call and their lives are made easier with the app saving all the annotations and notes taken during crit to the corresponding notebook as well as the project post, allowing for students to take in the crit and dive back into work.
Final Screens | iMac, Floating Messenger and Notebook 120
1
The desktop version of the application is the most complex version of the app, allowing for much more in-depth interactions and more information on screen at one time (allowing more space to view larger work).
The user can drag the notebook or messenger icon from the left-side navigation bar out onto anywhere on the screen.
121
2
The floating messenger allows for in-context communication, allowing users to view certain projects or posts while also messaging someone else about that exact item.
122
Final Screens | iMac, Floating Messenger and Notebook
1 2
3 4
1
Much like the floating messenger, the floating notebook allows for viewers to have a window open while viewing it and also taking notes on the open window behind it. Users can swipe through the classes they are taking / have taken to find the notebook they are looking for.
2
Simple, glanceable imagery allows users to quickly see what posts have likes as well as annotations. The image shown matches with the first image within the post itself. Users can also search through notebook entries to find the one they want quickly and easily.
123
3
Once into an entry, the user has access to the textual entries, annotations from crit, and, if the user is an instructor, the student’s who participated in the crit.
4
Diving further into an entry on a student from Crit (made by an instructor), the instructor can then go back and see what notes they took on the student and their work, and see the annotations made on the images of their work as well.
124
This is the last printable page in your book and will print on the left side.