Upload
yen-kieu-hai
View
319
Download
3
Embed Size (px)
DESCRIPTION
Thiết kế responsive và tương lai của tìm kiếm di động
Citation preview
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