Look Book for Identity, Branding, Illustration & Animation and Web Design.
Bri Piccari, Software Productization Center, 2012
Table of Contents Who, What & Why 03 Identity & Branding Development 05 Illustration & Animation 15 Web & Layout Design 23
Who, What & Why About Software Productization Center @ Millersville University: The Software Productization Center at Millersville University (SPC) gives students the opportunity to work with real clients in a professional setting. A partnership of computer science, graphic/interactive design and business students work as a team to help a start up company launch and get off the ground running while building their porfolios. This priceless oppurtunity provides students with real world experience in their major and the chance to further form the skills learned in the classroom. From working with the client and other students to learning about my own skill set, I am so glad to have been given this oppurtunity and would do it again in a heartbeat.
03
About DeliveryCrowd: This year’s chosen client was DeliveryCrowd, a crowd-sourced delivery service. based out of Central Pennsylvania. DeliveryCrowd provides consumers with great delivery options when it comes to their favorite local restaurants. The company works with freelance drivers (called Crowdies), with the ability to set their own perimeters (wage, delivery area and hours), and local restaurants looking to offer delivery but without the staff or resources. Via a smartphone application, communication between Crowdies and restaurants are initiated and a delivery is able to happen. About the Student Teams: My graphic/interactive design partner during this internship was Adam Bitner, a senior student. Together, we worked with Bob Hennessey and Logan Peck, two senior computer science majors, and with Dan Lipson, a senior business major. 04
Identity & Branding Development
05
Designers often run into an issue of trying to communicate visual ideas with words to a client so tools such as moodboards are great to practice. A moodboard is basically a collage of inspiration for the look and feel of a company’s branding, latest advertising campaign, website, etc. The versatility allows them to be used for any number of subjects and they’re easy to change, re-do or trash. Moodboards are a great to brainstorm and gather thoughts and ideas of what the client may be looking for.
After settling on the a look and feel with the client and asking neccesary questions to determine a company profile, sketches are done to brainstorm quick ideas. Sometimes excersizes are done, such as using adjectives to think of the logo in a different light, to think about the design differently. Usually anywhere from 50-100 quick thumbnail sketches are done to get a general idea before moving to the computer to flesh out 15-25 of those sketches. 07
It’s better to have too many ideas, than not enough and in this stage, no idea is ignored.
The sketching phase can take a few days to come up with as many solutions as possible, but once the designer is content with the amount of sketches done, 15-25, or even more, are fleshed out on the computer. Graphic elements and typography are applied to the initial sketch to further explore the idea. While designing a logo, it’s important to decide whether it’ll be strictly seen in electronic form or in both an electronic and print setting. DeliveryCrowd’s logo will not only be used online and on their mobile app, but also in printed form as well. With this in mind, all -DELIVERY FOR YOUinitial computer designs were done in greyscale to maximize compatibility as a printed logo.
-DELIVERY FOR YOU-
deliverycrowd
FOR YOU
After fleshing out some of the ideas taken to the computer, and
FOR YOU
deciding on whether or not it’s succesful in greyscale, color is added based on color theory research. These logos are shown to the client, where changes are made until a logo is chosen after
FOR YOU
some additional color options are shown.
FOR YOU FOR YOU
FOR YOU
FOR YOU
1. Iconic Logo
11
2. Wordmark
3. Combination Logo
The final logo chosen, shown right, has three official variations: 1. Iconic Logo, 2. Wordmark, and 3. Combination Logo. This was decided upon after discussing the various uses for the logo and to address sizing concerns in certain enviroments. The rounded edges and circular arrow represent movement and the cycle of the three branches included in the company.
The font used for the logo & it’s marks is Futura.
The colors used are shades of yellow and orange. The colors orange and yellow were chosen for their representation of trustworthiness, food, success, movement, energy, heat, and optimism.
12
13
As time permitted, I had began work on a stationary set for the client consisting of business cards, letterheads and envelopes. After a few drafts of the letterhead, we sat down and weighed the immediate need for letterheads and envelopes and decided to instead put the focus on business cards. I chose a rounded edge for the cards to tie in with the rounded points in the logo. Although this did prove to be slightly more expensive for the special cut, the client loved the idea and pushed to include the rounded edges despite the additional cost. I worked with an online printer to get the cards done and learned about the out sourced printing process.
14
Illustration & Animation
15
DeliveryCrowd’s message benefited from being explained visually to those interested in it’s services. This gave me a chance to really challenge myself and further my illustration skills, that previous to this, were not very developed. I enjoyed the process of finding a illustration style that was both appropriate and successful for this company and audience.
Concepts for the illustrations began as sketches in a notepad. I brainstormed characters, props and situations for those involved in the DeliveryCrowd story, who would later become part of an animation. I decided on representing the three core parts of DeliveryCrowd with a specific, monochromatic color pallete to help distinguish related props and situations with the appropriate branch. Consumers are yellow, restaurants pink and crowdies blue. This system not only exists in the animation but on the website as well. 17
Not only was this a challenge for my illustration skills, I also learned a lot about the programs I use (Adobe Illustrator, After Effects and Photoshop) and the best settings for exporting images and preventing pixelation, jagged edges and incorrect resolutions.
GUEST CHECK
#00293814
18
Each branch is represented with it’s own section on the website, calling for specific animations to fit the web criteria and supplement descriptions and other explanations. The website follows a responsive design framework, meaning it scales to the size of the browser window and device on which it is being viewed (monitor, tablet, etc.). This presented the challenge of creating illustrations that could scale and be successful as well as creating alternate animations for sections that changed layout when resizing and couldn’t work around the existing animation.
19
20
The animation follows a storyboard of introducing DeliveryCrowd from the perspective of a restaurant losing revenue due to not being able to offer delivery because of lack of staff and resources. A group of potential crowdies are introduced to the viewer, and then DeliveryCrowd, as a whole, is brought into the picture to show how the branches connect and work with each other for a common goal.
22
Web Design
23
With the current state of technology, it’s essential for every company to have a website but in order to stand out, it’s important to have a well designed and highly functional website. Because the company deals with mobile technology, we felt it was important to work with a responsive design framework. Responsive design is the idea of having a website resize itself to fit within the browser it is being viewed on and adjust itself accordingly for the user. This adds a number of extra steps in the design process but adds a great deal of usability when viewing and using the site on a mobile or tablet platform.
Some of the beginning steps of brainstorming for website design is creating personas, stereotypes for the projected audiences will be. This is something that can change any number of times during the design process and should always be kept in mind. Obviously there will be users who do not fit any of the criteria assumed, but this is a guideline to help a designer keep in mind the different mindsets of users and their expectations.
25
UPDATE HEADLINE
possible colors
possible colors
Font: Arvo Bold, from google
Update subhead Font: Karla italic, from google
Lorem ipsum dolor sit amet, con-
possible patterns
sectetur adipiscing elit. Curabitur iaculis consequat mattis. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. this is an example of a text link » Font: Karla regular, from Google
Sign up for updates » Font: Karla regular, from Google
kind pleasant
fleet
hardworking
Update Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis consequat mattis. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus eu quam ligula. Nam et nibh lorem. Maecenas this is an example of a text link »
Apply
possible patterns
friendly genuine
speedy
reliable
Just as moodboards are done for any other step of the design processes, they are also used for web design. Style tiles, which are a more organized and applied mood board, are often the next step after mood boards. These often show the navigation styles, buttons, typefaces and color palette that should be expected on the website. This great tool can often be used to better explain to a client the projected idea a designer may have for the project. 26
A number of sketches, whiteboard drawings and computer mockups helped us plan our a successful design that would also work with a responsive framework. It became challenging to organize content and create a distinct layout around Twitter’s Bootstrap framework. We knew we wanted to have a clean and simple layout but also wanted to avoid it looking too plain or generic. 27
The layout changed dramatically throughout the brainstorming and planning processes, which became an incredibly beneficial learning experience. We spent a good amount of time sitting down with the client and computer science students to organize the information and seperating wants from needs. We also used this oppurtunity to learn how the computer science majors organized webpages with use cases. Use cases are basically diagrams that show all the different paths a user can take to get to certain aspects of a application or webpage.
28
As shown to the left, the layout changed dramatically throughout the brainstorming and planning processes, which became an incredible learning experience. We spent a good amount of time sitting down with the client and computer science students to organize the information and going back and forth on. We also used this oppurtunity to learn how the computer science majors organized webpages with use cases. Use cases are basically diagrams that show all the different paths a user can take to get to certain aspects of a application or webpage.
A lot of time was also spent understanding responsive design, how it worked, and how to design for it. After looking into different methods of creating the code, we finally chose to work with Twitter Bootstrap, an open source framework that laid a backbone for the code to be developed further and customized. The semester before I took the internship, I had taken a class that taught responsive design, but didn’t fully understand it until I had to not only design for it, but attempt to work with the code initially. This really helped me find my strengths and weaknesses when it comes to design and how to market myself when I begin to search for a job.
29
If there had been more time, I would have loved to really get into user experience and discover what areas could be further improved and what the user things. Sometimes when you’ve been looking at the same project for a few months, it’s easy to forget that it’s not as obvious to someone outside the project as it is to the person who’s been working on it. A few quick surveys were done with friends and classmates about quick navigation, but next semester, I’d really like to take time to dig deeper. 30
31
The coding and design process met us with many obstacles and challenges which really took the knowledge we had learned in the classroom and forced us to evolve upon it. It taught me a lot about my problem solving skills and dedication to a project. As I stated previously, this project and internship showed me where my strengths and weaknesses are and what areas I need to work on.
Seeing the project become completed and knowing that Adam and I did all the design work and parts of the back end coding too is an incredible feeling, reminding me why I love my major and career field. I hold myself to the higest expectations for my work and I’m happy to say this exceeded the ones I had, and is a project I am truly proud of.
32