B A K E R Y Layout web project
Assignment: Layout web Lecturer: Phan Nhat Trung
WITH
BÙI NGUYÊN MINH THƯ Studying GRAPHIC DESIGN at FPT Universary
GD1262
INTEREST Music
Drawing
Food
Travel
Personal ďŹ le
Pro-
SKILLS Illustrators
Premiere
Phototshop
Adobe XD
Indesign
Maya
After Affect
CONTACT Facebook: www.facebook.com/na.peo.1 Phone: 0773154545 Email: bnmthuu@gmail.com Address: 13, Street 7, Hiep Binh Chanh Ward, Thu Duc District. Layout web project
Content -
06
Project Introduction
10
Proto -type
14
Layout
08
Sitemap
12
Wireframe
43
Mock -up
Layout web project
05
Project
Intro duction
Layout web project
06
Project Introduction
Project
Introduction
To complete my layout web assignment, I decide to choose bakery topic and then Nâu bakery was created. It is a Vietnamese bakery and located in HCM city. NÂU serves a unique selection of bakery goods and beverages made with the highest quality ingredients. Not only selling bakery goods but also bringing happiness. 3 wants everyone who came and ate at their bakery always feel comfort and full when they leave. They also want to serve customers immediately and effectively. Therefore, creating a website for Nâu bakery in order to help people know them and order goods easily.
Layout web project
07
Site map
web
Layout web project
08
Sitemap
NÂU BAKERY Regular
About us
Sweet
Menu Event 3
Event 1 Event 2
Bread
Events Blogs
Cookie
Sandwich
Blog 1
Beverages Coffee
Blog 3 Blog 2
Others
Muffin
Pastries
Smoothie Juice
Contact Cart Sign in Sign up
Sign in
Layout web project
09
web
type
Proto -
Layout web project
10
Prototype Home
About us
Contact us
Products
Events
Shopping cart/ Information/ ConďŹ rm order
Blogs
Sign in/ Sign up
Note
About us Products Events Blogs Contact Users account
Layout web project
11
Wire -
frame
web Layout web project
12
Wireframe Web
Landing page
Ipad
Iphone
Layout web project
13
Web Layout
UI/UX
Layout web project
14
Web layout UI/UX
TYPEFACE TITLE
CONTENT
ICIEL BRANDON TEXT BOLD
ROBOTO
0123456789
0123456789
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ Rotobo Bold Roboto Bold Italic Roboto Medium Roboto Medium Italic Roboto Light Italic
Layout web project
15
Web layout UI/UX
COLOR SYSTEM
R: 45
R: 225
G: 20
G: 185
B: 15
B: 20
#2D140F
#FFB914
We used yellow mixed orange and brown mixed black to be two main colors in this web. Yellow to bring happiness to the viewers and it was mixed a little orange makes people feel energetic to people. Brown is natural, warm and trustworthy. But when we mixed it with black, the combination is also more elegant.
Layout web project
16
Landing page
Ipad
Iphone X
Web 1366
Web layout UI/UX
Layout web project
17
Web 1366
Web layout UI/UX
Hover
Navigation
Slider
showing ďŹ rst slide, there are a yellow icon, and the others not showing is the white one
Header
Layout web project
18
Web 1366
Web layout UI.UX Hover
Navigation
Sub - menu
When clicking on the title “PRODUCTS”, the menu is shown. When clicking “Bread” and “Beverage”, many kinds of bread and drink are shown.
Layout web project
19
Web 1366
Web layout UI.UX
Click
When clicking, it changes into Sign up
When clicking, it changes into Forgot your password?
When clicking, it changes into Sign in
When clicking, they change colors into Click
When clicking on the title “SIGN IN”, the form “SIGN IN” is shown. If the user does not have an account, click create and the form “SIGN UP” is shown. When the user already signed in, the title “SIGN IN” in the navigation changes into Layout web project
20
When clicking, it changes into SEND
Subscribe form
Information
Web 1366
Web layout UI/UX
Contact
Location
Time
Social networks Footer Layout web project
21
Web 1366
Web layout UI/UX
Hover
Click
When clicking, it changes into Read more
Layout web project
22
Web 1366
Web layout UI/UX
Click:
Click:
Back
ADD TO CART
Next
Layout web project
23
Web 1366
Web layout UI/UX
Click
ADD TO CART
Click
Read more
Click 1
Layout web project
24
Blogs
Web 1366
Web layout UI/UX
Click
Click Read more
Read more
Click
Click
Layout web project
25
Web 1366
Web layout UI/UX Hover
Click
Events
Layout web project
26
Contact
Web 1366
Web layout UI Hover Contact information
Click
Contact form
Map
Layout web project
27
Web 1366
Web layout UI/UX
Click
Back to Products page Information form
information of shopping cart
Click
Information
Shopping cart Layout web project
28
Web 1366
Web layout UI/UX
Click
Click
ConďŹ rm order
Check order and information
Click
Layout web project
29
Web 1366
Web layout UI/UX
Click
Click
User’s information
Edit user’s information
User’s information
Layout web project
30
Web 1366
Web layout UI/UX
Click
Bill you paid
Ordered Layout web project
31
Web 1366
Web layout UI/UX
Click
Code orders form
Check order Your order’s status
Layout web project
32
Ipad
Web layout UI/UX Navigation
Click
Click
Sub - menu
Slider Layout web project
33
Ipad
Web layout UI/UX Product detail Click Click
Click
Click
It will larger than the others if user put a mouse on it Products - Bread
Layout web project
34
Ipad
Web layout UI/UX
Click
Read more
About us
Click
Layout web project
35
Ipad
Web layout UI/UX
Click
Click
Click Read more
Events
Layout web project
36
Ipad
Web layout UI/UX
Click
Click
Read more
Click
Click
Blogs Layout web project
37
Ipad
Web layout UI/UX
Contact information
Contact form Click
Click
Contact us Layout web project
38
Ipad
Web layout UI/UX
Click
Click
Click
Click
Information form
Shopping cart
ConďŹ rm order Layout web project
39
Ipad
Web layout UI/UX
Sign in
Sign up
Click
Click
Layout web project
40
Ipad
Web layout UI/UX
User’s account Click
Click
STAY IN TOUCH
Information Layout web project
41
Ipad
Web layout UI/UX
Click
Ordered Layout web project
42
Ipad
ConďŹ rm order
Check order
Layout web project
43
Mock up
up
Mock -
Layout web project
44
Mock up
Layout web project
45
Mock up
Layout web project
46
Mock up
Layout web project
47
Mock up
Layout web project
48
The end