Báo cáo Thực tập nghề nghiệp thiết kế đồ hoạ

Báo cáo Thực tập nghề nghiệp GVHD Trần Vũ Anh Thư BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC ĐÔNG Á KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO THỰC TẬP NGHỀ NGHIỆP NĂM HỌC 2021 2022 Đơn vị thực tập Công Ty TNHH Thươ.

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP NGHỀ NGHIỆP

NĂM HỌC: 2021-2022

Đơn vị thực tập: Công Ty TNHH Thương Mại và Công Nghệ BITI

Địa chỉ: 156 Mẹ Thứ, Hòa Xuân, Cẩm Lệ, Đà Nẵng

Giảng viên hướng dẫn: Trần Vũ Anh Thư

Họ tên sinh viên: Hoàng Thị Thư Thái

Lớp: GD19A1A

Đà Nẵng, 08/2022

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP NGHỀ NGHIỆP

LỜI CÁM ƠN 1

CHƯƠNG 1: TỔNG QUAN VỀ ĐƠN VỊ THỰC TẬP 2

1.1 Thông tin thực tập 2

1.2 Thông tin chung của Công ty 2

1.3 Văn hóa và môi trường làm việc 2

1.4 Các quy trình làm việc 3

CHƯƠNG 2: SẢN PHẨM DỰ ÁN 4

2.1 Tóm tắt các dự án/sản phẩm đã thực hiện trong hai tháng thực tập 4

2.2 Dự án/ sản phẩm thiết kế UI/UX 4

2.2.1 Dự án 1: Thiết kế logo nhận diện thương hiệu SwapNow 4

2.2.2 Dự án 2: Thiết kế Web Mex-DN 7

2.2.3 Dự án 3: Thiết kế nhận diện thương hiệu mẹ và bé Ruby Mart 12

2.2.4 Dự án 4: Thiết kế bản mobile Ipro Card 17

2.2.5 Dự án 5: Thiết kế trang web Đông dược (Trang chủ) 20

2.2.6 Dự án 6: Thiết kế trang web THAINow NFTs 23

2.2.7 Dự án 7: Thiết kế trang web Tổng kho hàng miền Trung 29

CHƯƠNG 3: ĐÁNH GIÁ KẾT QUẢ THỰC TẬP 36

3.1 Những kết quả đạt được/ cải thiện được và các đóng góp cho dự án/ đội nhóm của doanh nghiệp 36

3.1.1 Về kiến thức 36

3.1.2 Về kĩ năng 36

3.1.3 Về thái độ 36

3.2 Khó khăn/ hạn chế chưa khắc phục được, đề ra hướng phát triển và giải quyết trong tương lai 36

3.3 Bài học/ cảm nghĩ rút ra, đúc kết cho bản thân sau khi thực tập 36

a

CHƯƠNG 4: KẾT LUẬN VÀ KIẾN NGHỊ 38

PHỤ LỤC: NHẬT KÝ CÔNG VIỆC HÀNG TUẦN 39

1 Nhật ký công việc tuần 1, từ ngày 30/05/2022 đến ngày 05/06/2022 39

2 Nhật ký công việc tuần 2, từ ngày 06/06/2022 đến ngày 12/06/2022 40

3 Nhật ký công việc tuần 3, từ ngày13/06/2022 đến ngày 19/06/2022 41

4 Nhật ký công việc tuần 4, từ ngày 20/06/2022 đến ngày 26/06/2022 42

5 Nhật ký công việc tuần 5, từ ngày 27/06/2022 đến ngày 03/07/2022 43

6 Nhật ký công việc tuần 6, từ ngày 04/07/2022 đến ngày 10/07/2022 44

7 Nhật ký công việc tuần 7, từ ngày 11/07/2022 đến ngày 17/07/2022 45

8 Nhật ký công việc tuần 8, từ ngày 18/07/2022 đến ngày 24/07/2022 46

b

Hình 2-1: Sơ đồ Quy trình thiết kế dự án SwapNow 4

Hình 2-2: Quá trình thiết kế logo bằng công cụ AI 5

Hình 2-3: Quá trình thiết kế logo bằng công cụ Figma 5

Hình 2-4: Thiết kế logo SwapNow option 1 5

Hình 2-5: Thiết kế logo SwapNow option 2 5

Hình 2-6: Thiết kế logo SwapNow option 3 6

Hình 2-7: Phiên bản màu sắc SwapNow 6

Hình 2-8: Căn chỉnh logo SwapNow bằng lưới 6

Hình 2-9: Logo hoàn thiện app SwapNow 7

Hình 2-10: Phiên bản mockup logo SwapNow 7

Hình 2-11: Sơ đồ Quy trình thiết kế dự án Web Mex-DN 7

Hình 2-12: Nguồn hình ảnh web Mex-DN 8

Hình 2-13: Quá trình thiết kế giao diện web Mex-DN 8

Hình 2-14: Sử dụng Photoshop để thay đổi màu sắc 8

Hình 2-15: Sử dụng Illutrator vẽ icon 9

Hình 2-16: Giao diện Mex-DN option 1 9

Hình 2-17: Giao diện Mex-DN option 2 10

Hình 2-18: Giao diện Mex-DN option 3 10

Hình 2-19: Bản thiết kế bố cục nội dung chính Mex-DN 11

Hình 2-20: Bản thiết kế nội dung Mex-DN 11

Hình 2-21: Các phiên bản chỉnh sửa trang chủ Mex-DN 11

Hình 2-22: Giao diện hoàn chỉnh web Mex-DN 12

Hình 2-23: Sơ đồ Quy trình thiết kế logo RuBy Mart 12

Hình 2-24: Nguồn hình ảnh logo RuBy Mart 13

Hình 2-25: Quá trình thiết kế logo Ruby Mart 13

Hình 2-26: Logo Ruby Mart option 1 13

Hình 2-27: Logo Ruby Mart option 2 14

Hình 2-28: Logo Ruby Mart option 3 14

Hình 2-29: Logo Ruby Mart option 4 14

c

Hình 2-31: Logo Ruby Mart option 6 15

Hình 2-32: Các font chữ trong logo Ruby Mart 15

Hình 2-33: Màu sắc trong logo Ruby Mart 15

Hình 2-34: Các phiên bản chỉnh sửa logo Ruby Mart 15

Hình 2-35: Logo Ruby Mart hoàn chỉnh 16

Hình 2-36: Hình ảnh 3D shop Ruby Mart 16

Hình 2-37: Vai trò trong thiết kế web 17

Hình 2-38: Nguồn hình ảnh mobile Ipro Card 17

Hình 2-39: Quá trình thiết kế mobile Ipro Card 17

Hình 2-40: Các trang mobile Ipro Card 19

Hình 2-41: Vai trò trong thiết kế web 20

Hình 2-42: Nguồn hình ảnh trang chủ Đông dược 20

Hình 2-43: Quá trình thiết kế trang chủ Đông dược 20

Hình 2-44: Thiết kế logo SwapNow option 1 21

Hình 2-45: Thiết kế logo SwapNow option 2 21

Hình 2-46: Thiết kế logo SwapNow option 3 22

Hình 2-47: Components web Đông dược 22

Hình 2-48: Layout bố cục chính trang chủ Đông dược 22

Hình 2-49: Trang chủ hoàn thiện web Đông dược 23

Hình 2-50: Vai trò trong thiết kế web 23

Hình 2-51: Nguồn hình ảnh web THAINow NFTs 24

Hình 2-52: Quá trình thiết kế web THAINow NFTs 24

Hình 2-53: Trang home THAINow NFTs option 1 25

Hình 2-54: Trang home THAINow NFTs option 2 25

Hình 2-55: Component THAINow NFTs 26

Hình 2-56: Phối màu font chữ web THAINow NFTs 26

Hình 2-57: Styles web THAINow NFTs 26

Hình 2-58: Sản phẩm chính thức trang home THAINow NFTs 27

Hình 2-59: Sản phẩm web THAINow NFTs 28

Hình 2-60: Sản phẩm mobile THAINow NFTs 29

Hình 2-61: Vai trò trong thiết kế web 30

d

Hình 2-63: Quá trình thiết kế web Tổng kho hàng miền Trung 30

Hình 2-64: Wireframe web Tổng kho hàng miền Trung 31

Hình 2-65: Option 1 trang chủ web Tổng kho hàng 31

Hình 2-66: Component web Tổng kho hàng miền Trung 32

Hình 2-67: Style chuẩn web Tổng kho hàng miền Trung 32

Hình 2-68: Mask group web Tổng kho hàng miền Trung 33

Hình 2-69: Iconographic web Tổng kho hàng miền Trung 33

Hình 2-70: Layout trang chủ web Tổng kho hàng miền Trung 33

Hình 2-71: Sản phẩm chính thức trang web Tổng kho hàng miền Trung 35

e

Trong thời gian thực tập vừa qua là quá trình tham gia học hỏi, so sánh, nghiên

cứu và ứng dụng những kiến thức đã học của em vào thực tế công việc ở Công Ty TNHH Thương Mại và Công Nghệ BITI Báo cáo thực tập vừa là cơ hội để em trình

bày những nghiên cứu về vấn đề trong quá trình thực tập, đồng thời cũng là một tàiliệu quan trọng giúp giảng viên kiểm tra đánh giá quá trình học tập và kết quả thực tậpcủa em Thật sự không có sự thành công nào mà không gắn liền với những sự hỗ trợ,giúp đỡ dù ít hay nhiều, trực tiếp hay gián tiếp của những người xung quanh Trongsuốt thời gian từ khi bắt đầu học tập ở giảng đường đến nay, em đã nhận được rấtnhiều sự quan tâm, giúp đỡ của Thầy Cô, gia đình và bạn bè

Sau hơn 1 tháng thực tập, em xin gửi lời cảm ơn chân thành đến trường Đại họcĐông Á - khoa CNTT , các thầy cô đã hướng dẫn em, đặc biệt ThS Trần Vũ Anh Thư– giảng viên trực tiếp hướng dẫn trong quá trình thực tập và Công Ty TNHH ThươngMại và Công Nghệ BITI đã tận tình tạo cơ hội trong môi trường làm việc thực tế,chuyên nghiệp

Tin rằng những kiến thức em có được sẽ là hành trang vững chắc để em tiếp tụcvới sự nghiệp học tập còn lại của đời mình và ít nhiều đó cũng là bước đệm cho nhữngngày tháng sau khi em rời ghế nhà trường

Do thời gian thực tập có hạn, kiến thức và kinh nghiêm bản thân còn hạn hẹp,chắc chắn trong quá trình làm bài báo cáo sẽ không tránh được những sai sót Vì thế

em mong được sự thông cảm và góp ý từ các thầy cô để em có thể hoàn thiện hơn kiếnthức bản thân

Em xin chân thành cảm ơn!

f

1.1 Thông tin thực tập

 Đơn vị thực tập : Công Ty TNHH Thương Mại và Công Nghệ BITI

 Địa chỉ thực tập : 156 Mẹ Thứ, Hòa Xuân, Cẩm Lệ, Đà Nẵng

 Bộ phận thực tập : Designer

 Nhiệm vụ thực tập : Thiết kế nhận diện thương hiệu

 Thời gian thực tập : Từ ngày 01/06/2021 – 31/07/2021

1.2 Thông tin chung của Công ty

 Tên công ty : CÔNG TY TNHH THƯƠNG MẠI VÀ CÔNG NGHỆBITI

 Tên viết tắt : BITI High Tech

 Địa chỉ : 156 Mẹ Thứ, Phường Hoà Xuân, Quận Cẩm Lệ, Thành phố

Đà Nẵng, Việt Nam

 Người đại diện : Nguyễn Bảo Nguyên

 Ngành nghề chính: BITI High Tech tự hào là công ty chuyên nghiệp trong lĩnhvực truyền thông trên Internet, Digital Marketing, thiết kế website, phát triển App…

 BITI High Tech là công ty chuyên hoạt động trong lĩnh vực thiết kế website

và truyền thông marketing đã có hơn 10 năm kinh nghiệm trong ngành Với thông điệp

“Nâng Tầm Thương Hiệu” chúng tôi muốn đưa sản phẩm và dịch vụ của quý kháchhàng lên một giá trị mới và lan xa hơn

1.3 Văn hóa và môi trường làm việc

 Văn hóa Doanh nghiệp:

 Giờ giấc: Đúng giờ làm, nghỉ ngơi, giải lao, họp…;

 Tác phong: Đồng phục đầy đủ, chuyên nghiệp, gọn gàng đối với đồngnghiệp và khách hàng;

 Chào hỏi vui vẻ thân thiện, xin lỗi thể hiện sự tôn trọng và sẵn sàng hợp tác;

 Trách nhiệm: Văn phòng ngăn nắp, đúng thời hạn công việc được giao;

 Chia sẻ: Kiến thức đào tạo, chuyên môn, kinh nghiệm

 Môi trường làm việc: chuyên nghiệp, có đầy đủ cơ sở vật chất hạ tầng, máymóc và trang thiết bị phục vụ tốt nhất cho công việc Bên cạnh đó, đây cũng là nơi trànđầy năng lượng tích cực, luôn đem đến và duy trì cho nhân viên sự hứng khởi và độnglực để cống hiến hết mình cho Công ty Các anh chị ở Công ty rất thân thiện và nhiệttình chỉ bảo, giúp em tự tin hơn trong quá trình thực tập

g

Hình 1-1: Quy trình làm việc tại Công ty BITI

h

2.1 Tóm tắt các dự án/sản phẩm đã thực hiện trong hai tháng thực tập

- Dự án 1: Thiết kế logo nhận diện thương hiệu cho app SwapNow: Gồm 3 ý tưởngthiết kế, chỉnh sửa 3 lần màu sắc, 3 lần font chữ

- Dự án 2: Thiết kế trang chủ web Mex-DN: Gồm 3 ý tưởng thiết kế, khách hàng chọnlọc 1 ý tưởng và chỉnh sửa 2 lần

- Dự án 3: Thiết kế nhận diện thương hiệu mẹ và bé cho shop Ruby mart: Gồm 6 ýtưởng thiết kế, và 4 lần chỉnh sửa

- Dự án 4: Thiết kế bản mobile Ipro Card: Gồm 7 trang web

- Dự án 5: Thiết kế trang web Đông dược (Trang chủ) : Gồm 3 ý tưởng thiết kế, chỉnhsửa 3 lần

- Dự án 6: Thiết kế trang web THAINow NFTs: Gồm 6 trang web, 6 trang mobile: 3lần chỉnh sửa layout

- Dự án 7: Thiết kế trang web Tổng kho hàng miền Trung: Gồm 9 trang web

Hình 2-2: Sơ đồ Quy trình thiết kế dự án SwapNow

Tiếp nhận thông tin từ PM về thông tin sản phẩm, hình ảnh, logo… từ đó tìmhiểu và chọn lọc nội dung

2

Thông tin

thiết kế logo

- Màu sắc: xanh biển, cam;

-Ý nghĩa: kích thích sự trao đổi đồ, không có hình ảnh tiền, uytín, tác động yếu tố thành công;

-Thiết kế không sử dụng góc nhọn

3 Phần mềm -Sử dụng phần mềm Illustrator thiết kế lần 1;

i

