Đường dẫn từ nhà phát triển đến nhà thiết kế: Cách thực hiện

Là một nhà phát triển muốn trở thành một nhà thiết kế, tôi thực sự thích tìm hiểu cách tạo UI đỉnh cao cho các trang web, ứng dụng di động, v.v. Tuy nhiên, tôi không biết gì về Photoshop hay bất cứ điều gì liên quan đến thiết kế, kỹ năng chính của tôi là HTML và CSS .

Tôi nên bắt đầu từ đâu? Làm thế nào để tôi học cách tạo các trang web và giao diện đẹp?

Là một nhà phát triển trước đây đã trở thành một nhà thiết kế, có một vài điều tôi muốn đề xuất. Đầu tiên và quan trọng nhất, bắt đầu làm việc trên các thiết kế! Nếu bạn có khả năng, hãy tìm một người cố vấn đã là nhà thiết kế UI / UX và bắt đầu làm việc với họ trong các dự án. Tôi thấy tôi đã học được nhiều hơn bằng cách thực sự làm việc trong các dự án và tiếp thu kiến ​​thức từ những người đã làm việc này trong nhiều năm hơn tôi từng đọc một cuốn sách.

Điều đó đang được nói, nếu bạn muốn đọc lên UI / UX / v.v., tôi sẽ xem qua chủ đề tuyệt vời này: Phải đọc Sách giao diện người dùng? Tôi nghĩ rằng sở thích cá nhân của tôi là "Đừng làm tôi suy nghĩ" của Steve Krug - nhưng tôi chắc chắn cuối cùng bạn sẽ tìm thấy sự yêu thích của riêng bạn.

Cuối cùng, đối với các công cụ như Photoshop, Illustrator, v.v ... đừng lo lắng về điều đó! Cuối cùng, bạn sẽ tìm thấy các công cụ phù hợp nhất với bạn. Cá nhân, tôi bắt đầu với các mô hình bút chì và giấy, sau đó tùy thuộc vào dự án, tôi sẽ chuyển sang một thứ gì đó trong Balsamiq , hoặc Axure , hoặc đôi khi là HTML và CSS thẳng - nó thực sự phụ thuộc vào quy mô, phạm vi của dự án, v.v. thoải mái nhất cho bạn Vào cuối ngày, tất cả những gì quan trọng là bạn truyền đạt rõ ràng tầm nhìn của bạn cho thiết kế của bạn, chứ không phải công cụ bạn đã sử dụng để làm điều đó.

Tôi đã pha trộn thiết kế và phát triển trong một thời gian dài. Nhưng trong những ngày đầu tôi dành nhiều thời gian để học các công cụ chỉnh sửa hơn những gì tạo nên một thiết kế tốt. Có rất nhiều hướng dẫn được tìm thấy để tìm hiểu cách sử dụng Photoshop, Illustrator, Fireworks, v.v. Nhưng thật tuyệt khi có một số ý nghĩa và hướng thiết kế. Đây là điều tôi vẫn muốn trở nên tốt hơn.

Một trong những nguồn cảm hứng của tôi là một chàng trai tên là Robby Ingebretsen, bởi vì anh ta làm cả việc phát triển và thiết kế cực kỳ tốt. Trang web của anh ấy là tại nerdplusart.com .

Có một vài điều tôi sẽ xem xét từ anh ấy ...

• Danh sách ngắn của tôi về những cuốn sách phải đọc dành cho nhà thiết kế
• Thiết kế cơ bản cho nhà phát triển
• 10 cách để tấn công một vấn đề thiết kế và chiến thắng

