Gibberish

Posts tagged ‘thiết kế web’

Đơn giản và súc tích

Mới đọc một bài về thiết kế web đơn giản và hiệu quả hơn. Dịch thoáng về tiếng Việt để nhớ mà làm kinh nghiệm khi làm bất kì một cái gì:
1. Đặt nội dung nổi lên trước, và xếp ở trung tâm.
2. Vứt bớt những yếu tố không liên quan và không cần thiết.
3. Bỏ bớt những sidebar không quan trọng.
4. Thu gọn tiêu đề (nghĩa là sẽ có nhiều không gian cho nội dung chính)
5. Dùng ít màu sắc.

Advertisements

What do you have to notice to prepare for a website?

Designing a new website is the passion for those pro designers, but it can be a nightmare for the novices. To avoid getting scared and bored, you must be well prepared for the new project.
So, what do you need?

1.A color scheme.

A color palette

A color scheme is a set of colour that you will rely on it to design the whole website. It can create the main mood for the visitor, to express the idea of the site owner, and some different interesting things.
What does a color scheme depend?
-The designer’s idea and style.
-The main content of the site (the purpose for creating the site)
-Random
Whatever kind of color scheme you have, you must use it correctly, do not distract from it.
You can get pro scheme from the color palette communities, like kuler or you can search throught the search engine with the keyword “color palette”. Outside there’re thousands of designers from novice to pro ready to help your choose the right thing.

This example ofcolor palette is too much for a site. Normally, we should use a palette of about 4 or 5 colors.

2.A layout:

Well, beside color, which attracts the rightside brain of the viewer, the layout has a little more scientific. According to the constance in ratio between space and table etc.. you must choose the right size for them, where they will be put on the site.
Moreover, it’s the typography of the site, what’s kind of font family you gonna use, the size of the header, the body text, serif or not, line spacing … make this readable, please.
Choosing good layout means the layout go well with the color scheme you’d chosen. It depends on you.

3.A draft on paper:

You can say that you only need PC, but like anything else (project on designing, drawing) you need a real idea to bring with you anywhere (ofcourse you work on it, you must put it in mind always), and the fact that when you show your idea to the site owner, you must express in paper, do not think that they will think you are more pro when show them by files and artworks in your modern laptop. The technique of drawing by hand is very important.

4. Skill in coding:

If you’re not a GUI designer, you must master the CSS and HTML, for what? For realizing your idea, the basic HTML page you create from Adobe Photoshop looks like a mess, ’cause you just cut out the image, and the programme arrange it for you “in image”. No. By using CSS, the size of the site will decrease, that means the browsing speed when the site is published will increase.

Some inspiration for you:

5. Logo:

Logo? Important!

Logo is an important element of a website, especially business. And most of the cases you create the color scheme based on the logo. Take a look on logo’s size, color, place, content, and work well with the slogan.
You’ll be inspired by the examples in these community:

Well that’s a little of my knowledge, I learn them all by myself. I’ll improve my techniques later.

How to Create Professional Website Layouts – Website Development Tutorial

Source: Tempting Magazine
Layout of a website is very important and needs some extra hard work to bring just the right look and feel of it. There is different website layouts for different types of websites i.e a games website and social networking website both have different layouts.

Following tutorial will help you realize what are the basic requirements that are to be fulfilled in web designing and how you can design a unique self-defined layout.

Conduct a layout design requirements analysis before you actually design the layout. This will ensure that you create a website look and feel that not only looks good but hits the mark.

1. Do you have a logo ready? If not, this is a priority as the site style and colors will have to blend with the logo.
2. Do you have a byline ready?
3. What do you want the site to communicate?
4. What do you want a visitor to do on the site? List the sequence of events you would like the visitor to go through.
5. How will you define the success of the site?
6. Who is your target audience?
7. What kind of colors would your target audience like?
8. What kind of graphic style would your target audience like?
9. Are there any competitor sites that you would like to use as a benchmark? What are they doing well on their site?
10. Are there any sites that have a look and feel that is attractive to your target audience? List them.
11. Based on the above criteria have you selected any graphics you would like to use? This is an important step as the layout colors may need to blend with the graphics.
12. Have you got the site plan ready? What will be the main menu and sub menu items?
13. What should be highlighted throughout the site and on the homepage in particular?
14. Will there be a site search? If so, what are the fields and how much space will it occupy?
15. Will there be a newsletter signup or login? Will these fields appear on all pages?
16. Will you have advertising on the site, if so is there a specified area and size to be allocated for this?

Source: http://www.temptingmagazine.com

Thêm một số kỹ thuật trong thiết kế web

Linkos-design

1.Spacing – khoảng cách:

Một trong những yếu tố cốt lõi của một trang web quyết định những thành phần còn lại chính là layout, mà layout thì chỉ gói gọn trong những vấn đề sau: khoảng cách, bố cục và kích thước. Trong mục này ta sẽ nói về spacing, dịch ra tiếng Việt là khoảng cách.

Nói sơ về khoảng cách: đó là cách bố trí những điểm và elements trong một website chứng tỏ sự thông minh và sự gọn gàng cũng như minh bạch của người thiết kế, chú ý đến khoảng cách của các elements sẽ gây một ảnh hưởng lớn đến khả năng cảm thụ của những người thưởng thức và có thể tạo ra những cách nhìn khác nhau mà không cần thay đổi về màu sắc hay hình dáng.

