JAMES PHILIP DESIGN 1
2
“ It’s not just what it looks like and feels like. Design is how it works.” Jobs, 2003
JAMES PHILIP DESIGN 3
4
James Schenck Digital Media Designer James Schenck is an accomplished graphic designer, web developer, and videographer. He began his work with Schenck and Schenck photography as a photographer and graphic designer, then expanding his knowledge of the design world by working in many projects with foundations such as The Sam and Alfreda Maloof Foundation, Rotary International, Harvey Mudd College, and many more.
Skills: Graphic Photoshop Lightroom Illustrator Indesign Web HTML CSS JS Videography
After Effects
Premiere
Final Cut Pro
JAMES PHILIP DESIGN 5
7
27
37
47
57
67
77
85
6
Contents The Code Heroes 7 Shrek and Donkey 27 Super Shake 37 The “M” Desk 47 Node 57 Camino Corner 67 Needle Exchange 77 Dubliners 85
JAMES PHILIP DESIGN 7
8
The Code Heroes Web Design, E-Learning
Abstract: The Code Heroes is a free, Online educational platform for adolescent youth that teaches coding languages. This platform will give users the ability to learn new coding languages, be assessed on their knowledge, and practice their skills.
Tools: Illustrator, Photoshop, HTML
JAMES PHILIP DESIGN 9
IDEATION
Problem and Purpose Learning code has a divided market base that makes it difficult to find a reliable, understandable solution for the user. The youth market is well saturated with programs and products that teach coding languages and concepts, and there are some existing Online solutions that teach coding to adults. This design solution involves creating a free, Online educational platform for adolescent youth that teaches coding languages. This platform will give users the ability to learn new coding languages, be assessed on their knowledge, and practice their skills.
10
JAMES PHILIP DESIGN 11
IDEATION
Primary Research
A Google Form was used to survey over 50 people about coding education. Many people identified that finding time to practice along with syntax are the most difficult aspects of coding. Online Tutorials overshadowed books and college/ after school classes by a large margin. Surprisingly, more than half of the participants wanted to learn coding “just for fun“. It is important to design the experience to be as approachable as possible.
12
Expert Interviews What are some of the biggest challenges students face when learning a new computer language?
“The biggest challenge is finding the belief that they can indeed learn it. So many people write themselves off as not being able to learn to code. It’s just a matter of persistence.”
What is the most significant factor that contibutes to student engagement with the material?
Quincy Larson Founder, Freecodecamp
“The fact that the material will be immediately applied by building projects. You can see a very clear reason learning material, and what you can do with it. This produces intrinsic motivation to engage.”
How do you modify your lesson’s content if students underperform on a section?
“Reteach. You have to go over and teach the content again. It is important that the learning experience is completely dynamic, not static; that doesn’t promote good learning“
What are some of the largest challenges you face when creating lesson plans for your students?
Alexander Schenck English Teacher,
“Ensuring that the content is accessible at multiple ability levels. The key is understanding how to teach your content to be as approachable as possible.”
Salinas High School
JAMES PHILIP DESIGN 13
IDEATION
Teaching Methodology The primary research identified that a modular Online experience was necessary to teach coding. Experts stressed that constant assessment and reassessment was key to ensuring that users understood the concepts. This teaching methodology covers how every lesson will be laid out, and what users will gain from each task.
14
JAMES PHILIP DESIGN 15
IDEATION
Learning Paths Modular assessment differentiates new Online learning trends from the normal, static environments many people are used to. When a user answers a question incorrectly, they are given an extra set of questions that strategically quiz them on the area they have difficulty with, ensuring that they understand the basic concepts before moving on to new content.
16
JAMES PHILIP DESIGN 17
IDEATION
Moodboard The initial inspiration for The Code Heroes concept came from a lengthy amount of collaborative brainstorming. I wanted to make the users feel empowered to learn, and what better way to communicate that than by using Superheroes?
18
THE CODE HEROES James Schenck, 505, S16
JAMES PHILIP DESIGN 19
PROCESS
Mockups The initial inspiration for The Code Heroes concept came from a lengthy amount of collaborative brainstorming. I wanted to make the users feel empowered to learn, and what better way to communicate that than by using Superheroes?
20
JAMES PHILIP DESIGN 21
PROCESS
Mockups - Lesson
22
JAMES PHILIP DESIGN 23
PROCESS
Mockups - Key Pages
24
JAMES PHILIP DESIGN 25
FINAL
Final The Code Heroes was an immensely rewarding project to work on. The design research helped me reach key design decisions, which allowed me to find creative solutions to the design problems.
26
JAMES PHILIP DESIGN 27
28
Shrek and Donkey Motion Graphics
Abstract: A heated argument between Shrek and Donkey from the Dreamworks film, “Shrek”. The two characters are personified using only typographic forms and color, with kinetic type bringing life to the scene.
Tools: After Effects, Illustrator
JAMES PHILIP DESIGN 29
IDEATION
Typographic Design
D
Donkey
CLASSIC COMIC Donkey’s unique ability to talk leads him to be cast aside by his owner. He has the voice of both comic relief and reason. The typeface Classic Comic appeals to his silly, charismatic side, and is contrasted by the simple, humanist forms of Shrek’s Arial type setting.
30
S
SHREK ARIAL
Shrek leads a simple lifestyle, and above all else, wants to be left alone from judging eyes. The strength of the Arial typeface and it’s simple, unassuming characteristics embody Shrek’s natural aspects. Arial can be used in both bold, commanding situations, and to equally blend into environments.
JAMES PHILIP DESIGN 31
PROCESS
Storyboarding captured each movement and change in the typography. A majority of the length of the production can be attributed to perfecting the direction of the typography through storyboarding,
32
Often the actions of the live scene would directly impact how the typefaces would act to one another. Drafting quick typographic forms as seen to the left on top of scene sketches allowed the visual process to flow smoothly.
JAMES PHILIP DESIGN 33
PROCESS
34
JAMES PHILIP DESIGN 35
FINAL
Final Personifying typography was a creative challenge that was very rewarding. The inflections in each character’s voice was carefully considered and allowed the typography to spring into life on the screen. vimeo.com/140604587
36
JAMES PHILIP DESIGN 37
38
Super Shake Branding
Abstract: Holes in the children’s quick-breakfast market lead to the creation of Super Shake, a fun breakfast option for kids.
Tools: Illustrator, Photoshop
JAMES PHILIP DESIGN 39
IDEATION
Children’s Breakfast Market The childrens healthy breakfast market has limited options when it comes to a product that is designed to appeal to youth. Products like Danimals are an exception to this, and provide a baseline for how a line of products should be created for children. The research for this project prompted the use of fun mascots and colors to appeal children, while specific health keywords would attract parents to buy the product over another item.
Right: Moodboard for Grady, a young adventurous boy who enjoys breakfast on the go!
40
JAMES PHILIP DESIGN 41
PROCESS
Creating Characters
42
JAMES PHILIP DESIGN 43
PROCESS
Above: Mango Mountaineer Drink A refreshing choice for active, outdoor kids!
44
Above: Strabana Bonanza Drink Excite your taste buds with a party of flavors!
Above: Scary Berry Drink It’s frightening how tasty these flavors are!
JAMES PHILIP DESIGN 45
FINAL
Final Super Shake combines the use of unique mascots, fun colors, and memorable names to drive the identity of the product. A quick breakfast alternative for youth, Super Shake targets itself to appeal to the youth market.
46
JAMES PHILIP DESIGN 47
48
The “M” Desk Product Design
Abstract: This “M”odular desk design aims to reduce desktop clutter. The system uses a series of built-in channels for your cords to live, designed to be cheap to manufacture and easy to assemble.
Tools: AutoCAD, Photoshop, Illustrator
JAMES PHILIP DESIGN 49
IDEATION
THE PROBLEM: CABLE MANAGMENT Unorderly cable management is a problem for many people who have computers and other electronic devices on their desk. Cables can easily get tied in knots, making it difficult to arrange, and detract from both the functionality of a work environment and its aesthetic appeal. The plans and inspiration for the final desk came from identifying holes in the market research.
50
JAMES PHILIP DESIGN 51
IDEATION
Cable Ties
Pros: Low Cost Versatility Cons: User-Error Rats-Nest Basic cable management accessories include premium zip ties, cord holders, and storage boxes. These are relatively inexpensive compared to an investment in a new desk, however, have a high tolerance for user error which ultimately leads to an ineffective use of the product.
52
Furniture
Pros: Effective Aesthetics Functionality Cons: High Cost The two sides of the desk market had significant ranges in price. On the lower end, desks can be found between $70 and $500, yet offer nominal cable routing solutions. These desks are identified to be ineffective in solving the cable management problem. Desks that offer effective cable management solutions start at $800, with prices exceeding $8000.
JAMES PHILIP DESIGN 53
PROCESS
Sketches Front View: Cable routing solutions are offered through each of the three front legs, allowing multiple locations for all of your electronic devices to be fitted.
Side View: All of the devices are connected through a built-in power strip (shown in blue), effectively reducing all of the wire clutter going to your wall outlet to a single, surge-protected cord.
54
JAMES PHILIP DESIGN 55
FINAL
Final The M desk was a successful exploration in cable management. The final protoype was rendered using the least number of parts possible, making the design plausible enough to flat pack and ship for a lower cost than the current competition.
56
JAMES PHILIP DESIGN 57
58
Node Augmented Reality Concept
Abstract: Node is a consumer product designed to help people augment information, places, and experiences that surround them. The technology that makes Node possible is a comination of current market trends and acts as a hypothesis for what the future might hold. Tools: After Effects, Premiere, Illustrator, HTML
JAMES PHILIP DESIGN 59
IDEATION
Personalized Augmented Reality Experiences The brains of Node live inside hemispherical shells roughly the size of a tennis ball. Small computers store the AR data, which can be transmitted to nearby AR devices through bluetooth. This allows users to store their media locally and take with them on the go.
60
JAMES PHILIP DESIGN 61
IDEATION
Inspiraton Inspiration for this design fiction concept came from the new and undiscovered uses that Augmented Reality has to offer. The project became an experimental place to visualize how our lives might look in the future with augmented reality.
62
36
JAMES PHILIP DESIGN
JAMES PHILIP DESIGN 63
PROCESS
Game. Use Node as a tangible controller for Augmented Reality. The onboard chip can transform the ball into countless forms.
Work. Connect the Node Puck to your computer via USB and interact with 3-D rendering software. VIsualize your creations in ways you’ve never dreamed of before.
Personalize. Node can be personalized to fit your lifestyle. Augment your bathroom mirror to display your large collection of makeup swatches, or even just display the time so you don’t run late!
64
Entertain. Attach the Node Puck to any surface and turn it into a multimedia workstation. Augmented the wall into a largeformat TV, sound visuazation system, or even just a picture of your family!
Learn. Get smarter every day by creating augmented experiences in the classroom. Visuazlise the universe in ways that are our of this world!
JAMES PHILIP DESIGN 65
FINAL
Final The final product for the Node concept is a website acoompanied with a short teaser film. Users visitng the website (shown right) will be able to interact with the webpage. The short teaser showcases the design through the use of motion graphics and live action film.
66
www.jamesphilipdesign.com/node
vimeo.com/148760423
JAMES PHILIP DESIGN 67
68
Camino Corner Branding
Abstract: Camino Corner Restaurant has served locals for decades just south of San Francisco. The restaurant is looking for a brand redesign that will refresh their identifty and attract more customers. Tools: Illustrator, Photoshop
JAMES PHILIP DESIGN 69
IDEATION
Refreshing Identity Located along El Camino Real in San Bruno, Camino Corner offers a delicious varitey of comfort-food choices to it’s locale. A few miles away from SFO Airport, the business gets a considerablle amount of traveling visitors. A new identity has been requested to attract this customer base.
70
JAMES PHILIP DESIGN 71
PROCESS
Sketches Shapes and graphic elements became a key part in the original logo sketches. It was important to design a logo that doesn’t change the identity too much due to the large amount of regular locals who have enjoyed the restaurant for decades.
72
JAMES PHILIP DESIGN 73
PROCESS
Logo
74
Type and Color FAT FRANK HEAVY abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789!#$^&*()_+
96c6a7
f46e62
faefe1
JAMES PHILIP DESIGN 75
FINAL
Final The Camino Corner identify redesign brings a new, contemporary style to a famous local business. The restaurant gets a large amount of foot traffic due to its proximity to SFO, and the redesign offers a clean, approachable design without alienating it’s long-time customer base.
76
JAMES PHILIP DESIGN 77
78
Needle Exchange Infographic Design
Abstract: The Needle Exchange Infographic design project discusses how important NESP’s are to promoting public health. Many cities in the country are under-served and do not receive the medical services they need. Tools: R-Studio, Illustrator, Photoshop, Excel
JAMES PHILIP DESIGN 79
IDEATION
Data Research At the time of this project there was a massive outbreak of HIV in Indiana due to the lack of sterile needles. Articles and data from were used to support other data taken from the National Institute on Drug Abuse.
80
JAMES PHILIP DESIGN 81
PROCESS
Visualizing Data Due to the large format, 30�x40� of the poster, I opted to go for a detailed supergraphic of the United States. This graphic showed the amount of NESP and HIV in each state, with a legend for scale.
82
Color and Font
ddafd1
83afdd
PROXIMA NOVA abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
MUSEO SLAB abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
JAMES PHILIP DESIGN 83
FINAL
Final The Needle Exchange Infographic design project showcases a large supergraphic of the United States, including HIV and NESP data for each state. A timeline of Federal Funding and other graphs underline the importance of needle exchange programs in the United States.
84
JAMES PHILIP DESIGN 85
86
Dubliners Book Design
Abstract: Dubliners is a creative exploration that sets the type from James joyce’s short stories alongside candid photos of San Franciscan’s.
Tools: Indesign, Lightroom, Photoshop
JAMES PHILIP DESIGN 87
IDEATION
Inspired by Humanity The original concept was inspired by the renowned photojournalist Brandon of Humans of New York. All of the characters in Joyce’s short stories have different backgrounds and are very unique. This made me want to compare and contrast the characters in the stories with people I met in the streets of San Francisco.
88
JAMES PHILIP DESIGN 89
PROCESS
Images and Text Some photo oppurtunities were shot candid, while there a few that allowed me to meet and talk with new people.
90
The whole concept revolved around comparing and contrasting characters in the stories with people I met in the city. This allowed my reader to use their imagination to determine the similarities between the words and images.
JAMES PHILIP DESIGN 91
92
JAMES PHILIP DESIGN 93
FINAL
Final Dubliners allowed me photograph and meet dozens of new people in San Francisco. The experience was challenging and rewarding as I was able to translate people’s stories into the characters of James Joyce’s stories.
94
JAMES PHILIP DESIGN 95
96
Thank You.
JAMES PHILIP DESIGN 97