This is an Ipad application designed to showcase the design scene in Tokyo.
Mohammad R. Hafiyyandi Pham Hoai Nam Many thanks to our supervisor Ms. Chin Wun Yunn Joyce
logo The logo is inspired from the ginko leaf, a popular symbol in traditional and contemporary Japanese culture. It is also the official symbol of Tokyo, a design and culture city of the world. This logo will also be used as a motif for navigation and decoration purpose throughout the app.
design tokyo トキョ
colors Colors are chose to create a monotonous theme. The use of turquoise color originated from the color of Tokyo symbol but was toned down to fit the overal flat style and less distractive.
fonts Futura is used for navigation and as branding tools. The geometrical characteristics of Futura fits the overall flat style as well as resembles Katakana characters in Japanese. For text Helvetica is used simply due to legibility.
navigation Futura Medium ABCDEFGHIJKLMNOPQRSTUVXWYZ abcdefghijklmnopqrstuvxwyz 0123456789!@#$%?&*()
heading - for body text Helvetica Bold ABCDEFGHIJKLMNOPQRSTUVXWYZ abcdefghijklmnopqrstuvxwyz 0123456789!@#$%?&*() Helvetica ABCDEFGHIJKLMNOPQRSTUVXWYZ abcdefghijklmnopqrstuvxwyz 0123456789!@#$%?&*()
TOOLBAR Map
sitemap
Bypass
NAVIGA TION Home
Tools & Settings
CATALOGUE Tokyo & Design
Content
Artists | Studios List
Map
Art Spaces
NEWS FEE D Featured Upcoming
Content
Categories
START Welcome Screen
NAVIGA TION Get Started Sign Up Log In Log In via Facebook
Customize Categories
Categories
CATALOGUE Artists | Studios List Art Spaces
NEWS FEE D Feed Source
Content
Map
sitemap
CATEGORIES Graphic Design Product Design
MAP Map Categories
Description, Address, Phone, Location on Map
List
Fine Art Architecture Manga | Anime
TOOLS & SETTINGS
CONTENT TO OLS Music
Account
Share Film
News Feed Customization
Bookmark
Bookmark
Read Later
Reading List
View As Webpage
Historical
Search Bar
Flag As Inappropriate
Popular Spaces
MA P CATEGORIES Museums
Studios Theatres Societies
gestures the main gestures used in this app
Tap to select
One finger drag up and down or left and right
wireframes.
Welcome page
login
getting started
Login and signup sequences
Sign up Log in Login via Facebook
Sign up
Login
Login via facebook
Username
Username
Username
Password
Password
Password
Submit
Submit
Submit
Sign up Log in
Log in
Signup
Signup
Login via Facebook
Login via Facebook
Login via Facebook
Login
iPad
4:20 PM
news
catalogs
FEATURED
UPCOMING EVENTS
GRAPHIC DESIGN
featured
upcoming
graphic design
+
iPad
4:20 PM
GRAPHIC DESIGN FEATURED
Account
Home
Graphic Design
Product Design UPCOMING EVENTS +
GRAPHIC DESIGN
PRODUCT DESIGN
FINE ART
ARCHITECTURE
iPad
4:20 PM
TOKY O
東京
NATIONAL MUSEUM OF TOKYO
+
東京国立博物館 35塩田区
20 mi 20 km museums
heritages
art places
iPad
4:20 PM
Back
Header Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Swipe left or right will lead to the previous or next article.
final design.
Welcome page
welcome page decoration
login and guest button
The use of flat graphics with textures are inspired by Japanese famous graphic style 'Superflat'. The use of various textures are also to reflect the diversity of Japanese design.
The app allows user to login as a member to bookmark news as well as synchronize data between devices. In case users do not want to login, they can access the app as guest. A small detail is added to this function button to make them stand out.
login and signup sequences The login and signup sequences are demonstrated on the following pages.
Login Sequences
Login Sequences
Login Sequences
Login Sequences
Home - News
home page main navigation The main navigation is divided into 2 parts according to 2 different types of content: news and catalogues. Upon tapping, the sub navigation and the body will change accordingly.
sub navigation The main navigation is divided into 2 parts according to 2 different types of content: news and catalogues. Upon tapping, the sub navigation and the body will change accordingly.
+
Drag left and right to browse item between one row (categories). Drag up and down to browse between categories.
Tapping the + symbol will reveal other categories of information to add in to their home page.
Home - Catalogues
Subindex
settings Settings for account
settings By clicking on the symbol above, the app will direct you to a pop out menu where you can change the settings for accounts, browse through your bookmarks or other categories and also add and remove categories.
Account
johndoe
sign out
Username
Bookmarks
johndoe@gmail.com
update
Password
Graphic Design
password
change
Product Design
Fine Art
+
johndoe
Sign in
Settings - Bookmarks
Settings - Bookmarks - Edit mode
Settings - Categories
Settings - Categories - Edit mode
Adding Categories - Tapping on the cross
Adding Categories - Effect tapping on the region
Portrait version of the settings
map
settings By clicking on the symbol above, the app will direct you to a pop out menu where you can change the settings for accounts, browse through your bookmarks or other categories and also add and remove categories.
Map - Search
Map - Categories
content news
The design is kept simple and clear so that it does not distract users from the content.
content catalogs
content Twiiter is added to the app as the main social media tool.
The app provides users with functions: share the links, view the links (from news), view the news on website and read later.
more
bookmark By tapping on this button, more articles will be shown or works of artists | studios will be shown depending on where the users are. Users can also go to next or previous articles by swipe left or right.
extra