HƯỜNG ANH NGUYỄN: DESIGN

Cách tốt nhất đề giải thích nó là bắt đầu với một ví dụ sẽ làm bạn khó hiểu và có thể sẽ hoạt động không như bạn mong đợi. Sau đó chúng ta sẽ xem xét kĩ hơn về cách tính giá trị đặc hiệu mà selector sẽ được ưu tiên.

Đây là một list đơn giản và không có thứ tự:

<ul id="summer-drinks">
  <li>Whiskey and Ginger Ale</li>
  <li>Wheat Beer</li>
  <li>Mint Julip</li>
</ul>

Bây giờ bạn muốn chỉ định một đồ uống thành yêu thích trong danh sách đồ uống của bạn và thay đổi nó về style một ít. Bạn cần một hook cho điều này nên bạn sẽ áp dụng nó thông qua một class name cho nó.

<ul id="summer-drinks">
   <li class="favorite">Whiskey and Ginger Ale</li>
   <li>Wheat Beer</li>
   <li>Mint Julip</li>
</ul>

Bây giờ bạn hãy mở file CSS của bạn và styling cho class mới:

.favorite {
  color: red;
  font-weight: bold;
}

Sau đó bạn nhìn xem nó làm việc thế nào, nhưng nó không làm việc! Một cái gì đó đang gây ra vấn đề ở đây.

Đi sâu hơn vào file CSS, bạn sẽ thấy điều này:

ul#summer-drinks li {
   font-weight: normal;
   font-size: 12px;
   color: black;
}

Vấn đề nằm ở ngay đó. Hai CSS selectors khác nhau đang nói cho đoạn text đó có color và font-weight gì. Nhưng chỉ có một lệnh cho font-size nên rõ ràng cái đó sẽ có hiệu lực. Không có xung đột gì ở đây cả nhưng trình duyệt cần quyết định một trong những lệnh đó để áp dụng và hiển thị chúng. Nó làm bằng cách tuân theo một bộ quy tắc tiêu chuẩn.

Tôi nghĩ rằng điều này sẽ gây chút khó khăn cho người mới bắt đầu bởi vì họ chưa hoàn toàn nhận ra điều này. Họ có lẽ nghĩ vì class .favorite nằm sâu hơn trong CSS hoặc bởi vì nó gần với chữ hơn trong HTML sẽ là kẻ chiến thắng.

Trong thực tế, thứ tự của các selectors trong CSS sẽ đóng vai trò chính và quy tắc "từ trên xuống" sẽ được áp dụng khi giá trị đặc hiệu là giống nhau. Cho ví dụ:

favorite {
   color: red;
}
.favorite {
   color: black;
}

Ở đây nó sẽ có màu black... Nhưng chúng ta đang lạc đề.

Vấn đề ở đây là chúng ta muốn nó cụ thể để nó có ý nghĩa với mọi ví dụ mà chúng ta có. Ngay cả với ví dụ đơn giản được trình bày ở trên, Cuối cùng bạn cũng sẽ thấy chỉ cần sử dụng class name nhằm tới mục tiêu "favorite drink" là không thay đổi hoặc sẽ không an toàn ngay cả khi nó hoạt động . Sẽ thông mình hơn nếu sử dụng điều này :

ul#summer-drinks li.favorite {
  color: red;
  font-weight: bold;
}

Đó là những là mà tôi đang gọi là " cụ thể để nó có ý nghĩa". Bạn thực sự có thể "cụ thể" hơn khi sử dụng kiểu dạng như thế này:

html body div#pagewrap ul#summer-drinks li.favorite {
  color: red;
  font-weight: bold;
}

Nhưng nó sẽ là code Css của bạn khó đọc và không mang lại lợi ích thực tế. Một cách khác để tăng giá trị đặc hiệu cho class ".favorite" của bạn là sử dụng important!

.favorite {
  color: red !important;
  font-weight: bold !important;
}

Tôi đã từng nghe nói rằng !important giống như một trò lừa về tinh thần trong css. Quả thực là như vậy, và bạn có thể buộc ý chí của mình vượt qua các khó khăn trong css bằng cách sử dụng nó. Nhưng !important áp đặt rằng sẽ tăng mạng tính đặc hiệu trên selector và từ đó sẽ vượt qua được các style khác.

!important có thể dễ dàng sử dụng sai nếu hiểu nhầm. Nó là cách tốt để giữ cho code của bạn sạch hơn, trong các ví dụ mà bạn biết các elements với các class selector cụ thể nên sử dụng style nhất quán bất kể nó là gì. Ngược lại, không nên sử dụng trick để ghi đè lên style của một element nào đó thay vì tìm ra cách CSS được viết và hoạt đông theo tác giả ban đầu.