Một trong những spacing hợp lý là Good.is

Ở đây tạm không bàn về typo và image, ta sẽ bàn về spacing thôi, như trong hình (hoặc có thể trực tiếp đến site good.is mà xem) thì những khoảng cách mà site này đã dùng tạo cảm giác khá gọn gàng (giữa đoạn văn và khung viền chẳng hạn), làm cho người đọc muốn tìm một nội dung gì đó hay đọc một cái gì đó trở nên dễ dàng hơn nhiều vào không làm họ bị rối. Vậy ta nên nhớ ở đây là không nên ki bo với khoảng cách giữa texts và images với border.

Một ví dụ đẹp nữa về spacing là Digital Mash:

Spacing tốt sẽ làm cho người dùng có cảm giác rộng rãi dễ sử dụng, không có gì khó chịu hơn là click lộn link này qua link khác và thấy mọi thứ có vẻ chồng chéo lên nhau nhức cả mắt.

Để spacing tốt, trong design, ta có những techniques sau:

  • Thiết kế sử dụng grid (hệ thống lưới kẻ ô vuông): sử dụng tốt grid sẽ giúp ta hiểu tốt hơn về spacing, cũng như mọi thứ dễ dàng hơn trong việc spacing.
  • Làm lại và làm lại: Ta sẽ làm đi làm lại, cho đến khi nào mãn nhãn ta thì thôi.
  • Một khoảng trắng không phải là một chỗ lãng phí: Trên site của chúng ta có khoảng trắng, không có nghĩa là ta sẽ điền gì vào đó như môn Anh Văn. Không mà có, đó chính là giá trị của spacing.
  • Ít nhưng tinh tốt hơn là nhiều mà cùi bắp: đừng cố gắng nhét đủ mọi thừ vào site khi design, thêm nhiều khoảng trống, và chỉ để những thông tin mang tính cốt lõi.

2.Pixel perfect:

Đây cũng chúng là kỹ thuật pixel popping mà tôi đã link từ trước, có một số kỹ thuật thêm 1 line rộng 1px vào phần border của các table để làm có các table gây cảm giác “pop” ấn tượng và bắt mắt (eye-catching). Chúng ta xem một ví dụ ở đây:

Ta sẽ để ý những phần được phóng to: ở phần trên, miền xanh lá cây được thêm một line màu xanh nhạt, tương tự, vùng xám ở dưới cũng có một line màu trắng sữa ở trên. Những đường line này tạo cảm giác 3 chiều cho mắt, cũng như làm cho thiết kế “thật” hơn.

Vậy những bài học mà ta rút ra từ kỹ thuật pixel là gì (còn how to do it, đề nghị xem lại bài pixel popping)

  • Sử dụng yếu tố “tinh tế”: những chi tiết nhỏ hỗ trợ tốt cho nội dung.
  • Chú ý từng pixel một: bất kể dùng kỹ thuật gì: borders, gradient hay stroke, không phải cứ TO là tốt.
  • Before and After: luôn so sánh những kết quả mới với kết quả cũ để rút ra những tiến bộ mà ta đã áp dụng.

3. Web typo:

Tôi hay nhắc đến typo, typo ở đây không có gì cao sang, không phải nhất thiết dùng nghệ thuật chữ để làm một artwork mới là typo, typo trong site chỉ đơn giản là sắp chữ, font gì, màu font sao, font side bao nhiêu, khoảng cách giữa các hàng và cột trong một đoạn văn quyết định rất lớn đến tính bắt mắt của một site. Những kỹ thuật như vậy không chỉ giới hạn trong PS mà còn là (chủ yếu là) trong CSS.

Một chuẩn về typo

Một “chuẩn” về typo

Techniques:

  • Muốn hù người khác và muốn đuổi họ đi? Dễ ợt, dùng font khó đọc, sít sít nhau và bold hết lên là xong.
  • Quên mất spacing ở trên? Đừng nghĩ gì về master of webdesign nữa.
  • Font phù hợp ngữ cảnh không? Luôn tự hỏi câu hỏi đó, và luôn kiểm tra xem font có phù hợp với những thiết kế khác không.

4.Bố cục, sắp xếp yếu tố, hoàn tất layout:

Khi mà mọi thứ đã đẹp, nhưng trộn lung tung chúng với nhau thử xem, chả ai khen là đẹp nữa, việc bố trí tốt cũng giống như một căn phong có tổ chức; và gọn là một chuyện, dễ dùng tiện dụng là chuyện khác, chẳng ai thích vào một trang mà khung tìm kiếm giấu đâu xa lắc ở một góc nào đó của site cả (ví dụ vui thế).

Luôn tự đặt cho mình những yêu cầu sau:

  • Mình đang thiết kế cho nội dung gì?
  • Lại grid
  • Bố trí các phần tử, đặt mình là vai trò người xem coi nó ra sao, có dễ xài không, có gây nổi khùng không? XD
  • Nếu một phần tử không cần thiết, thì đừng bỏ nó vào.
  • Cân bằng chú ý: không nên có một yếu tố quá “tỏa sáng” mà làm “lu mờ” các yếu tố khác.

Còn một số kỹ thuật khác nữa, nhưng chúng ta sẽ tự phát hiện ra khi thực hành và tự tìm tòi thêm. 😉

Tag Cloud

%d bloggers like this: