END OF SEMESTER DELIVERABLES

VFS 2015

E N D O F S E M E S T E R D E L I V E R A B L E S D M - U Y 1 1 2 3 P R O F E S S O R L A R O C C A

yHAN zHAO:

iNTRODUCING

safechoix 2.0

And all of the development

behind-the-scene content

you could ever ask for

CONTENTS

02 LOgo 2ND draft

01 Logo 1st drAFT

04 Physical Applica-

tion–1st draft

07Interface–Wireframes

08 Interface–Visual Design

1st draft

03 LOgo final

05 PHysical application

2nd draft

10MIDTER SELF-ASSESSMEN

11 FINAL SELF-ASSESSMENT

Beyond merely compiling assignments and projects that are required by the class, this porfolio is also a documentory of each stage of the rebranding of SAFE CHOIX, my vision of a safer automative industry.

YIH

ANZ.C

OM

/SAFE-C

HOIX

05 PHysical application

2nd draft

06 physical application

final

09 interface final

LOGO 1ST DRAFTHAPTIC AND DIGITAL

original

VFS 2015 | YIHAN ZHAO

new

new


LOGO 1ST DRAFTHAPTIC AND DIGITAL

vfs 2015 | YIHAN ZHAO

LOGO 2ND DRAFT

LOGO 2ND DRAFTDIGITAL



LOGO 2ND DRAFTDIGITAL

LOGO FINAL


The upper-left, lower-left, and upper right images are iterations before

the final LOGO. The lower-right image is the final LOGO.


PA 1ST DRAFTBUMPER / CLEAR STICKER


PA 2ND DRAFTCLEAR STICKER

PA 2ND DRAFTCLEAR STICKER


PA FINALCLEAR STICKER W/ WHITE INK

GETREADYFOR

SAFECHOIX2.0

INTERFACE WIREFRAME


YIHANZ.COM/SAFE-CHOIX

INTERFACE VISUAL DESIGN


Prompt to Complete Profile for First Time Users

INTERFACE VISUAL DESIGN


INTERFACE FINAL


Prompt to Complete Profile for First Time Users

INTERFACE FINAL


INTERFACE FINAL


Users can edit their profile pics by cliking on

them, and backgrounds with the camera icon

What are you learning?

I am learning to develop, improve, and evaluate visual and graphic design not only based on personal interpretation of aesthetics and intuition, but more importantly quantitative measures of design which applies to a wider appeal.

Typeface for example, is much more than “it looks good/balanced/fitting” and other vague and qualitative measures I used to describe before I started this course. It has quantitative measures like tracking, leading, alignment, and etc. The same principle goes with compositions like symmetry, scale, rotation, spacing, and etc.; colors with their hues, values, and palettes.

Taking Apple’s iOS Human Interface Guidelines and Google’s Material Design Guidelines for instances, it is only when a design is quantified that it has the prerequisite to become a design language and be used throughout a brand, a platform, or a series of products.

This logo project in particular is to utilize all of the concepts mentioned above and place them into reality check. By exploring through comparing and contrasting logo and brand, mark and logotype, and studies of attributes and guidelines, the conceptual requirement of the logo design process, or to say a branding process in general is fulfilled. The learning and practicing of various technique in Adobe Illustrator helped to expedite the requirement in execution of the ideas.

MIDTERMSelf

Assessment

ow are you learning?

First and foremost, my learning is heavily based on the exploitation and utilization of mainly Adobe Il-lustrator, and Adobe Photoshop. It is an inevitable and slow pro-

cess in any realization of design and ideas, and I’m learning and practicing both during and after class.

The group critique sessions to me are extremely helpful not only because of others’ comments and suggestions toward my works, but also seeing and comprehending their approaches and prog-ress so that I can compare my work in regards and relativity. Encountering a collection of ideas and their execution truly transforms my narrowed in-terpretation of the brand logo project, for which I am able to broaden my design comfort zones and at the same time refine my existing works.

What qualitative description would you give your process and why? (i.e. excellent, very good, good, etc. Consult the grading overview descriptions pre-sented earlier in this syllabus.)

I would rate my process as very good. As men-tioned above, the collective setting of each critique session is a rapid consumption of ideas, concepts, designs, and the progressively finished products of them all, with suggestions given by people with different tastes and aesthetics. This setting means that I’m not only producing work that is satisfac-tory in my own opinion, but also pleasant for a much wider demographic, which is very import-ant in any branding development and logo design. For me, the process of coming up with multiple iterations, understanding the purpose and mean-ing of the logo and its representation, and then optimizing and modifying considering not merely on a graphical context, but also in a meaningful manner has gained me much insight in modern day design in a commercial environment. Beyond the fruition of the final logo, this gain throughout its process in its entirety, is undeniably essential in my study of Integrated Digital Media.

What qualitative description would you give the ex-ecution of your logo project and why?

I would give the execution of my logo project the qualitative description of very good. With a sim-ilar goal but on a much smaller scale that the IE team faced during the logo redesign for Internet Explorer 9, I had to develop a logo that connects the past to the future while retaining the sense of familiarity that is so important to the brand.

The brand I am redesigning the logo for is Safe Choix, an app that combines vehicle safety ratings across various NCAP organization and facilities and present them at one sight. However, with the redesign of the logo, I’m aiming to transform it to an open platform for car safety, integrating exist-ing safety data with open APIs to create not just one product, but a viable system around car safe-ty, hopefully reducing the 32,719 deaths caused by car crashes in 2013 in United States, and an es-timated amount of 1.2 million people being killed in road crashes each year around the globe.

The three key concepts that the logo has to deliver are safety, integration, and openness. Also, read-ability from distance and customizability for po-tential adoption of an app icon are important too.

The cyan to turquoise gradient color theme was kept to symbolize inheritance from the 1.0 version of Safe Choix and to preserve brand recognition. Added white highlight brings contrast that revi-talizes the lettering. The gradient also reminds people a sense of tranquility, stability, and safety, fulfilling the first key concept.

A simple but perfect sphere means that it can be easily applied to an app icon template, while rep-resenting the ultimate integration with the outline of yin-yang and the absence of abrupt ending of lines and edges.

The highlighted outline of an open circle inside the sphere signifies the openness of Safe Choix. It is no longer a closed circle that is only accessible from the inside, but rather an open platform that is accessible for all. The sharp edges of the white outline not only relate to the text design right next to it, but also manifests a closed cycle cut open, eagerly welcoming the future of automotive safe-ty.

H

FOR DM-UY 1123 VISUAL FOUNDATION STUDIOFALL 2015 • FRANK LAROCCA • TUESDAYS & THURSDAYS • 4:30-6:20PM • 2MTC MAGNET 817

ow has your visual eye changed, since beginning this course? Evaluate your increased awareness and understanding of visual foundation principles, and your specific use of components (color, typography, image), composition, and concept.

To put a vague but precise word to describe the change of visual eye, or my overall understanding and actualizing graphic design, is to say that it has matured. The progressive maturation is through the systematic study of visual design basics and practicing. Before the class I could merely assess a font or a type-related design from an aesthetic view with my personal preference, but now I can analyze such design from the scale, the weight, the type family, and etc., not only from the imagery itself,

SELF

ASSESSMENT

H

final

but more of the impact it is making through the form of design, the mes-sage that is taken form in the design, and more importantly the message that the design is speaking of.

I used to like to place all of my favorites fonts and colors into my design, and of-ten times resulted in a chaotic combina-tion of striking elements that is just sim-ply too busy to look at. There is no order in the design, and every object is a prior-ity. Now my approach (some may say) is more tuned down, but by no means such approach takes the impressiveness out

of the design. Instead, such approach brings hierarchy and order. For titles and information that are short but import-ant, oftentimes they can be expressed in more vivid colors and louder fonts, but for longer information that requires reading and is less important, it should be presented in a more serene and humble manner. Overall it is to analyze the approach based the content, rather than thinking only from the design point of view.

Now my approach (some may say) is more tuned down, but it by no means takes the impressiveness out of the design. Instead, such approach brings hier-archy and order.

Describe what specific,

visual foundation elements

have begun to inform

your other work. Also,

specifically, evaluate

the growth of your

Illustrator, Photoshop, and

InDesign skills and other

skill sets as it relates to

this course.

Unlike many of my classmates, this class is the only design-related course I am taking for this semester. My other courses are Calculus, Computer Science, and Expository Writing thus the visual foundation elements are yet to have an

impact on my academic life. However, in my own projects and works, the visual foundation elements have helped me to accomplish more established-looking designs: simply put they are now more professional looking than to say amateur. The reason for the transformation is that now I design with more principles in mind, and know where to start, rather than going wherever my mind takes me or what I feel like. Another factor contributing to the maturation of my designs is the adoption of more professional softwares. Now with Illustrator and Photoshop, I can tackle more complicated design that I wasn’t experienced enough to deal with, such as managing and altering curves, making custom changes to fonts, and more sophisticated coloring and toning. On a side note, with much more frequent use of Illustrator and Photoshop, my efficiency of working with such softwares has dramatically improved with implementation of hotkeys.