Một ví dụ kinh điển là:

last {
   margin-right: 0 !important;
}

Tôi thường sử dụng nó trong các tình huống có nhiều khối nối, cho khối cuối cùng bên phải trong một row. Điều đó đảm bảo chắc chắn khối cuối cùng không có bất kì right margin nào điều này sẽ giúp nó nằm sát nề phải so với cha mẹ nó. Mỗi khối có thể có các Css selector cụ thể để thêm right margin cho chúng, nhưng !important sẽ phá vỡ điều đó và làm cho class nhìn đơn giản và clear hơn.

Tính giá trị độ đặc hiệu CSS

Tại sao cố gắng đầu tiên của chúng ta để thay đổi color và font-weight thất bại? Như chúng ta đã học, đó là bởi vì chúng ta đơn giản chỉ dụng class name có giá trị đặc hiệu thấp hơn selector khác. Css áp dụng các trọng số đặc hiệu khác cho id và class. Trong thực tế một Id có giá trị cao hơn nhiều! Vì vậy không thể một class có thể vượt qua được id.

Chúng ta hãy xem cách các con số thực sự được tính toán:

Nói cách khác:

- Nếu phần tử có inline styling, tự động đó sẽ thắng (1,0,0,0 điểm)
- Mỗi ID áp dụng (0,1,0,0 điểm)
- Mỗi class (hoặc pseudo-class hoặc attribute selector) áp dụng (0,0,1,0 điểm)
- Với mỗi tham chiếu trực tiếp element có (0,0,0,1 điểm)

Nói chung, bạn có thể đọc giá trị như các con số, như 1,0,0,0 là "1000", Vì thế nó rõ ràng sẽ thắng độ đặc hiệu 0,1,0,0 hoặc "100". Dấu phẩy ở đây thực sự để nhắc nhở chúng ta rằng nó không phải thực sự là "base 10". Về mặt kĩ thuật bạn có thế có giá trị như 0,1,13,4 và "13" không tràn ra như "base 10".

Tính toán mẫu

Update: :not() sort-of-pseudo-class không thêm giá trị đặc hiệu vào chính nó. Chỉ những gì bên trong parent là được thêm giá trị đặc hiệu.

Ghi chú quan trọng

Bộ chọn phổ quát (*) không có giá trị độ đặc hiệu (0,0,0,0)
Pseudo-elements (e.g. :first-line) nhận 0,0,0,1 không giống như các anh em lớp psuedo của chúng có 0,0,1,0
pseudo-class :not() không thêm tính đặc hiệu, chỉ có những gì bên trong dấu ngoặc đơn.
Các ! Important giá trị gắn một giá trị thuộc tính CSS là một chiến thắng tự động. Nó ghi đè ngay cả các kiểu nội tuyến từ đánh dấu. Cách duy nhất một giá trị quan trọng! Có thể được ghi đè là với một quy tắc quan trọng khác được khai báo sau trong CSS và với giá trị độ đặc hiệu tương đương hoặc lớn. Bạn có thể nghĩ về nó như thêm 1,0,0,0,0 vào giá trị độ đặc hiệu.

No nhận xét

Các chuyên gia trong ngành công nghiệp thiết kế đồ hoạ đã đạt được những thành công nhất định của mình trong nhiều lý do. Từ kinh nghiệm hay sự sáng tạo của mình… Nhưng dù thế nào họ cũng luôn trung thành với các nguyên tắc vàng trong việc thiết kế. Dưới đây là 10 quy tắc vàng trong việc thiết kế Logo mà bạn nên cân nhắc.

1. Đảm bảo nhận được một bản mô tả tóm tắt kỹ lưỡng về logo sẽ nhận.
Khi bạn đang làm việc với một dự án thiết kế logo điều quan trọng phải phác thảo ra mọi thứ từ ban đầu.
Với thiết kế logo thì một phác thảo tóm tắt những yêu cầu của khác hàng về sản phẩm là cực kỳ quan trọng. Nó giúp cho các thiết kế đi đúng mục tiêu cần thiết.

Một bảng tóm tắt về sản phẩm sẽ chắc chắn khiến bạn không lãng phí thời gian, và bạn dễ dàng nhắm đúng mục tiêu khách hàng. Phần tóm tắt yêu cầu giúp ta tập trung chú ý vào các lĩnh vực kinh doanh của doanh nghiệp, giúp họ hài lòng khi thấy kết quả cuối cùng.

