Để có 1 góc nhìn, tư duy khác về Landing Page
Trải nghiệm người dùng
Làm đẹp màu sắc

UX/Ui Landing Page là gì?

Lý do vì sao cần nghiên cứu ux là cần thiết

Wireframe là gì?

Tư duy người bình thường xếp 4 khối box

Click để xem cái chị k nghĩ ra được

Thiết kế như này chị cũng làm được

Wireframe

Ux design làm

Tiếp

Wireframe

Tư duy người bình thường xếp 5 khối box

Click để xem khôi biến thể

Đây là khối cơ bản mọi người nghĩ

Nội dung

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Portenta haec esse dicit, neque ea ratione ullo modo posse vivi

Nội dung

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Portenta haec esse dicit, neque ea ratione ullo modo posse vivi

Nội dung

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Portenta haec esse dicit, neque ea ratione ullo modo posse vivi

Nội dung

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Portenta haec esse dicit, neque ea ratione ullo modo posse vivi

Nội dung

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Portenta haec esse dicit, neque ea ratione ullo modo posse vivi

Wireframe

Ux design làm

Tiếp

Nội dung

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nội dung

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Portenta haec esse dicit, neque ea ratione ullo modo posse vivi

Nội dung

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Portenta haec esse dicit, neque ea ratione ullo modo posse vivi

Nội dung

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Portenta haec esse dicit, neque ea ratione ullo modo posse vivi

Nội dung

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Portenta haec esse dicit, neque ea ratione ullo modo posse vivi

Wireframe

Tư duy người bình thường xếp 6 khối box

Click để xem khôi biến thể

Đây là khối cơ bản mọi người nghĩ

Wireframe

Tiếp

UX design làm

Ux design làm

UX design làm

Ux design làm

UX design làm

Ux design làm

cấp bậc

- Giúp người dùng định hướng rõ ràng về thiết kế
- Thể hiện thứ tự ưu tiên cho mắt người đọc
- Sử dụng tỷ lệ, đường, màu sắc ... để phân cấp bậc
Đâu là chia cấp bậc đúng

UI CẦN HOÀN THÀNH CÁC GẠCH ĐẦU DÒNG SAU

- Shadow cho các khối Box là 1 idea không tệ
- Button:
- Text:
+ Góc vuông
+ Bo nhẹ
+ Bo tròn
+ Khoảng cách giữa các nội dung
+ Chính phụ giữa các text
+ Font chữ phù hợp như thế nào? Kích thước ra làm sao
Muốn nổi bật 1 nội dung chữ không nhất thiết phải cho chữ đó to lên. " Những thứ xung quanh nhỏ đi cũng được mà ".
Healine, Sub, Checklist đều phải đồng bộ xuyên suốt.

Update kỹ năng

Ramdom số người đang xem
<script>
    setInterval(function(){
 var minNumber = 50;
        var maxNumber = 100;
        var randomnumber = Math.floor(Math.random() * (maxNumber - minNumber + 1) + minNumber);
        var e = document.querySelector('#HEADLINE352 .ladi-headline');
  e.innerText = randomnumber+1;
    }, 3000);
</script>
ngẫu nhiên số có 6 chữ số giả mã đơn hàng
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
       'use strict';
        var chars = '1234567890',
        serialLength = 6,
        randomSerial = "",
        i,
        randomNumber;
            for (i = 0; i < serialLength; i = i + 1) {
                randomNumber = Math.floor(Math.random() * chars.length);
                randomSerial += chars.substring(randomNumber, randomNumber + 1);
            }
    var orderid = document.querySelector('#HEADLINE768 .ladi-headline');
    orderid.innerText = randomSerial;
    });
 </script>
Spin ẩn hiện mã giảm giá
Gắn vào spin để quay xong xổ xuống headline 5 và section10 ( nhớ ẩn headline5 cho chuyên nghiệp
ladi('HEADLINE5').show();
ladi('SECTION10').scroll();
gắn vào nút bấm để start Spin
ladi('SPINLUCKY110').start()
click show mã sản phẩm luôn
ladi('FORM_ITEM861').value('LM178');
Giảm dần từ số to đến hết
<script type="text/javascript">
 setInterval(function(){
  var e = document.querySelector('#HEADLINE296 .ladi-headline');
  var num = parseFloat(e.outerText);
  if(num>1){
   e.innerText = num - 1;
  }
 }, 3000);
</script>
Ctrl + " để chuẩn pixel
Gallery, carousel, auto scroll, group, ctrl + C, ctrl + D, ctrl + V, khóa phần tử, Font
Gradient
Hiệu ứng tối ưu
Kích thước
Spin
Mask, cắt ảnh
Hiệu ứng rê chuột
Tạo button
Bọc link, nối link sang ldp khác
<script>
    window.location.href = 'https://www.hoplypage.com/';
</script>

Ux Landing Page là gì?

- Thiết kế trải nghiệm người dùng cố gắng để làm cho người dùng hướng tới mục đích cuối cùng nhấn vào nút Call To Action.
- Lên Wireframe trước để có 1 định hướng tốt nhất ( Trải nghiệm người dùng tốt nhất ).
- Ux được coi là đắp xương (giá trị cốt lõi), thì Ui là đắp thịt cho trang Landing Page.

Ui Landing Page là gì?

- (Tác dụng duy nhất) Làm đẹp cho Landing Page
- Ux được coi là bộ xương thì Ui là đắp thịt cho SP