Khi anh ấy nói về tất cả các bài thuyết trình của mình, tôi nghĩ việc tìm cảm hứng cho các thiết kế của bạn là rất quan trọng. Ngay cả những nhà thiết kế giỏi nhất cũng không đơn giản nghĩ ra thứ này ngoài không khí. Một trong những dấu trang của tôi là một bộ sưu tập "Thiết kế đồ họa mới" , chủ yếu được thấy trong công việc in ấn. Hầu hết chúng rất đơn giản, thường sử dụng chính kiểu chữ làm các yếu tố đồ họa chính. Đơn giản như nó có vẻ, chỉ cần duyệt qua những thứ như thế này có thể giúp bạn định hình thiết kế của bạn.

Giống như việc học Visual Studio không làm cho một nhà phát triển phần mềm giỏi, việc học Photoshop cũng không làm cho một nhà thiết kế UI giỏi.

Nếu bạn muốn đi theo con đường chính thức, một nền giáo dục về Nghệ thuật / Thiết kế đồ họa, Nhân tố con người, Tâm lý học, Khoa học nghệ thuật thông tin / khoa học thư viện sẽ là nơi bạn nên tìm đến.

Không chính thức, có được để làm việc! ;) Cách tốt nhất để học là chỉ cần làm điều đó.

Tôi là một nhà thiết kế đồ họa được đào tạo chính thức, người đã nắm bắt được các kỹ năng phát triển phần mềm trong công việc. Tôi bắt đầu từ sự cần thiết thuần túy.

Cá nhân, tôi nghĩ rằng các thành viên nhóm UX giỏi nhất là những người có sự kết hợp của cả hai kỹ năng. Vì vậy, tôi nghĩ rằng bạn đang đi đúng hướng.