David Airey, một nhà thiết kế logo đến từ Ireland cho biết:

Khi bạn đang làm việc với một dự án thiết kế logo điều quan trọng phải phác thảo ra mọi thứ từ ban đầu.
Thứ nhất nó đảm bảo người chủ doanh nghiệp biết rằng bạn đang và sẽ làm gì.
Thứ hai, các bản phác thảo, mô tả ngắn gọn giúp nhà thiết kế luôn đi đúng hướng.

2. Nghiên cứu rõ lĩnh vực mà logo sẽ sử dụng

Một kiến thức toàn diện về lĩnh vực mà khách hàng yêu cầu đóng vai trò rất quan trọng trong việc tạo ra một biểu tượng tốt. Không những miêu tả chính xác thông điệp, mà còn giúp khách hàng có được một sản phẩm nổi bật.

Jon Sandruck là một nhà thiết kế đồ họa tự do sinh sống và làm việc tại Dallas / Fort Worth Metroplex cho biết suy nghĩ của ông khi thiết kế logo cho Alliance Business Insurance. (Lĩnh vực bảo hiểm)

Điều làm tôi chú ý là công ty bảo hiểm cung cấp những sản phẩm kết hợp tốt nhất cho khách hàng…Họ tạo thành liên minh. Bởi vậy tôi tập trung vào ý tưởng lắp ráp nhiều phần vào một khối.

Các công ty có sự liên minh, và hình tam giác biểu hiện cho sự ổn định, cân bằng, (vững như kiềng ba chân) nó là thuộc tính quan trọng nhất của ngành bảo hiểm. Vì thế tôi quyết định tập trung vào các biểu tượng tạo thành chữ A.

3. Sử dụng giấy để phác thảo nhanh những ý tưởng ban đầu
Máy tính là trung tâm của tất cả các thiết kế hiện đại. Tuy nhiên việc tạo ra những ý tưởng ban đầu trên máy tính lại không tiện lợi. Phác thảo ý tưởng trên giấy giúp bạn nhanh chóng xem xét và đánh giá được các ý tưởng.

Dainis Graveris là một nhà thiết kế từ Latvia:

Phác thảo không phải là lãng phí thời gian mà là một cách đưa ra ý tưởng của bạn từ cái đầu lên tờ giấy. Sau đó sẽ dễ dàng hơn khi thiết kế nó trên máy tính. Vẽ phác thảo bằng tay giúp phát triển trí tưởng tượng của bạn.

4. Thiết kế logo trong một màu duy nhất
Biểu trưng được sử dụng trong một phạm vi rộng lớn, nó có thể được dùng trên các chất liệu, các kích thước, nhiều khi hạn chế màu sắc, do đó hãy đảm bảo rằng logo của bạn nhìn tốt trong định dạng mono (vô sắc)

Theo Patrick Winfield thì:

Tôi thích làm việc ban đầu với sản phẩm trắng đen, xem xét nó từ sự đơn giản. Màu sắc có ý nghĩa chủ quan và theo cảm xúc của bạn. Điều này sẽ làm phân tâm tới thiết kế tổng thể.

Tôi thậm chí không đề xuất một màu sắc nào khi trình bày cho khách hàng và đề nghị họ ký tắt vào bản logo được thiết kế đen trắng.

5. Tạo biểu tượng trong định dạng Vector
Định dạng Vector từ các phần mềm như Illustrator hay Corel tạo ra các sản phẩm với mọi kích cỡ. Nó sẽ không bị ảnh hưởng khi bạn phóng to hay thu nhỏ.

Chris Spooner một nhà thiết kế đồ họa cho biết.

Luôn luôn bắt đầu trên máy để thiết kế logo với phần mềm Illustrator hay Corel, chứ không phải Photoshop. Lý do logo phải đáp ứng được các kích thước, và in rõ ràng trên danh thiếp.

6. Cho khách hàng xem những concept tốt nhất.

Sau khi các ý tưởng thiết kế đã được tạo hình, đó là lúc chọn những ví dụ tốt nhất để khách hàng xem xét. Giai đoạn này ở giữa quá trình của dự án.

Angela Ferraro-Fanning nói:

Cách làm việc của tôi với khách hàng là đưa họ 3 ví dụ concept. Tôi cố gắng tạo ra 3 thiết kế khác nhau để cho họ xem. Dù trước đó quả thật tôi đã vẽ tới 35 thiết kế.

