THIẾT KẾ RESPONSIVE VÀ TƯƠNG LAI

TÌM KIẾM TRÊN THIẾT BỊDI ĐỘNG

THÁCH THỨC

THIẾT KẾ KĨ THUẬT SỐ

Bạn không biết thiết kếBạn không biết wireframes và tạo mẫu... Và bạn không biết quảng cáo bằng nội dung

TÙY CHỌN

Điều bạn có thể làm hoặc nhờ giúp đỡ tạo:Blog posts, cuộc thi, infographics, tính năng tương tác, hình thức nội dung dài, video, thuyết trình, ...

YÊU CẦU KĨ NĂNG

•Copywriting, nghiên cứu báo chí, ý tưởng câu chuyện•Hồ sơ khách hàng, phân tích dữ liệu•Tiếp cận cộng đồng và PR•Phát triển back-end và front-end•Sản xuất video, hình ảnh, thiết kế graphic

TẬP HỢP

Thiết kế tốt nghĩa là bạn có thể trình bày mọi thứ cho khách hàng và họ sẽ thuê bạn - người có kinh nghiệm tuyệt vời nhất

VẤN ĐỀ

KĨ NĂNG HÌNH CHỮ T

Bạn không phải người thiết kế, bạn không phải giám đốc dự án

Chuyên môn trong lĩnh vực duy nhất (có lẽ là tìm kiếm kĩ thuật), với hiểu biết cơ bản nhiều lĩnh vực sáng tạo khác

MỘT THÁP BABEL

Nếu bạn không thể nói ngôn ngữ của tôi, bạn không thể lấy bất cứ thứ gì để xây dựng cách nó làm việc tốt trong mỗi thiết bị

Nếu tôi không thể nói ngôn ngữ của bạn, tôi sẽ xây dựng vài thứ khó tin và bạn sẽ không tìm thấy lợi ích từ nó

SEO TRONG NĂM 2014?

Bạn cần thực sự hiểu biết biết cái gì có thể tương tác với lĩnh vực của bạnBắt đầu với thiết kế...

CÁC NGUYÊN TẮC CƠ BẢN

THIẾT KẾ TỐT LÀ ...

Đây là Dieter Rams. Ông đã đưa ra 10 nguyên tắc trong đó xác định thiết kế tốt, mà đã trở thành touchstones cho thiết kế tốt trong 40 năm quahttp://en.wikipedia.org/wiki/Dieter_Rams

NGUYÊN TẮC CỦA MỘT THIẾT KẾ TỐT

1. Nó sáng tạo2. Có các mục hữu ích3. Có thẩm mỹ4. Có các mục dễ hiểu5. Nó không phô trương6. Nó thân thiện7. Nó không lỗi thời qua thời gian8. Nó được chăm chút kĩ lưỡng và chi tiết9. Tôn trọng môi trường10.Không thêm chrome

TIỀM NĂNG

GẦN MÀ XA

Đây là ví dụ của nội dung tuyệt vời, từng chút một, không xem xét trên điện thoại di động

THE PIXAR THEORY

http://www.pixartheory.com/

•HTML5•CSS3 layout, font inports•jQuery, jQuery UI, smaill JS elements

WINGTIP OR SADDLE

http://www.colehaan.com/wingtip-or-saddle.html

•HTML5 video, audio•CSS3 layout, font inports•jQuery, jQuery UI, 7 jQuery plugins•Sản xuất video, âm thanh mẫu•Hình ảnh packshot

SNOWFALL

http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek

•HTML5 video, audio•CSS3 layout, font imports•jQuery, jQuery UI, 3jQuery plugins, Underscore, Orientation detection, Modernizr, mustache, mediaelementjs•Video, 3D graphics và sản xuất âm thanh•Hình ảnh packshot

VẤN ĐỀ

DI ĐỘNG/ MÀN HÌNH

Đây là tất cả những ý tưởng tuyệt vời cho màn hình nhưng chỉ cho màn hình

Nó vẫn ổn, nếu chúng ta chỉ có màn hình trên thế giới, nhưng không, chúng ta còn nhiều thiết bị khác

SỬA CHỮA

HIỂU BIẾT

Chú ý đến những điều sau đây, bạn sẽ ít nhất là bắt đầu hiểu các nhà phát triển ngôn ngữ sử dụng

CÔNG NGHỆ

HTML5

Ngữ nghĩa (chủ yếu) của dữ liệu tầng (lớp), đề xuất nội dung browserhttp://en.wikipedia.org/wiki/HTML5http://diveintohtml5.info/http://www.html5rocks.com/en/

CSS3

(Tương đối) nâng cấp lớp trình bày, được sử dụng để cung cấp cho thiết kế hấp dẫn đối với HTML. LESS/SAS/SCSS – CSS cũng tạo ra công nghệhttp://www.css3.com/http://lesscss.org/http://sass-lang.com/

JAVASCRIPT

DOM (liên tưởng HTML) công nghệ điều khiển. Sử dụng cho hoạt hình, nhận dữ liệu, và tất cả những thứ tiên tiến khácjQuery/MooTools/Angular/Ember/CanJS/Coffescript: JS công nghệ liên quanhttp://eloquentjavascript.net/

SVG

Công nghệ vẽ. Thường sử dụng cho graphing, biểu đồ và những đường nhỏ/ ô phần tử cơ bảnhttp://d3js.org/http://css-tricks.com/using-svg/

WebGL

Nâng cao công nghệ vẽ cho browserhttp://learningwebgl.com/blog/?page_id=1217http://www.chromeexperiments.com/webgl/

LAYOUTS

ADAPTIVE/RESPONSIVE

•Thay đổi phân giải khác nhau•Sửa hoặc fluid (mềm dẻo) kích thước nội dung•Di động (mobile), tablet và màn hình (desktop) nói chung•Nói chung là 12/16 cột•Sửa bố cục (fixed layout)

ADAPTIVE/RESPONSIVE

http://www.hellomichael.com/http://pacelaw.com/http://www.bostonglobe.com/

FRAMELESS

•Thay đổi phân giải khác nhau•Sửa hoặc mềm dẻo kích thước nội dung•Nhiều Breakpoints (6+, SEOgadget mới sử dụng 13)•Không giới hạn đếm cột•Bố cục thay đổi

FRAMELESS

http://seogadget.com/opendaws/http://framelessgrid.com/

TƯƠNG LAI

KỂ MỘT CÂU CHUYỆN HAY

1. Xác định các kinh nghiệm và nội dung đầu tiên2. Thiết kế UI cho nhiều thiết bị có kích thước

khác nhau và truy cập dễ dàng nhất3. Kiểm tra, kiểm tra và kiểm tra mọi thứ bạn có

thể nghĩ về nó

iOS (Safari), Android (browser, Chrome), Windows và Mac (IE, Chrome và Firefox) ở mức tối thiểu

Vietbaiseo.net việt hóa từ seogadget.com

THE END