LENA YUAN UI / UX D ES I GNER
VIEW M O R E AT LE NAYUAN.CO M
CONTENTS
1
CAMPAIGN
The Anatomy of Type
01
Type Classifications Poster Series
02
Thesis Idea Survey Result
03
2
WEBS/APPS
Today - Midpoint Thesis
04
Moment-O
09
Tooride
13
Business Strategy
17
3
MOTION
Animate a Logo
20
Seat+ Commercial
21
Today Proof of Concept - Midpoint Thesis
22
1
CAMPAIGN
le g x-height hairline stem spine liga ture
THE ANATOMY OF TYPE
shoulde r spu r
Class: Type Forms Instructor: David Hake Time: Fall 2014 Assignment Description: Design a page to illustrate and communicate the proper terminology for the different anatomical par ts of the letterform that are listed below. Use a mix of upper and lowercase letters. You will determine the number of letters and specific letterforms used. You just need to make sure that you show examples of all the terms listed. You are also welcome to add more terms if you wish. Choose only one typeface from the Garalde or Transitional Classification categories listed on the Approved Typeface List for the example letters. You may choose a contrasting typeface for the labeling of the terms if you wish. Set your terms near the indicated letterform par t or set in columns. If you set your terms in columns you will need to number the letterform par ts. If you use rules in your design they must be hairlines, .25 pt. max. All rules are to be only straight lines at right angles.
terminal bo wl cap height
br acket eye final
s
q hkWmu
R p
J
raG bi A He Bt z y cE D
QY
om
go
tail as ce nde r apex counter cr oss Ba baseline ea r desc ende link loop ar m seri f uppercase stress
1
Q
TYPE CLASSIFICATIONS POSTER SERIES Class: Type Forms Instructor: David Hake Time: Fall 2014 Assignment Description: Design three informational posters about type classifications. The posters should work together as a set but each one will present and promote only one type category. You can choose any three of the first six Vox type lassifications: Humanist, Garalde, Transitional, Didone, Slab serif or Lineale (san-serif ). You may use Lineale as a single category or you can do a series of three posters on the subcategories of Lineale. Your solutions must be primarily typographic. Use approved typefaces that are representative of the classification. You may utilize text from the reading materials in the course bibliography (so long as it is properly attributed). Include the following information on each poster : _ name of the category _ brief description of the category (one or two shor t paragraphs max) _ diagrams and letterforms that demonstrate the identifying features of the category _ full character set of one typeface of the category _ complete list of the main Vox classifications _ list of typefaces in the category (optional)
2
THESIS IDEA SURVEY RESULT Class: Interactive Design & Concepts Instructor: Alexander Pineda Time: Spring 2014 Assignment Description: At the beginning of the thesis project. I was asked to come out 10 thesis ideas, make questionnaire and ask over 50 people to take the survey. This is the inforgraphic to show the result.
3
TODAY - MIDPOINT THESIS Class: Interactive Design & Concepts Instructor: Alexander Pineda Time: Spring 2014 Assignment Description: Your midpoint proposal should reflect your professionalism and skills. It should be thoroughly researched and thought through, and present a convincing proof of concept and realistic timeline.
2
WEBS/APPS
4
FUNCTION 1 - WETHER It reminds users the weather about current city and visiting city from their flying schedule.
5
FUNCTION 2 - ACTIVITIES Link to Facebook, Google+, email accounts and inser t users’ schedule. All the activities and visiting city’s weather is based on the personal schedule.
6
FUNCTION 3 - SHOPPING LIST It lets users to input what and where they want to shop. It will remind the users at the specific time when they walk by the stores.
7
REMINDERS & ASSISTANT STYLING Auto remindings by weather changes, time and location. And users can create their personal assistant.
8
MOMENT-O Class: Internship Company: TIBCO Software Inc. Time: Summer 2015 Assignment Description: Business moments are speculative situations. Use these moments to communicate complex stories that illustrate the potential of digital business, and to help build your leadership networks with like-minded business par tners. Integrate business moments into your thinking about customer journeys and associated processes. Just as the Internet of Things (IoT) becomes impor tant in ways you hadn’t envisioned, use these moments to help see new connections for your business. Using location and location patterns can optimize resources in a corporate environment. This business moment depicts a smar t calendaring application that works in concert with sensors and smar tphones.
9
BUBBLE VIEWS Default - 3 days view. Pinch to see 1day or 1 week view. Long tag and drag to respond.
10
CREATE A MOMENT Create a new moment, invite people and share files. The moment creates simplify by natural language.
11
MOMENTO DETAIL AND TRACKING ATTENDEES Momento detail view and repond at the bottom. Once the moment almost star t, attendees can check who arrives and send message to the group.
12
TOORIDE Class: Principles of UX Instructor: Dan Eriksson Time: Summer 2013 Assignment Description: This course addresses the principles of usable design such as listening to users, understanding the medium and the ability to bridge the two with a well-designed user interface. Objectively evaluate the usability of products, design from user requirements, and test designs to verify successes or uncover flaws.
13
HOME SCREEN, SIDE MENU AND FILTER
Left Side Menu
Home
Right Side Filter
14
TOURIST VIEW AND BOOKINGS
Tour Detail Page - 1
Tour Detail Page - 2
Book Tours
View My Tours
15
TOUR GUIDE FLOW AND PROFILE
Edit Tour Location
Edit Tour Offer
Profile
View My Offers
16
BUSINESS STRATEGY Class: Balancing Creativity and Peofitability Instructor: Dan Eriksson Time: Fall 2014 Assignment Description: This Final Project will simulate a professional scenario where two design studios are at the final stage of a bidding contest to design a website for Samsung’s 3D television.The instructor will play the role of the client. The purpose of this project is to present a bid for the design of a website that will adver tise Samsung’s flat screen television and provide information about the product to potential consumers. Final Proposal:The Final Proposal will be a presentation in the form of a pdf. It is up to each team to determine what is necessary to include in the presentation in order to win the bid.
17
Desktop Version
Tablet Version
Phone Version
HOME PAGE 18
Desktop Version
Tablet Version
Phone Version
PRODUCT DETAIL PAGE 19
3
MOTION
ANIMATE A LOGO Class: Topics in Motion Graphics Instructor: Michael Ritchie Assignment Description: For this module you will need to animate a logo being assembled. To accomplish this you can take a vector version of a logo, most logos can be found at brandsoftheworld. com to download for free. After you drag the file into your sequence you can convert it to shapes by right clicking and choosing Create Shapes from Vector Layer. The video needs to be between 2 and 5 seconds and the dimensions need to be 720 x 480. Name the file with your first name, last name, and module number and include the .aep file, .mp4 file, and the vector of your logo in a folder with your first and last name on it.
20
SEAT+ COMMERCIAL Class: Topics in Motion Graphics Instructor: Michael Ritchie Assignment Description: For the final I would like you to create a proof of concept for either an existing app or one that you would like to mock up. Then you will take pieces of that proof of concept and create a flashier commercial out of it. Use either the HDV/ HDTV 720 29.97 or the HDTV 1080 29.97 preset, make both the proof of concept and commercial the same preset The commercial should be exactly 30 seconds long
21
TODAY PROOF OF CONCEPT MIDPOINT THESIS Class: Interactive Design & Concepts Instructor: Alexander Pineda Assignment Description: Your midpoint proposal should reflect your professionalism and skills. It should be thoroughly researched and thought through, and present a convincing proof of concept and realistic timeline.
22