Hình 2-3: Quá trình thiết kế logo bằng công cụ AI

Hình 2-7: Thiết kế logo SwapNow option 3

5

Quá trình

thiết kế - Xác định hình ảnh, ý nghĩa, màu sắc;

Hình 2-8: Phiên bản màu sắc SwapNow

Sản phẩm

được áp

dụng

Hình 2-10: Logo hoàn thiện app SwapNow

Hình 2-11: Phiên bản mockup logo SwapNow

Liên kết đến đường dẫn chứa sản phẩm:

-Sử dụng tông màu chính theo logo ( xanh lá);

-Không sử dụng hình tam giác

l

Nguồn hình

ảnh sử dụng

Hình 2-13: Nguồn hình ảnh web Mex-DN

4 Phần mềm -Sử dụng phần mềm Figma để thiết kế giao diện

Hình 2-14: Quá trình thiết kế giao diện web Mex-DN

- Sử dụng phần mềm photoshop để thay đổi màu sắc hình ảnhphù hợp

Hình 2-15: Sử dụng Photoshop để thay đổi màu sắc

- Sử dụng phần mềm Illutrator để vẽ icon, áp hình ảnh vàoicon

m

Hình 2-18: Giao diện Mex-DN option 2

chọn tạo nên sự mới mẻ cho trang web;

- Tìm kiếm hình ảnh, icon, sử dụng photoshop để thay đổimàu sắc phù hợp với tông màu chủ đạo;

Hình 2-20: Bản thiết kế bố cục nội dung chính Mex-DN

-Dựa trên các icon có sẵn, sử dụng công cụ Use as mask để thanh đổi màu, và tiếp tục thiết kế;

Hình 2-21: Bản thiết kế nội dung Mex-DN

Sản phẩm

được áp

dụng

Hình 2-23: Giao diện hoàn chỉnh web Mex-DN

Liên kết đến đường dẫn chứa sản phẩm:

q

-Màu chữ: trắng hoặc nhiều màu, dễ đọc

Phần mềm -Sử dụng phần mềm Figma để thiết kế Logo

Hình 2-26: Quá trình thiết kế logo Ruby Mart

5 Ý tưởng

thiết kế

5.1

Mẫu 1: Thiết kế theo hình ảnh minh hoạ từ khách

Hình 2-27: Logo Ruby Mart option 1

5.2

Mẫu 2: Thiết kế theo ý tưởng

Hình 2-28: Logo Ruby Mart option 2

5.3 Mẫu 3: Thiết kế theo ý tưởng

r

Hình 2-29: Logo Ruby Mart option 3

5.4

Mẫu 4 : Thiết kế theo ý tưởng

Hình 2-30: Logo Ruby Mart option 4

5.5

Mẫu 5: Thiết kế theo ý tưởng khách đề xuất

Hình 2-31: Logo Ruby Mart option 5

5.6

Mẫu 6: Thiết kế theo ý tưởng khách đề xuất

Hình 2-32: Logo Ruby Mart option 6

s

Quá trình

thiết kế

-Vì người tiếp cận logo, sản phẩm mà khách hàng kinh doanh

là những người nội trợ, các bà mẹ có con nhỏ nên logo đượcthiết kế bo tròn, không góc nhọn tạo cảm giác an toàn

Hình 2-33: Các font chữ trong logo Ruby Mart

-Màu sắc bắt mắt, sử dụng màu xanh dương, màu hồng tạocảm giác dễ chịu cho người nhìn

Hình 2-34: Màu sắc trong logo Ruby Mart

7

Góp ý từ

khách hàng Qua nhiều lần trao đổi và chỉnh sửa qua các phiên bản thì Khách hàng chọn sản phẩm 3

Hình 2-35: Các phiên bản chỉnh sửa logo Ruby Mart

Hình 2-37: Hình ảnh 3D shop Ruby Mart

Liên kết đến đường dẫn chứa sản phẩm:

https://bom.so/h7HTGY

