Tình hình nghiên cứu trong chuyên đề “thiết kế chỉnh sửa hình ảnh và giao diện website” hướng đến việc tạo ra trải nghiệm người dùng tốt nhất thông qua sự kết hợp hài hòa giữa hình ảnh và giao diện, đồng thời đảm bảo hiệu suất và tính hiện đại.
GIỚI THIỆU ĐƠN VỊ THỰC TẬP
Giới thiệu chung về công ty
Tên công ty: Công ty TNHH Ai Cơm Việt Nam
Tên tiếng anh: AI COM VIET NAM COMPANY LIMITED
Trụ sở: 253 đường Hoàng Hoa Thám, phường 13, quận Tân Bình,
Người đại diện: Trình Quốc Lam
Email: aicomvietnam.vn@gmail.com
Hình 1.1 logo công ty Ai Cơm Việt Nam
Quá trình hình thành và phát triển
Công ty TNHH Ai Cơm Việt Nam tên thương hiệu là ICom Việt Nam, công ty được thành lập vào năm 2023 đã có 14 chi nhánh quán cơm trên thành phố Hồ Chí Minh
Sứ mệnh và tầm nhìn của công ty Ai Cơm Việt Nam
1.3.1 Sứ mệnh Đảm bảo mang đến cho khách hàng những trải nghiệm ẩm thực tuyệt vời Vì thế, chúng tôi luôn không ngừng nâng cao chất lượng dịch vụ và sản phẩm
Ai Cơm Việt Nam không chỉ giới thiệu ẩm thực Việt Nam đến với thế giới, mà còn góp phần giữ gìn và phát huy giá trị văn hóa ẩm thực truyền thống của Việt Nam
1.4 Sản phẩm của doanh nghiệp
Công ty TNHH Ai Cơm Việt Nam chuyên về ẩm thực Việt Nam gồm cơm xá xíu và cơm gà nướng
CƠ SỞ LÝ THUYẾT
Banner web
Banner website là một yếu tố cần có trong việc xây dựng trang web Để banner được sử dụng hiệu quả thì kích thước banner website chuẩn yêu cầu độ chính xác cao Điều này không chỉ mang lại giá trị về hình thức cho trang web mà còn những giá trị khác liên quan đến tối ưu hóa việc truyền tải thông tin, nội dung của doanh nghiệp thông qua mặt hình ảnh
2.1.1 Các hình thức quảng cáo banner a Traditional:
Trong số các hình thức quảng cáo banner hiện nay thì hình thức này có lẽ là thông dụng nhất Nó có hình dạng chữ nhật, gồm chữ và ảnh để truyền tải được thông điệp ngắn gọn, xúc tích Đặc biệt, nó có kết nối với một trang hay một website khác Việc nhiều người yêu thích hình thức quảng cáo này là bởi nó dễ thiết kế, thay đổi cũng như chèn vào trang web b In-line: Đây là dạng quảng cáo banner được định dạng trong một cột ở phía dưới bên trái hoặc bên phải của trang web Nó cũng có nhiều điểm tương đồng với quảng cáo banner truyền thống nhưng điểm khác biệt là nó có thể hiển thị dưới dạng một đồ họa chứa đường links Thậm chí, đôi khi chỉ là một đoạn text với những đường siêu liên kết, nổi trội nhờ những phông màu hay đường viền c Pop-up:
Hình thức quảng cáo này theo dạng một hộp thư thoại sẽ được bật lên khi có khách hàng truy cập vào trang web.
Bố cục thiết kế hình ảnh web
2.1.2 Các định dạng banner trên web
Banner Ảnh tĩnh (JPEG, PNG, SVG) : làm bằng Photoshop, Illustrator hoặc bất cứ phần mềm nào có thể xuất ảnh Loại này phổ biến nhất vì cho file dung lượng thấp, có lợi khi muốn tối ưu tốc độ tải website
Banner ảnh động GIF : nhấp nháy hoặc hiệu ứng hoạt hình tạo ra tương tác tốt hơn ảnh tĩnh, tuy nhiên nhiều frame thì dung lượng cũng lớn
2.2 Bố cục thiết kế hình ảnh web
2.2.1 Các quy tắc thiết kế layout website là gì? a Quy tắc số 1: Quy tắc 1/3 (một phần ba) Đây là quy tắc được ứng dụng rộng rãi trong layout design, là một tiêu chuẩn thiết kế giúp sản phẩm/ dịch vụ của doanh nghiệp bạn tạo được ấn tượng với người dùng ngay từ lần đầu tiên truy cập vào website
Cách thực hiện: Chia bố cục website thành 3 hàng, 3 cột; ở các điểm giao nhau của hàng và cột, designer có thể đặt các yếu tố chính và các yếu tố hỗ trợ để đảm bảo bố cục trang web khoa học, dễ nhìn nhất
Hình quy tắc số 1: quy tắc 1/3
8 b Quy tắc số 2: Cân bằng
Yếu tố cân bằng luôn được đề cao trong thiết kế layout (bố cục web) nhằm tạo sự hài hòa, cân đối cho toàn bộ trang website Để đạt được cân bằng cho web, bạn cần kết hợp đan xen các yếu tố lớn với các yếu tố nhỏ hơn, chú trọng các khoảng trắng để tạo không gian cho các chi tiết khác Tuy nhiên, không nên lạm dụng quá nhiều khoảng trắng c Quy tắc số 3: Quy tắc số lẻ
Số lẻ thường được lựa chọn nhiều hơn so với số chẵn Do vậy, để bố cục web thu hút và đạt hiệu quả nhất, designer thường thiết kế nhóm nhỏ với 3 yếu tố để không tạo cảm giác là một khối thống nhất d Quy tắc số 4: Hệ thống lưới
Sử dụng hệ thống lưới (các đường ngang, dọc giao nhau) trong thiết kế layout là quy tắc được thực hiện dễ dàng nhất nên được các designer rất ưa chuộng giúp việc trình bày, sắp xếp nội dung cũng như quản lý hình ảnh trên web dễ dàng, khoa học nhất.
Màu sắc trong thiết kế hình ảnh web
2.3.1 Ý nghĩa màu sắc của món ăn
Màu sắc trong món ăn không chỉ đẹp, tạo sự khác biệt mà thực sự còn chứa đựng những ý nghĩa khác nhau và mang lại những cảm xúc khác nhau cho người thưởng thức Thế nên, sự đa dạng của màu sắc trong ẩm thực cũng trở thành nguồn cảm hứng sáng tạo của rất nhiều blogger cũng như chuyên gia ẩm thực nổi tiếng thế giới
Các nghiên cứu cho thấy đỏ là màu sắc bắt mắt, tượng trưng cho sự hấp dẫn tựa như những lời mời quyến rũ, kích thích sự thèm ăn, gợi nhớ đến sự chín mọng và vị ngọt của quả
Thực phẩm màu cam thường gắn liền với những món ăn mùa thu truyền thống ở phương Tây như bí ngô, kẹo bắp Màu cam rực rỡ còn khiến chúng ta liên tưởng tới nước cam và cà rốt - những hình ảnh luôn tràn đầy năng lượng và sức sống
Màu vàng rực rỡ là đại diện cho cảm giác hạnh phúc - chính vì vậy màu sắc này xuất hiện rộng rãi trên các bàn tiệc ở nhiều nơi khác nhau khi nó gợi lên tinh thần lạc quan và cảm giác tích cực
Khi tính bền vững và hữu cơ trở thành tiêu chí hàng đầu trong việc lựa chọn thực phẩm của nhiều người tiêu dùng, màu xanh lá cây cũng trở nên phổ biến hơn trong các bữa ăn Không chỉ mang sắc thái thiên nhiên, màu xanh lá cây giờ đây gần như đồng nghĩa với sức khỏe và sự an toàn
Màu xanh đích thị là "nữ hoàng" của các bàn tiệc sống ảo Song thực phẩm tự nhiên có màu xanh lại khá hiếm - hầu hết chúng ta vẫn thường biết màu xanh tự nhiên được chiết xuất từ hoa đậu biếc Màu xanh còn khiến con người cảm thấy bình tĩnh và thư thái
Màu tím gắn liền với sự quý phái, trí tuệ và bí ẩn, khơi gợi sự tò mò nơi người thưởng thức Màu sắc này rất hay được sử dụng trong các bữa tráng miệng Dù bạn đã rất no sau bữa tối nhiều thịt, một miếng bánh ngọt màu tím sẽ luôn làm bạn muốn ăn thêm
Màu nâu và màu be là một số màu phổ biến nhất chúng ta ăn ngày nay Thịt, bánh mì, và một số loại đậu đều có màu nâu Màu nâu được liên kết với độ tin cậy vì nó là màu của Đất mẹ, mang cảm giác tự nhiên, lành mạnh, hữu cơ
Màu đen nhờ sự tối giản của nó, nhiều thương hiệu mỹ phẩm sử dụng màu đen làm màu chủ đạo để biểu thị rằng sản phẩm của họ là chất lượng và sự sang trọng
Màu trắng sự tối giản, minh bạch Màu trắng là một màu trung tính, dễ dàng kết hợp với các màu khác cho mục đích xây dựng thương hiệu Nó chủ yếu được sử dụng như một màu nhấn hoặc màu nền
Màu xám sự chín chắn, quyền uy Nếu bạn muốn xây dựng trang web doanh nghiệp trang trọng, màu xám là một lựa chọn màu sắc tuyệt vời
2.3.2 Phối màu theo nguyên tắc bánh xe màu sắc
Một công cụ tuyệt vời để hiểu những điều cơ bản về lý thuyết màu sắc là bánh xe màu Bánh xe màu hoặc vòng tròn màu là một tổ chức minh họa trừu tượng của các màu sắc xung quanh một vòng tròn, cho thấy mối quan hệ giữa các màu cơ bản, màu bậc hai, màu bậc ba, màu bổ sung… Bánh xe màu rất hữu ích để xác định độ hài hòa của màu sắc cho tổng thể website Nó sẽ giúp bạn tập hợp một bảng màu trông tuyệt vời Trong đó, bánh xe màu thể hiện:
Ba màu cơ bản là đỏ, vàng và xanh lam Khi kết hợp với nhau, màu cơ bản tạo thành màu thứ cấp
Các màu phụ là tím (đỏ + xanh dương), xanh lá cây (xanh lam + vàng) và cam (đỏ + vàng) Kết hợp màu thứ cấp với màu cơ bản tạo ra màu cấp ba
Các màu cấp ba là sự kết hợp của các màu chính và phụ (tức là màu đỏ-tím, vàng-cam, xanh lam-xanh lá cây, v.v.)
Màu, sắc thái và tông màu: Màu chính, màu phụ và màu cấp ba được coi là màu thuần túy Chúng bão hòa, sống động và nổi bật Màu sắc là sự bổ sung của màu trắng vào màu tinh khiết Điều này tạo ra màu sắc nhẹ hơn, cường độ thấp hơn Các sắc thái màu được tạo ra với việc bổ sung màu đen vào các màu tinh khiết Cuối cùng, thêm màu đen và trắng vào các màu tinh khiết để tạo ra các tông màu Các tông màu dịu hơn các màu thuần túy
2.3.3 Kết hợp màu sắc theo các phong cách khác nhau
Có năm cách phối màu chính: bổ sung, bổ sung tách biệt, bộ ba và màu tứ phân, tương tự và đơn sắc
- Complementary (Phối màu bổ túc trực tiếp): Các màu bổ sung nằm đối diện với nhau trên bánh xe màu Sự kết hợp màu bổ sung sẽ bao gồm một màu ấm và một màu lạnh Đỏ và xanh lá cây là một trong những cặp bổ sung phổ biến
- Split-complementary (Phối màu bổ sung xen kẽ): Phối màu bổ sung xen kẽ được tạo thành từ một màu cơ bản và hai màu liền kề với phần bổ sung của màu cơ bản
- Triadic (phối màu bộ ba): sử dụng các màu cách đều nhau trên bánh xe màu (như đỏ, xanh lam và vàng)
- Rectangular – tetradic colors (phối màu chữ nhật): Phối màu ở các góc vuông của bánh xe màu tạo thành hình chữ nhật
Typographic trong thiết kế chỉnh sửa hình ảnh web
Typography là nghệ thuật sáng tạo, sắp xếp để tạo ra kiểu chỗ mới dựa vào các yếu tố cơ bản như font chữ, kích thước, khoảng cách theo nhiều cách Việc này giúp bạn sử dụng một cách khéo léo kiểu chữ nhằm tạo ra tác động cho loạt thiết kế gồm thiết kế website, brochure, in ấn, sách… và cả đồ hoạ máy tính Ở môi trường kinh doanh đang ngày càng cạnh tranh gay gắt như hiện tại, những thương hiệu cần phải tự tạo ra bản sắc riêng biệt cho mình
Họ phải biết cách làm sao để thu hút được sự chú ý của khách hàng và truyền tải thông điệp thương hiệu với hiệu quả cao nhất Designer phải dùng Typography như một công cụ mạnh mẽ nhằm biến văn bản thành thông điệp có thể tác động trực tiếp đến người xem Việc này sẽ hỗ trợ biến nội dung của bạn mang ý nghĩa sâu sắc và thu hút hơn Ý tưởng Typography của bạn càng độc đáo thì thương hiệu của bạn càng tạo được sự kết nối giữa bạn với khách hàng hiệu quả hơn Mặt khác, designer được
15 phép tạo ra hình ảnh trực quan cho thương hiệu của mình khi sử dụng Typography Tuy nhiên, có một số điều quan trọng cần được cân nhắc trước khi quyết định sử dụng nó Đó là việc chọn phông chữ, kích thước, vị trí, nội dung văn bản, khoảng trắng và nhiều khía cạnh khác nữa của việc dùng kiểu chữ nhằm tạo sự ấn tượng cho những bản thiết kế
2.4.2 Kiểu chữ và font chữ
Kiểu chữ là một tập hợp các ký tự có cùng một đặc tính thiết kế và thường bao gồm nhiều font chữ khác nhau Trong khi đó, font chữ được định nghĩa là sự thay đổi về trọng lượng và kích thước của một kiểu chữ
Ví dụ, Arial là một trong những kiểu chữ được sử dụng nhiều nhất trong văn bản và thiết kế website Để không bị nhàm chán, designer có thể kết hợp khéo léo các font chữ trong cùng kiểu Arial như Arial Italic, Arial Narrow, Arial Bold, Arial Black,…
2.4.3 Hệ thống cấp bậc (heading)
Thông thường, một bài viết sẽ gồm có tiêu đề, tiêu đề phụ và những loại nội dung khác nằm trong văn bản Những yếu tố này sẽ được phân chia cấp bậc một cách rõ ràng, với kích thước, độ đậm nhạt và sắp xếp hiệu ứng của các ký tự văn bản khác nhau Tiêu đề chính thường được thiết kế in đậm và lớn nhất, tiếp đến là tiêu đề phụ và cuối cùng là đoạn văn bản với nội dung dài hơn cùng kích thước nhỏ
Biết cách căn chỉnh hợp lý sẽ giúp Typography trở nên thống nhất toàn bộ văn bản Cụ thể, mỗi ký tự văn bản sẽ có kích thước cũng như không gian bằng nhau Hơn nữa, nó sẽ đảm bảo khoảng cách phù hợp giữa các phần tử với nhau
2.4.5 Tương phản Độ tương phản là một yếu tố khác của Typography giúp designer trong khía cạnh làm nổi bật lên ý tưởng hay thông điệp của mình Tương phản khi được điều chỉnh và sử dụng hợp lý sẽ khiến văn bản không những trở nên có ý nghĩa hơn mà đồng thời còn giúp thu hút người đọc hiệu quả hơn.
Kích thước chuẩn trong website
Một website chuyên nghiệp và chuẩn xác là mục tiêu của mọi designer khi thiết kế web Để đạt được điều đó, trang web phải đáp ứng đầy đủ các tiêu chí mà Google đưa ra nhằm tối ưu nhất cho website của mình Một trong số những yêu cầu của Google là kích thước hình ảnh Theo đó, trước khi đăng ảnh lên website phải đảm bảo rằng hình ảnh của mình phải đủ chuẩn Chưa bàn đến việc hình ảnh phù hợp hay không, xấu hay đẹp, nhoè hay nét, kích thước hình phải chính xác là yếu tố đầu tiên (vì Google không đọc được hình ảnh, chỉ đọc kích thước, alt ảnh; còn chất lượng hình tốt là để tăng trải nghiệm người dùng)
Nếu bạn đã thay đổi các thông số kích thước ở cấu hình hệ thống, trước khi đăng ảnh bạn hãy chỉnh sửa kích thước ảnh về đúng chuẩn đấy Nếu bạn chưa thay đổi thì dưới đây là những thông số các kích thước ảnh chuẩn trên website:
• Kích thước hình ảnh Slider ở trang chủ: Kích thước ảnh Slider website: 1360 x 540 pixel
• Kích thước hình ảnh trong bài viết: Kích thước ảnh minh họa: 300 x
• Kích thước ảnh chi tiết: 800 x 500 pixel
• Kích thước hình ảnh bên trong sản phẩm: đối với hình ảnh minh họa là 300 x 400 pixel, với hình ảnh chi tiết thì lớn gấp đôi là 600 x 800 pixel
Nhìn chung thì các kích thước ảnh chuẩn trên website kể trên có thể thay đổi tùy ý thích nhưng không nên thay đổi quá nhiều so với thông số gốc vì nó sẽ bị lệch chuẩn, hình ảnh sẽ không đúng chuẩn của Google đưa ra
Khi bắt tay vào thiết kế website, phải lưu ý những tiêu chuẩn vàng này, vì điều này sẽ giúp Google đánh giá cao trang web, từ đó đem lại hiệu quả cho hoạt động SEO Trải nghiệm người dùng trên web tốt hay không phụ thuộc một phần vào kích thước ảnh này
2.6 Tầm quan trọng của thiết kế hình ảnh đem lại giá trị cho thương hiệu
Các banner hay hình ảnh mang tính chất quảng cáo tỏ ra cực kì hiệu quả trong việc tiếp cận và để lại dấu ấn mạnh mẽ trong mắt khách hàng tiềm năng Đây cũng là một trong những cách thức marketing phổ biến trong thời đại hiện nay Kèm theo đó là mức độ linh hoạt cao, khi mà có thể sử dụng banner ở nhiều các vị trí khác nhau ở trên website hoặc ngoài đời Đặt trên các trang mạng internet như trang chuyên tin tức, trang mạng xã hội, diễn đàn,… hay trên các khu vực đông người, trên đường phố,…
Trong thời đại công nghệ số thì các hình ảnh thiết kế càng được sử dụng nhiều trên các trang mạng internet và có gắn liên kết kèm theo, mục đích là phục vụ cho việc giới thiệu một sự kiện, chương trình cụ thể nào đó Người dùng nhìn thấy và họ tương tác click vào banner là sẽ được dẫn đến một địa chỉ trang web có chứa đầy đủ các nội dung, thông tin liên quan
Dù bạn dùng banner trong việc tiếp thị online hay offline thì mấu chốt của cách thức marketing này đó chính là tiếp cận và lối kéo người
18 dùng bằng những hình ảnh và nội dung thu hút Đặc biệt là những banner được thiết kế tỉ mỉ, đẹp mắt và độc đáo luôn được khách hàng chú ý nhiều, kèm theo đó là những thông điệp ngắn gọn, xúc tích, ý nghĩa
Hình ảnh là một yếu tố dường như không thể thiếu trong tất cả các trang web hiện nay Thông qua hình ảnh, doanh nghiệp không chỉ làm sinh động cho website của mình Thông qua đó còn để tiếp cận khách hàng một cách hiệu quả hơn Để thiết kế hình ảnh được tối ưu hoá hơn, kích thước banner website chuẩn nên được kết hợp với mục đích đặt banner và nội dung hình ảnh.
THIẾT KẾ CHỈNH SỬA HÌNH ẢNH VÀ GIAO DIỆN HÌNH ẢNH TRÊN WEBSITE
Chỉnh sửa hình ảnh
Món ăn cơm xá xíu và cơm gà nướng đây là món ăn chính của thương hiệu ICom Việt Nam thuộc công ty Ai Cơm Việt Nam Yêu cầu thiết kế của bên doanh nghiệp cần chỉnh sửa hình ảnh rõ nét và bắt mắt người xem, màu sắc của món ăn hấp dẫn với một mức độ chân thật Mục đích của việc chỉnh sửa hình ảnh món ăn này là để trên trang web của công ty và cũng thuận tiện hơn cho việc thay đổi món khi doanh nghiệp cần
3.1.1 Món cơm xá xíu và cơm gà nướng
Yêu cầu chỉnh sửa hình ảnh màu sắc, cắt ghép bố cục hợp lí cho từng món như cơm xá xíu (gà nướng) truyền thống, cơm xá xíu (gà nướng) trứng lòng đào, cơm xá xíu (gà nướng) thượng hạng, combo cơm xá xíu (gà nướng) thượng hạng kèm canh rong biển
Hình cơm xá xíu ICom
Hình ảnh chụp của từng nguyên liệu trong món ăn được chọn theo góc nhìn chính diện của người xem để thấy được toàn bộ món ăn trên dĩa Màu sắc của dĩa được chỉnh màu hơi tối và nguyên liệu món ăn được chỉnh màu tươi sáng và rõ nét để tạo độ tương phản nhẹ cho món ăn và làm món ăn trở nên hấp dẫn hơn nhưng vẫn giữ được nét chân thật của món
3.1.2 Canh rong biển Đây là món canh của quán Yêu cầu chỉnh sửa màu sắc, cắt ghép thêm phần thịt và thêm vài cọng ngò
Hình canh rong biển ICom
Chai nước Atiso hạt chia sản phẩm nước tự làm của bên công ty Yêu cầu làm thêm nhãn dán cho chai và chỉnh màu sắc cho chai nước
Hình nước Atiso hạt chia ICom
Đúc kết kinh nghiệm trong quá trình thực hiện thiết kế chỉnh sửa hình ảnh và bài học rút ra cho bản thân
3.2.1 Những khó khăn và thuận lợi trong công việc chỉnh sửa hình ảnh
Thuận lợi: Phía công ty đã có chuẩn bị hình ảnh tiết món ăn
Khó khăn: Việc sử dụng phần mềm adobe Photoshop chưa thuần thục nên vẫn còn chậm trong việc chỉnh sửa hình cho doanh nghiệp
3.2.2 Kinh nghiệm trong thiết kế chỉnh sửa hình ảnh
Dựa vào kiến thức đã học và học hỏi tìm tòi thêm trên mạng xã hội, tôi đã áp dụng và hoàn thành được nhiệm vụ chỉnh sửa hình ảnh Ngoài ra, tôi đã học được cách chỉnh hình ảnh ánh sáng và xử lý hình ảnh trở nên chân thật.
Thiết kế hình ảnh trên web
3.3 Thiết kế hình ảnh trên web
Yêu cầu chung về thiết kế hình ảnh trang web của doanh nghiệp Thiết kế hình ảnh cho trang web trở nên sinh động hơn, làm món ăn của doanh nghiệp trở nên phong phú và bắt mắt đối với người xem
Mục đích của slider nào là giới thiệu thương hiệu ICom việt nam Ý tưởng: sử dụng phong cách tối giản, thiết kế này không bị rối mắt cho người xem và món ăn chính được làm to ra để tạo điểm nhấn, đường line trắng ngoài ý nghĩa là hương thơm của món ăn mà còn tạo sự liên kết giữa món ăn và thương hiệu
Hình trang chủ banner slider 1
Bố cục 1/3 được sử dụng cho thiết kế này, tạo sự cân bằng giữa cho món ăn và thương hiệu
Hình trang chủ bố cục banner slider 1
Màu nền được sử dụng là màu chuyển sắc cam đỏ chuyển sang trắng để làm nổi bật được món ăn và thương hiệu
Hình trang chủ màu sắc banner slider 1
Font chữ được sử dụng là font Nexa Bold đây là font chữ của thương hiệu ICom Việt Nam
Mục đích giới thiệu món ăn cơm xá xíu thượng hạng có những thành phần nguyên liệu nào, để người truy cập dễ hình dung ra món ăn Ngoài ra, còn làm tăng giá trị nhận diện thương hiệu cho doanh nghiệp Ý tưởng: sử dụng phong cách hiện đại làm cho hình ảnh trở nên sôi động hơn, món ăn muốn giới thiệu được để to ở mức vừa phải, lấy hình ảnh củ cải đỏ và lá ngò làm nền để tạo cảm giác có chiều sâu cho món ăn
Hình trang chủ banner slider 2
Bố cục đối xứng được sử dụng cho banner slider này, tạo cảm giác thoải mái cho bố cục
Hình trang chủ bố cục banner slider 2
Màu sắc sử dụng màu cam của thương hiệu ICom chuyển sắc và dùng màu trắng (radial gradient) để làm điểm nhấn cho món ăn
Hình trang chủ màu sắc banner slider 2
Font chữ được sử dụng font Tahoma và Arial Font này được sử dụng vì sự dễ đọc của font khi chữ quá nhiều mà không bị rối mắt cho người xem, hai font này đi chung với nhau tạo ra sự độc đáo và nhịp điệu cho thiết kế
Mục đích của slider này là món thêm của doanh nghiệp, ngoài ra làm bắt mắt hơn cho trang chủ Ý tưởng thiết kế theo phong cách hiện đại phối hợp với sự tối giản Đây là ảnh thuộc dạng chuyển động, ngọn lửa phía sau được bốc cháy liên tục tạo cảm giác ấm áp của bữa cơm gia đình
Hình trang chủ banner slider 3
Bố cục chính diện được sử dụng trong slider này, nhằm tập trung vào chính diện món ăn thêm của doanh nghiệp
Hình trang chủ banner slider 3
Mục đích của thiết kế slider này là gợi ý món ăn cho người mua Đưa ra món ăn để người mua có thể dễ dàng lựa chọn Ý tưởng thiết kế theo phong cách trẻ trung hiện đại kết hợp với sự tối giản Đây là dạng ảnh GIF chỉ để một hình ảnh món ăn gợi ý cho người xem, để chữ ICom ở phía sau món ăn ngoài việc nhận dạng thương hiệu cho món còn tạo nên sự nổi bật cho món Chữ “HÔM NAY ĂN GÌ ???” được nhấp nháy để thị giác người nhìn thấy chữ này trước
Hình trang chủ poster chạy trên slider 1 1
Bố cục được sử dụng bố cục chính diện giữa hình ảnh và chữ “hôm nay ăn gì???” Bố cục này đập vào mặt người xem là chữ “hôm nay ăn gì
???” tiếp đó tới hình ảnh món ăn, tạo nên sự liên kết giữa chữ và hình
Hình trang chủ bố cục poster chạy trên slider 1
Màu sắc được sử dụng là màu vàng nghệ và màu vàng trứng cho chữ ICom Tạo cảm giác tươi mới cho một ngày mới tích cực
Hình trang chủ màu sắc poster chạy trên slider 1
Font chữ Comic Sans MS, Rowdies và Berlin Sans FB Demi Bold được sử dụng cho slider tạo ra sự trẻ trung năng động
Mục đích của slider này giới thiệu chương trình tặng canh rong biển cho mỗi combo của thương hiệu ICom Ý tưởng làm slider dạng chuyển động (GIF), chuyển động những combo món ăn và kèm theo lời kêu gọi “ĐẶT LIỀN NGAY”, chọn phong cách đơn giản sang trọng
Hình trang chủ poster chạy trên slider 2
Bố cục 1/3 được sử dụng cho slider này làm nổi bật nội dung chính
Hình trang chủ bố cục poster chạy trên slider 2
Màu sắc được sử dụng nền màu chuyển sắc cam và đen (radial gradient) và màu trắng tạo sự tương phản
Hình trang chủ màu sắc poster chạy trên slider 2
Font chữ sử dụng một font Arial, phần “canh rong biển” là phần nội dung muốn tặng nên được để màu vàng để tạo sự nổi bật cho chữ, ngoài ra tạo thêm nhịp cho chữ “ĐẶT LIỀN NGAY” được chuyển động chớp tắt chớp tắt tạo cảm giác hối thúc người xem
Mục đích slider này là để món ăn được thấy rõ nhất và chi tiết nhất trong trang chủ Ý tưởng sử dụng hình ảnh chuyển động (ảnh GIF) chuyển động những nguyên liệu món ăn xung quanh dĩa hiện lên từng nguyên liệu món tạo sự đặc sắc cho món
Hình trang chủ poster chạy trên slider 3
Bố cục chính diện, dĩa món ăn làm trung tâm của người xem, nền phía sau tạo hiệu ứng có chiều sâu cho hình
Hình trang chủ bố cục poster chạy trên slider 3
Màu sắc sử dụng màu vàng để tạo sự tương phản giữa màu dĩa món ăn
Hình trang chủ màu poster chạy trên slider 3
Mục đích slider này để đặt hàng món cơm xá xíu và cơm gà nướng có thể giao món nhanh cho các buổi ăn khi gọi qua số hotline 0974004100 Ý tưởng: món ăn cơm xá xíu và cơm gà thuộc món ăn chính cho các buổi sáng, trưa, chiều của người Việt Nam, có thể giao các món ăn cho mọi người ở khắp nơi khi đói Kêu gọi người xem đặt hàng qua số hotline
Hình trang chủ poster chạy trên slider 4
Bố cục 1/3 được sử dụng trong slider, làm nổi bật hình ảnh nhà phố và món ăn của doanh nghiệp
Hình trang chủ bố cục poster chạy trên slider 3
Màu sắc được sử dụng màu vàng nghệ làm màu nền và màu cam chuyển sắc radial gradient cho các tòa nhà, thấy rõ được chính phụ của hình ảnh
Hình trang chủ màu poster chạy trên slider 3
Font chữ Edo SZ và Segoe UI Variable dùng trong slider tạo cho font chữ trở nên độc đáo mà vẫn rõ được nội dung
37 h Chương trình khuyến mãi theo tháng
Mục đích của banner này được thiết kế để chạy chương trình khuyến mãi cho tháng 7
Yêu cầu làm nội dung khuyến mãi tặng thêm 20% giá trị combo món ăn khi mua cơm ở tại quán hoặc trên hotline từ 5 phần trở lên Được áp dụng trong tháng 7
Hình chương trình khuyến mãi theo tháng
Bố cục đối xứng được sử dụng cho banner này tạo sự cân bằng giữa chữ và hình, tạo cho người xem dễ nắm bắt được thông tin khuyến mãi
Hình bố cục chương trình khuyến mãi theo tháng
Màu sắc sử dụng màu nền vàng và họa tiết màu cam tạo cảm giác hài hòa làm nổi bật hình ảnh món ăn và nội dung chữ “20%” được để màu xanh lá đối lập với màu nền tạo điểm nhấn cho nội dung
Hình màu sắc chương trình khuyến mãi theo tháng
THIẾT KẾ SẢN PHẨM ĐỂ IN ẤN CHO CÁC CHI NHÁNH CỬA HÀNG
Thiết kế menu
Yêu cầu bên doanh nghiệp cần tạo menu có kích thước 86 x 54 cm, font chữ dễ nhìn, sử dụng màu sắc của thương hiệu Icom
Mục đích của thiết kế menu này để dán lên tường cho các chi nhánh quán ăn của doanh nghiệp Ý tưởng thiết kế sử dụng hình ảnh minh họa món ăn để giới thiệu từng món ăn trong menu một cách thực tế, giúp người xem hình dung được món ăn dễ dàng hơn Ngoài ra, sử dụng bố cục cân bằng để khách hàng nhìn menu mà không bị rối mắt
Thiết kế name card
Yêu cầu thiết kế sử dụng logo công ty Ai Cơm Việt Nam, phần thông tin name card gồm tên, chức vụ, số điện thoại liên lạc, email, trang web và thương hiệu ICom Việt Nam
Mục đích để quảng bá hình ảnh thương hiệu công ty và người đối tác có thể lưu giữ được thông tin liên lạc của doanh nghiệp Ý tưởng thiết kế name card đơn giản, dễ nhìn và rõ được thông tin của doanh nghiệp
Hình name card mặt trước
Hình name card mặt sau
Thiết kế poster tuyển dụng cho doanh nghiệp
Yêu cầu thiết kế poster tuyển dụng nhân viên cho chuỗi cơm văn phòng theo phong cách mindmap, kích thước 30 x 60 cm
Mục đích tuyển nhân viên cho các chi nhánh cửa hàng và nhân sự cho công ty Ý tưởng thiết kế theo phong cách mindmap của bên doanh nghiệp yêu cầu, sử dụng màu thương hiệu dùng cho chữ
Hình tuyển dụng chuỗi cửa hàng
Thiết kế poster khuyến mãi
Mục đích là khuyến mãi món ăn cho khách hàng khi ăn hoặc mua tại quán nhằm thu hút khách hàng ăn tại quán và biết đến quán
Yêu cầu thiết kế poster theo kích thước 90 x 60 cm, giới thiệu chương trình khuyến mãi tặng thêm 25% giá trị cho món 39K, áp dụng khi ăn tại chỗ hoặc mang đi với giá món 39K, bắt đầu áp dụng từ ngày 1/8 đến ngày 31/8 Ý tưởng thiết kế chia bố cục thành 1/3, tạo chiều sâu cho hình ảnh món ăn và làm cho 25% nổi bật Điều quan trọng là khách hàng có thể nhận diện được thương hiệu ICom
Thiết kế tờ rơi
Yêu cầu thiết kế tờ rơi thiết kế khuyến mãi này gồm menu, nội dung khuyến mãi, và 14 địa điểm chi nhánh Nội dung “Chương trình khuyến mãi áp dụng cho đối tác tại Triển lãm SECC - Tặng Canh Rong Biển Thịt Băm giá 10K cho mỗi phần (Áp dụng khi mua 05 phần trở lên) - Tặng thêm
01 phần Cơm Xá Xíu Truyền Thống khi mua 10, 20, phần cơm Liên hệ hotline: 0974004100 để đặt cơm Chân thành cảm ơn và chúc quý khách ngon miệng Chi tiết 14 Cửa hàng Cơm Xá Xíu Thượng Hạng ICom”
Đúc kết kinh nghiệm trong quá trình thực hiện thiết kế sản phẩm và bài học rút ra
và bài học rút ra cho bản thân
4.6.1 Những thuận lợi và khó khăn trong công việc thiết kế
Thuận lợi: Công ty đã tạo điều kiện để tôi học hỏi và trải nghiệm thực tế không chỉ ở mảng thiết kế hình ảnh web mà còn thiết kế thêm về sản phẩm khác như thiết kế menu, tờ rơi, name card, poster
Khó khăn: Sản phẩm thiết kế được in ra cho các chi nhánh quán cơm của công ty nên kích thước không được cố định
4.6.2 Kinh nghiệm trong thiết kế sản phẩm đã học được
Hiểu được tầm quan trọng của kích thước, thông tin, màu sắc và hình ảnh của thiết kế khi in ra Tôi thấy mình rèn luyện được tính cẩn trọng hơn về những thiết kế của mình Nội dung của thiết kế phải đúng với mục đích của doanh nghiệp để tránh trường hợp khách hàng hiểu nhầm ý nghĩa mà doanh nghiệp muốn truyền tải