Tôi sẽ bắt đầu với việc đọc cuốn sách "Thiết kế web đầu tiên" của Watrall & Siarto (được xuất bản bởi O'Reilly). Nó khá vô nghĩa, dễ tiêu hóa và đưa bạn qua mọi thứ mà một nhà thiết kế phải xem xét. Đây không phải là một nghiên cứu chuyên sâu, nhưng giúp bạn bắt đầu biết những câu hỏi bạn cần trả lời tiếp theo. Nó bao gồm điều hướng, tổ chức, bố trí, viết, màu sắc và khả năng tiếp cận.

Ngoài ra, trước khi bạn nhảy vào Photoshop, Adobe Illustrator, hoặc bất cứ điều gì, hãy cấu trúc khung thiết kế của bạn để đảm bảo mọi thứ ở đúng vị trí trước khi bạn dành thêm thời gian để làm cho nó trông đẹp hơn. Bạn có thể phác thảo nó ra giấy hoặc bảng trắng, hoặc bạn có thể sử dụng một công cụ. Một công cụ mà tôi thấy thực sự hữu ích trong bước này là Balsamiq Mockups . Nó cho phép bạn suy nghĩ về tổ chức và bố trí trang web đầu tiên.

Tôi thực sự đã sử dụng cách tiếp cận ngược lại từ UX Designer sang UI Developer, tuy nhiên, khi chọn Thiết kế, sẽ đề xuất một vài lĩnh vực để bắt đầu:

Tôi sẽ xem cuốn sách "Đừng làm tôi suy nghĩ!" của Steve Krug , mà tôi nghĩ là một cuốn sách tuyệt vời về thiết kế để thiết kế trên web.

Có rất nhiều tài nguyên web tuyệt vời bao gồm SmashingMagazine.com và PSDTuts.com, nơi cung cấp các bài viết tuyệt vời hiện nay trong thế giới thiết kế và công nghệ web.

Tôi cũng sẽ xem qua việc tìm hiểu các nguyên tắc của HCI nếu bạn đang tìm cách đặc biệt trở thành Nhà thiết kế UX.

Chúc may mắn và thiết kế hạnh phúc!

Tôi thực sự thích tìm hiểu cách tạo UI đỉnh cao cho các trang web, ứng dụng di động, v.v.

Được rồi, đó là một chủ đề rộng. Bạn muốn tạo ra các trang web "đẹp", "đỉnh cao", chuyên nghiệp. Vì vậy, bạn cần biết điều gì khiến mọi người cảm nhận một cái gì đó là "đẹp", phải không? Thật may mắn cho bạn, vẻ đẹp không thực sự chủ quan.

Một trong những chìa khóa cho một thiết kế hình ảnh đẹp là sự hài hòa .

Sự thiếu hài hòa là những gì làm cho thiết kế của bạn trông nghiệp dư.

Và, điều tốt nhất là sự hài hòa thị giác đến với toán học. Đó không phải là về cảm giác ruột.

Giống như những người khác đã chỉ ra, tôi khuyên bạn nên tự thiết kế trang web. Cố gắng áp dụng các nguyên tắc thiết kế mà bạn tìm hiểu thay vì sử dụng một khung sẵn sàng. Nó có thể khó khăn lúc ban đầu, nhưng nó sẽ giúp bạn trở nên tốt hơn.

Làm thế nào để nhúng sự hài hòa trong một thiết kế trang web

Sau đây là một ví dụ thực tế và một bài tập nhỏ vui nhộn bạn có thể làm bây giờ.

Một cách mà cá nhân tôi thích là sử dụng thang đo mô-đun để định cỡ các thành phần trang web theo tỷ lệ hài hòa. Một trang web có thể giúp bạn tạo quy mô mô-đun là trang này: modensescale.com

Lợi ích của việc sử dụng thang đo mô-đun là nó có thể đưa ra quyết định định cỡ dễ dàng như chọn một số từ thang đo.

Ví dụ: hãy kích thước các tiêu đề của trang web (để truyền đạt phân cấp trực quan).

Giả sử chúng ta có tỷ lệ mô-đun này dựa trên kích thước phông chữ cơ thể 19px mà tôi đã chọn (19px vì nó trông đẹp nhất với phông chữ tôi đang sử dụng, nhưng bạn có thể bỏ qua bước này và đi với kích thước 16px mặc định) và tỷ lệ 1.412 (Không cần phải đi vào chi tiết lý do tại sao tôi chọn tỷ lệ này. Chỉ cần bất kỳ tỷ lệ nào sẽ làm tốt hơn là không có tỷ lệ nào cho các dự án của bạn.):

Nhìn vào nó, tôi chọn H1 là 2.815em, H2 là 1.994em và H3 là 1.412em. 3 số đầu tiên lớn hơn kích thước phông chữ cơ thể. Dễ dàng, phải không? Văn bản cơ thể sẽ là 1em (trong trường hợp của tôi là 19px). Sau đó, tôi định cỡ H4-H6 ở mức 1em và sử dụng độ tương phản (trọng lượng hoặc kiểu phông chữ khác nhau) để phân biệt chúng với văn bản cơ thể.

Vì vậy, hãy thử điều này ngay bây giờ:

1. Tạo quy mô mô-đun của riêng bạn
2. Nhận một tài liệu HTML đơn giản (nội dung thực, vui lòng không có Lorem Ipsum)
3. Sử dụng tỷ lệ để kích thước các tiêu đề.
4. Sau đó thử sử dụng thang đo cho các quyết định định cỡ khác (lề, phần đệm, v.v.)

Đó chỉ là một bước nhỏ hướng tới các thiết kế tốt hơn, nhưng tôi hy vọng rằng nó sẽ giúp bạn.

Nếu bạn thấy điều này hữu ích, bạn có thể đọc danh sách 7 lời khuyên khác của tôi dành cho những người thiết kế web mới bắt đầu biết HTML và CSS

Tái bút: Bạn thực sự có rất nhiều việc phải đọc

Giống như những người khác đã nói, đọc:

• Các yếu tố của thiết kế đồ họa của Alexander White
• Các yếu tố của phong cách đánh máy của Robert Bringhurst
• Đừng làm tôi suy nghĩ bởi Steve Krug

Ngoài ra, đây là một danh sách lớn các tài nguyên trực tuyến như blog và cộng đồng để theo dõi: enboard.co/webdesign/