If your growth is not where you would like it to be, what specific steps will you take to improve your skills? What resources have you found to be specifically helpful to you for this course? And why?

I think since InDesign was introduced so late during this semester, I am still yet to get a hang of it, and my use of InDesign is very slow and unwieldy. I will spend more time with InDesign as I am going to handle more publication-related materials and works at the next stage of the Safe Choix project.

If I have not known Sketch I would say it is the resource that helped me that most, but since I have used Sketch before this class, I have to give its place to InVision. For the previous version of Safe Choix, I gave the prototype to a freelancing programmer before I even closely examined the logic of interaction, and experienced a strug-gling period of modification and debugging, let alone the extra fee resulted from such mistake. However now with InVision, I can basi-cally build a fully interactive app without the hassle of coding, and fully explore the interaction before the app even takes form. Its native support for .sketch files have also saved me hours. I can definitely see prospectively that the progress I will make utilizing InVision in the next development of prototyping and presentation of any of my future ideas that I want to realize.

Did you accomplish your goals that you established at the outset of this course?

My goal at the outset of this course is to establish more matured designs. I think the nature of this particular goal is progressive, and relating to my works prior to this course, I can see significantly the improvement and maturity in my current projects

What other things have you learned in this course?

I used to only produce one version or one iteration of a design, and then go from strictly there. With various exercises and assign-ments during this semester, now I understand not only the benefit of designing many iterations for which I can explore more possibil-ities and options that are possibly better than the original, but also the necessity of such method as it sparks more creativity and helps to clarify the objective of the design.


hich classmate(s) inspired you the most and why? Speak to particular project(s) they did?

Ryan Chin has inspired me the most. I have always found my works lack of artistic characteristics, and are basically screaming “for commercial use.” Although I do want my work

to look professional, I would never want my designs to look frigid or cold. Beside looking very established, there is a strong sense of vitality in Chin’s designs, both in the Final LOGO and Physical Application assignments. The use of colors and the customization of shapes really have their own grooves, energetic but also perfect for what they are representing: concert sessions.

What assignment(s) did you like the most and why?

I liked the Interface assignment the most. Interaction design has always been my per-sonal interest, and being able to showcase my work and getting critics from peers and the professional are not only beneficial for my study within New York University, but more importantly valuable for my future career in such field.

The Interface assignment in my opinion is the most integrated among all assignments, as it combines many of the subject I have learned along my study of this course, including but not limited to layout, balance, scaling, type and its composition, use of colors, and iconography. I also think this assignment is the most practical since it puts all the skills in a close-to-life package.

W

Although I do want my work to look professional, I would never want my designs to

look frigid or cold. Beside looking very established, there is a strong sense of vitality in

Chin’s designs, both in the Final LOGO and the Physical Application assignments.

Copyright © Ryan Chin

hat assignment(s) did you like the least and why?

I didn’t quite like the LOGO 1st

Draft. I completely agree with having many iterations at the early stage of the design pro-cess, however drafting 10 iterations for one specific a logo just seems unrealistic and in-efficient.

What change(s) would you make to this class and why?

I don’t see any shortcoming in this course it-self, but the department HAS TO UPGRADE

THE WORDPRESS SERVER. I was constantly experiencing error, and have lost multiple posts when the page turned white when I was submitting. The image viewer is cumber-some as well.

Feedback re: required books

Graphic Design: The New Basics

As I previously mentioned, “now I design with more principles in mind.” The principles that have been developed gradually are because of the readings I have done in this book. Yes I was in touch and enthusiastic of many great designs prior to this course, but I had no knowledge of the basics of graphic design.

W


This book did its job, which is teaching me the fundamentals of graphic design, and it has worked. The images in the book are very delicate and exemplary, and the writings are easy to understand. However, with sections that are divided clearly and precisely such as “scale,” “tex-ture,” “scale,” and “hierarchy,” it seems there is no bridge connecting them. Of course I learned the content within each section, but I wasn’t told how they can work together cooperatively.

Type On Screen

I was genuinely impressed by how updated this book is, especially of its case studies. Unlike Graphic Design: The New Basics which contains mostly theoretical knowledge, the Type On Screen is very practical and hands-on, teaching not only the designs and the guidlines, but also the methods and skills to actualize them, and how to utilize these guidelines in real-world scenarios. However, many sections of the book felt like they are unfinished, and I was wanting more of the explanation regarding the concept and suggestions they are giving.

VFS 2015 BY zyhP R O F E S S O R L A R O C C A D M - U Y 1 1 2 3

www.yihanz.com

Designed by Yihan Zhao

Documents

END OF SEMESTER DELIVERABLES