portfolio - yuko higuchi · motion graphic project the project shows a user how to build a lego set...
TRANSCRIPT
CSS Zen Garden Template
view projectview project
Coffee shop website design
One of the web design class assigments was to make a zen garden template. Our task was to style the page with clean and neat CSS and create an appealing page design. We could choose from one of three dif-ferent companies: a new tech device company, a coffee shop, or a clothing shop. I chose the coffee shop because I am a coffee lover.
First, I researched some coffee shops’ websites and decided to create a website for a chill coffee shop. After that, I picked the key colours. Dark brown is from coffee beans and green is from the image of a garden. For the look and feel, I decided to use bigger photos and use enough white spacing on the page to provide an image of a cosy, relaxed shop. I gathered some photos to match with my concept. I quickly sketched the layout and created the logo.
The final part was CSS styling. It was challenging and fun to modify the zen garden context using only CSS. If I could change the HTML struc-ture, it would have been much easier to style the layout. Under the restriction, I learnt pseudo-classes, such as before, after and nth-child.
HTML /CSS / Illustrator / Web Design
Lego TutorialAnimation
view projectview project
Motion Graphic project
The project shows a user how to build a Lego set using some techniques that we leant in the courses at Humber College.
First, I created all the 3D Lego blocks in Adobe Illustrator. Then, I designed the plans for how to show the steps to assemble the pieces. I divided the process into 10 steps to complete the Lego set and added buttons for each step to help users navigate, to see the next step or to go back to previous step. To build the step-by-step navigation, I chose Adobe Animate because it can make frame-by-frame anima-tion easily and can export it to an HTML5 canvas.
Illustrator / Adobe Animate
Classy: an app for college students
Classy is an app for helping college students to discover the college services that are available. It also allows students to communicate with their classmates. The role of the onboarding screen is to give the students an overview of what the app can do and the benefits to the user.
I chose the key colours from Material Design’s colour pallet which can represent Humber’s blue and yellow. I designed minimalistic illustra-tions and a fun animation to welcome students to the app.
view projectview project
Onboarding Screen
Adobe Animate / Illustorator/ Material Design / Interface Design
My HumberEvents
The My Humber Events app is designed to help Humber students to dis-cover the fun and useful events happening at Humber College. The task was to understand customer pain points and propose a better solution to them with the app.
I talked to students to ask about their pain points at school. I was espe-cially interested in the fact that many students didn’t know about the events at Humber College. They told me that if they had known when and where the events would be held in advance, they wouldn’t have missed the chance to participate.
The My Humber Events app shows all events listed by date. If you select the event, you can see the event details. You can also filter the list by category and customize events for users. Users can bookmark the event information, so that they won’t miss the events.
view projectview project
Mobile App Design
Photoshop / Illustrator / iOS Mobile Prototyping / XCode
ChillRock ClassicalClub
WorkoutParty DinnerHio Hop
NY Times Music Streaming Service
The project is to create a brand new music service website provided through the nytimes.com website. The music service mirrors the exact same feature set as Spotify, but has been re-branded to inte-grate with the nytimes.com brand style.
First, I researched both the NY Times website and the features of Spotify. Then, I created the moodboard and sketched. The NY Times website is clean and uses a grid layout, so I decided to keep the grid layout and pay attention to the typographic hierachy.
Branding is very important for the company. I designed a fresh music website keeping Spotify’s features and the NY Times branding image.
Desktop website design
Illustrator / Icon Design
Website Design
The Jethro Tull Christmas AlbumJethro Tull
"Weathercock" (Ian Anderson)
2:15 / 3:37
OVERVIEW | TOP LIST | GENRES & MOOD | NEW RELEASE | NEWS | DISCOVER
Genres & Mood
What’s the plan for today?
Browse
Time to Donce Hip Hop Central Folk & Friends Garage Jamsgeorgia,"times new roman",times,serif #333 13px,exciting and fresh,
13,000 FOLLOWS
georgia,"times new roman",times,serif #333 13px
georgia,"times new roman",times,serif #333 13px
georgia,"times new roman",times,serif #333 13px
georgia,"times new roman",times,serif #333 13px
georgia,"times new roman",times,serif #333 13px
Workout
Chill
Party DinnerHio Hop
Rock ClassicalClub
LOG INSIGN INSECTIONS