u

Hình 2-39: Nguồn hình ảnh mobile Ipro Card

4 Phần mềm -Sử dụng phần mềm Figma để thiết kế giao diện điện thoại

5

Quá trình

thiết kế

Hình 2-40: Quá trình thiết kế mobile Ipro Card

6 Sản phẩm hoàn thiện Các trang thiết kế : Home, hướng dẫn sử dụng, danh mục sản

phẩm, Quy trình, giới thiệu

v

w

Hình 2-45: Thiết kế logo SwapNow option 1

Hình 2-47: Thiết kế logo SwapNow option 3

6

Quá trình

thiết kế + Tạo components

Hình 2-48: Components web Đông dược

+ Các phiên bản layout tạo điểm nhấn cho bố cục chính

Hình 2-49: Layout bố cục chính trang chủ Đông dược

7 Góp ý từ khách hàng Qua nhiều lần trao đổi và chỉnh sửa thì Khách hàng chọn sảnphẩm 3

z

Sản phẩm

được áp

dụng

Hình 2-50: Trang chủ hoàn thiện web Đông dược

Liên kết đến đường dẫn chứa sản phẩm:

Tiếp nhận yêu cầu thiết kế từ bộ phận Project Manager (PM) Trang chủ gồm

2 người thiết kế, sản phẩm được khách chọn sẽ là sản phẩm chính thức

Hình 2-51: Vai trò trong thiết kế web

- Image gallery (5 frame/ 1 trang, có thể max 10-20 frame)

- Màu sắc sử dụng : khách hàng cung cấp màu sắc là đỏ đậm(#A62B4C) và xanh trời đậm (#002E60)

aa

Hình 2-57: Phối màu font chữ web THAINow NFTs

+ Tạo text styles, color styles, effect styles

cc

Hình 2-58: Styles web THAINow NFTs

7 Góp ý từ khách hàng Qua nhiều lần trao đổi và chỉnh sửa thì Khách hàng chọn sảnphẩm 2

ee

Hình 2-60: Sản phẩm web THAINow NFTs

9 Sản phẩm phiên

bản mobile Các trang thiết kế : Trang chủ, trang sản phẩm, chi tiết sản

phẩm, Blog, chi tiết blog, tìm kiếm

ff

- Thiết kế trang web về tổng kho hàng sỉ lẻ miền Trung;

- Bố cục sản phẩm sáng tạo,dễ thao tác cho người dùng

- Màu sắc sử dụng : Màu chủ đạo web là nền màu cam, chữ màuxanh, viền màu trắng

- Bố cục trang chủ : Hình ảnh giới thiệu công ty; Hình ảnh sản phẩmnổi bật, thông tin sản phẩm nổi bật; Cung cấp dịch vụ; Hình ảnh vàthông tin của tin tức mới nhất; Logo nhưng công ty, doanh nghiệp đãhợp tác

thiết kế Wireframe cho khách xem mẫu

Hình 2-65: Wireframe web Tổng kho hàng miền Trung

hh

thiết kế + Tạo components:

Hình 2-67: Component web Tổng kho hàng miền Trung

+ Tạo text styles, color styles, effect styles

ii

Hình 2-68: Style chuẩn web Tổng kho hàng miền Trung

+ Sử dụng mask group để thay đổi phiên bản màu icon

Hình 2-69: Mask group web Tổng kho hàng miền Trung

+ Các biểu tượng sử dụng trong thiết kế web

jj

Hình 2-70: Iconographic web Tổng kho hàng miền Trung

+ Update layout sáng tạo, làm điểm nhấn cho nội dung quan trọng,thay đổi màu sắc cái đường gợn sóng, kết hợp hài hoà màu sắc

Hình 2-71: Layout trang chủ web Tổng kho hàng miền Trung

8 Góp ý từ khách hàng Qua nhiều lần trao đổi và chỉnh sửa thì Khách hàng chọn sản phẩm 2

kk