7. Chỉ ra cách logo xuất hiện trong các hoàn cảnh
Logo sẽ được sử dụng cho nhiều mục đích, trên văn phòng phẩm, trên tường, trên áp phích, xe cộ, giấy tờ v.v. Hãy chỉ ra cho khách hàng logo sẽ thế nào nếu xuất hiện trên các phương tiện khác nhau.

8. Giữ nó thật đơn giản
Một nguyên tắc phổ biến của giới thiết kế là KISS (Keep It Simple, Stupid). Ý nghĩa của nó là hướng tới sự đơn giản chứ không phải là sự phức tạp không cần thiết.

Jeff Fisher cho biết:

Khi học tại trường vào những năm 70. Tôi được học về KISS – Keep It Simple, Stupid. Nó nói rằng truyền tải nội dung của thiết kế rất quan trọng. Những biểu tượng đơn giản thường dễ nhận ra vì nó dễ nhớ và hiệu quả trong việc truyền đạt thông điệp.

Một thiết kế cần được hiểu nếu bạn phóng qua nó với vận tốc 70km/h.

9. Lựa chọn màu sắc dễ nhớ
Màu sắc là một trong những khía cạnh quan trọng nhất của bất kỳ thiết kế nào. Ý nghĩa của mỗi màu có thể truyền tải thông điệp và đem tới những hấp dẫn cho thiết kế.

Với các logo, màu sắc được lựa chọn rất quan trọng. (Ở Việt Nam có nhiều doanh nghiệp còn chọn màu sắc theo phong thủy, bởi vậy hãy hỏi rõ khách hàng về điều này)

Theo Ryan Nichols khi thiết kế logo FOWA FOOA and FOWD

Chúng tôi tin rằng màu sắc là công cụ giao tiếp quan trọng. Nó đóng góp rất nhiều vào thông điệp phía sau mỗi thương hiệu.

Từ những thông tin thu nhập được trong giai đoạn thiết kế, tôi biết rằng hầu hết khách hàng muốn có năng lượng, tạo sự táo bạo, nổi bật với các đối thủ cạnh tranh. Bước đầu tiên chúng tôi cần đưa ra những cảm xúc tâm lý khi nhìn những màu nào.

Cuối cùng chúng tôi quyết định sử dụng màu xanh kết hợp với màu socola. Điều này khiến thương hiệu có cái nhìn mới mẻ, trong khi màu nâu tạo sự cân bằng.

10. Tái tạo thương hiệu – Rebrand
Logo cần được thiết kế giúp nó có thể tốt trong hôm nay và trong nhiều năm tới. Ngay nay nhiều thương hiệu có nhu cầu làm mới. Hai nhãn hiệu thay đổi trong năm qua khá nổi tiếng là Metallica và Saks Fifth Avnue.

Điều quan trọng khi thay đổi thương hiệu là chú ý đến lịch sử, mục tiêu của thiết kế ban đầu, tính thương hiệu.

David Turner người đứng sau thương hiệu Metallica, đồng thời chính là tác giả của logo Coca Cola và Amazon. Ông nói về những suy nghĩ khi tái tạo lại Metallica.

Bản thân logo là sự thỏa thuận lớn, nó thuyết phục tôi rằng nó đã phù hợp với Metallica. Chúng ta nhìn vào lịch sử của nó, làm thế nào công chúng thích nghi với biểu tượng khi nó được tạo ra.

Thật thú vị khi tôi đặt logo mới lên web, các phản ứng từ người hâm mộ đều rất tuyệt vời, đối với họ nó rất quan trọng. Biểu tượng chữ M kết hợp tốt với tiêu đề của Album. Tất cả đều phù hợp.

Tương tự như vậy Michael Bierut người thiết kế lại logo Saks Fifth Avenue đã lấy cảm hứng từ biểu tượng ban đầu:

Xem xét lịch sử của họ, tôi thấy các cửa hàng này sử dụng nghĩa đen của logo từ khi thành lập. Trong số này, logo được vẽ bởi Tom Carnese năm 1973 được chuyển thể từ một chữ ký giới thiệu gần 20 năm trước. Trong tâm trí nhiều người đây vẫn là logo Saks0

Khôi phục lại một biểu tượng 30 tuổi là chưa đủ. Saks rất hạnh phúc khi truyền thống được nhấn mạnh, nó tốt hơn mong đợi, và là tín hiệu đang tìm kiếm trong tương lai, nơi có sự thay đổi liên tục.

No nhận xét

Follow Us

Labels

LATEST POSTS