Understanding the basic stuff of user experience design in an application. Create user flow and wireframing 1 on 1 start from understanding the why we need the wireframe, what exactly wireframe and user flow it is, And how to create and implement n digital product design such as application mobile or website.
Understanding the basic stuff of user experience design in an application. Create user flow and wireframing 1 on 1 start from understanding the why we need the wireframe, what exactly wireframe and user flow it is, And how to create and implement n digital product design such as application mobile or website.
A short presentation answering 3 main questions. Why we need Progressive Web Apps(PWA)? What is a progressive web app & it's features? and how a PWA works?
In my presentation we will talk about what is User Experience (UX) and why it is important nowadays.
Also we will briefly talk about Usability of a product and how to contact some easy Usability tests.
Finally we will learn the 10 Heuristics of Nielsen and revers-engineer our way back to designing thoughtful User Interfaces (UI) based on those rules of thumb.
Disclaimer: I am not a UX researcher or expert! I am a UX enthusiast. I am trying to study and learn as much as I can about UX (workshop, seminars, uni classes, articles etc.) and all I am trying to de here is to make people understand the importance of it, through what I have learned so far.
Don’t make me think là cuốn sách nền tảng nhất, căn bản nhất. Steve Krug giúp bạn xây dựng tư duy của người làm UX – tư duy hướng người dùng sâu sắc. Xuyên suốt gần 200 trang sách, ông chỉ làm rõ 1 điều duy nhất đó là làm sao để người dùng có thể sử dụng sản phẩm mà không phải suy nghĩ bất kỳ điều gì.
Triết lý này đang trở thành tiêu chuẩn trong thiết kế sản phẩm với tổ chức tiên phong đi đầu là Apple. Khi mà người ta còn đang chạy đua về công nghệ với những phát minh, bằng sáng chế, những tính năng và công nghệ siêu việt thì Apple đã tập trung vào thiết kế cho người dùng cá nhân với những trải nghiệm mượt mà và thích thú đến diệu kỳ.
Don’t make me think là cuốn sách gối đầu giường cho bất kỳ ai đang bắt đầu tìm hiểu UX, bắt đầu xây dựng tư duy hướng người dùng trong thiết kế.
Tập đoàn Internet NOVAON trân trọng giới thiệu!
Progressive Web App
New Web Technology for the Mobile User Which work on Poor Data Connection and It Will Work With Simple Manifest File Or with use of Service Workers. It Feel Like Mobile App to the user.
UI-UX Practical Talking, is presentation for a session I did in the GUC & the ITI, about the meaning and the difference between The UI and the UX, the key principals about building good UX of products, focusing on mobility and mobile design.
이노베이션 아카데미 멘토로서 3년 간의 혁신교육 경험을 글로 정리했습니다.
- 독자 : 개발자 학교, 부트캠프 등
- 했던 일 :
- 42 Seoul (에꼴42 서울캠퍼스) 교육지원
- 새로운 교육모델 연구개발 (집단학습모델, 학습 커뮤니티 연구)
pdf 파일로 누구나 다운로드 가능합니다.
출처명기 후 얼마든지 인용 및 활용 가능합니다. (6.5 MB, 224페이지)
좋은 후배 많이 양성해주세요.
오탈자 양해 부탁드립니다.
소개글 : https://subokim.wordpress.com/2023/03/20/3years_in_innoaca/
When you need to create a beautiful, state-of-the-art web solution, you need these front-end technologies and tools. Here is a list of such tools and technologies which help you create great user experience for your website.
What’s the difference between a UX and UI designer? (Part two)iFactory Digital
Welcome to the second instalment in our series on UX and UI design. We’re here to help you spot the difference between these two types of design so you can understand what kind of designer you need and when.
https://ifactory.com.au/news/whats-difference-between-ux-and-ui-designer-part-two
비행기 설계를 왜 통일 해야 할까?
디자인 시스템을 하는 이유
비행기들이 다 용도가 다르다...어떻게 설계하지?
맥락이 다른 페이지와 패턴
경유지까지 아직 멀었다... 언제 수리하지?
디자인 시스템을 적용하는 시점
엔지니어랑 얘기해서 정비해야하는데...어떻게 수리하지?
디자인 시스템을 적용하는 프로세스
비행기 설계가 바뀐걸 어떻게 알리지?
디자인 시스템의 전파
A short presentation answering 3 main questions. Why we need Progressive Web Apps(PWA)? What is a progressive web app & it's features? and how a PWA works?
In my presentation we will talk about what is User Experience (UX) and why it is important nowadays.
Also we will briefly talk about Usability of a product and how to contact some easy Usability tests.
Finally we will learn the 10 Heuristics of Nielsen and revers-engineer our way back to designing thoughtful User Interfaces (UI) based on those rules of thumb.
Disclaimer: I am not a UX researcher or expert! I am a UX enthusiast. I am trying to study and learn as much as I can about UX (workshop, seminars, uni classes, articles etc.) and all I am trying to de here is to make people understand the importance of it, through what I have learned so far.
Don’t make me think là cuốn sách nền tảng nhất, căn bản nhất. Steve Krug giúp bạn xây dựng tư duy của người làm UX – tư duy hướng người dùng sâu sắc. Xuyên suốt gần 200 trang sách, ông chỉ làm rõ 1 điều duy nhất đó là làm sao để người dùng có thể sử dụng sản phẩm mà không phải suy nghĩ bất kỳ điều gì.
Triết lý này đang trở thành tiêu chuẩn trong thiết kế sản phẩm với tổ chức tiên phong đi đầu là Apple. Khi mà người ta còn đang chạy đua về công nghệ với những phát minh, bằng sáng chế, những tính năng và công nghệ siêu việt thì Apple đã tập trung vào thiết kế cho người dùng cá nhân với những trải nghiệm mượt mà và thích thú đến diệu kỳ.
Don’t make me think là cuốn sách gối đầu giường cho bất kỳ ai đang bắt đầu tìm hiểu UX, bắt đầu xây dựng tư duy hướng người dùng trong thiết kế.
Tập đoàn Internet NOVAON trân trọng giới thiệu!
Progressive Web App
New Web Technology for the Mobile User Which work on Poor Data Connection and It Will Work With Simple Manifest File Or with use of Service Workers. It Feel Like Mobile App to the user.
UI-UX Practical Talking, is presentation for a session I did in the GUC & the ITI, about the meaning and the difference between The UI and the UX, the key principals about building good UX of products, focusing on mobility and mobile design.
이노베이션 아카데미 멘토로서 3년 간의 혁신교육 경험을 글로 정리했습니다.
- 독자 : 개발자 학교, 부트캠프 등
- 했던 일 :
- 42 Seoul (에꼴42 서울캠퍼스) 교육지원
- 새로운 교육모델 연구개발 (집단학습모델, 학습 커뮤니티 연구)
pdf 파일로 누구나 다운로드 가능합니다.
출처명기 후 얼마든지 인용 및 활용 가능합니다. (6.5 MB, 224페이지)
좋은 후배 많이 양성해주세요.
오탈자 양해 부탁드립니다.
소개글 : https://subokim.wordpress.com/2023/03/20/3years_in_innoaca/
When you need to create a beautiful, state-of-the-art web solution, you need these front-end technologies and tools. Here is a list of such tools and technologies which help you create great user experience for your website.
What’s the difference between a UX and UI designer? (Part two)iFactory Digital
Welcome to the second instalment in our series on UX and UI design. We’re here to help you spot the difference between these two types of design so you can understand what kind of designer you need and when.
https://ifactory.com.au/news/whats-difference-between-ux-and-ui-designer-part-two
비행기 설계를 왜 통일 해야 할까?
디자인 시스템을 하는 이유
비행기들이 다 용도가 다르다...어떻게 설계하지?
맥락이 다른 페이지와 패턴
경유지까지 아직 멀었다... 언제 수리하지?
디자인 시스템을 적용하는 시점
엔지니어랑 얘기해서 정비해야하는데...어떻게 수리하지?
디자인 시스템을 적용하는 프로세스
비행기 설계가 바뀐걸 어떻게 알리지?
디자인 시스템의 전파
CoreDot TechSeminar 2018 - Session1 Park JihunCore.Today
코어닷 기술 세미나 2018
Session #1 : 박지훈 (코어닷투데이 개발자)
파이썬을 이용해 세상에서 가장 쓸모없는 홈페이지 만들기
14:00 ~ 14:50
Python Flask로 사용자가 글을 쓰면, 마음대로 수정하고 삭제해버리는 쓸모없는 웹사이트(Useless Website)를 만들어 봅니다.
- Python라이브러리인 flask을 이용한 웹사이트 개발 과정 소개
- MongoDB를 이용해 웹사이트상에서 게시물 작성,조회,수정,삭제(CRUD) 기능 구현 실습
https://coredottoday.github.io/2018/10/15/Coredot-기술-세미나/
https://www.youtube.com/watch?v=gfbWxyz7Zeo
어느 해커쏜에 참여한 백엔드 개발자들을 위한 교육자료
쉽게 만든다고 했는데도, 많이 어려웠나봅니다.
제 욕심이 과했던 것 같아요. 담번엔 좀 더 쉽게 !
- 독자 : 백엔드 개발자를 희망하는 사람 (취준생, 이직 희망자), 5년차 이하
- 주요 내용 : 백엔드 개발을 할 때 일어나는 일들(개발팀의 일)
- 비상업적 목적으로 인용은 가능합니다. (출처 명기 필수)
1) 목차 : 현대 프런트엔드 개발과 Vue.js / Vue.js 동작원리와 자가 학습 방법
2) 내용 : Vue.js 장점 / Vue.js 시작하기 / Vue.js 학습 방법 / Angular vs React vs Vue / Vue.js vs jQuery / Vue.js 예제 / Vue.js 동작원리 / 2018년 프론트엔드 개발 현황 / Vue.js 프레임워크 특징 / 프런트엔드 개발 학습 방법. / Vue.js 학습 자료
아이오닉 2 스터디 최종 발표 - Google Developer Group
This presentation presents our team project on what we have developed through the 2 months study group, which is a mini version of Instagram with Ionic 2 and Firebase.
It uses the following web technologies,
# Ionic 2 (Angular 2 + Apache Cordova)
# Firebase Authentication & Storage & DB
2. 인터넷은 무엇인가?
사용자가 원하는 정보를 얻기 위해 직접 먼 곳을 가지 않고도 언제 어디서든지 접근이 가능하게 하는 기
술
과거 : 서울에서 광주의 맛집을 알기 위해서는 직접 여기저기 돌아다녀야함
현재 : 네이버와 같은 검색포털을 이용하여 맛집 블로그를 둘러보고 간접체험을 통해 지식을 습득.
2
3. 웹은 무엇인가?
인터넷을 이용하여 원거리에 있는 문서들을 열람하는 공간
해당 문서들은 웹 브라우저가 해석 가능한 특정 형식으로 작성되어 있음
3
4. 웹 브라우저는 무엇인가?
웹에 있는 문서들을 사용자가 보기 편하게 표시해주는 소프트웨어
URL (Uniform Resource Locator) 을 통해 해당 문서에 접근이 가능하도록 구성되어있음
4
5. 웹은 어떻게 돌아갈까?
1. 웹 브라우저에 사이트 주소(URL) 입력
2. 입력한 주소의 서버에서 해당 정보를 찾음
3. 해당 정보를 브라우저 화면에 표시
4. 사용자가 해당 사이트 내용을 확인
5
6. 웹의 동작방식 (기술 관점)
1. 사용자가 웹 브라우저에서 사이트 주소를 입력한다.
2. 사이트 주소에 해당되는 Server IP 를 접근한다. (DNS - Domain Name System 이용)
3. 해당 Server 에 도달하면 사용자가 원하는 문서를 다시 웹 브라우저에 전송한다.
4. 웹 브라우저의 렌더링엔진에서 해당 문서를 다음과 같은 순서로 파싱
HTML 를 DOM (Document Object Model) 으로 변환
CSS 를 DOM 에 추가
DOM 으로 렌더트리 생성
렌더트리 배치
렌더트리 그리기
5. 렌더트리를 브라우저에 표시 후 사용자에게 웹 페이지로 보여준다.
6
7. 웹 개발 기술
HTML5 : 화면에 나타나는 요소 (텍스트 또는 이미지 등)
CSS3 : 화면에 나타나는 요소를 이쁘게 꾸미는 기술
Javascript : 화면에 나타나는 요소의 동작을 제어
7
8. HTML
Hyper Text Markup Language : 웹 페이지를 제작하기 위한 표준 언어
Markup Lanugage : 태그를 이용하여 데이터를 구조화하는 언어
시작 태그 / 끝 태그 형식으로 구성
8
12. Javascript
웹 페이지 상에서 요소들의 동작을 제어하는 스크립트 언어
현대의 최신 브라우저에서 지배적으로 사용하고 있음
과거에는 클라이언트 언어, 최근에는 풀스택 언어로 사용
자바와 자바스크립트는 전혀 다른 언어
자바스크립트의 초기 이름은 Mocha, LiveScript 였으나 자바의 인기에 편승하기 위해 변경
12
14. 웹 개발 관련 용어들
jQuery : javascript 를 좀 더 편하게 쓸 수 있는 기술 모음집 (라이브러리)
라이브러리 : 유용한 기술들을 한 곳에 모아놓고 편하게 가져다 사용할 수 있는 기술 모음집
Angular : Google 이 만든 웹 개발 프레임워크 (웹 개발시에 일정한 룰이나 패턴을 따라 개발하도록
만든 도구)
14
15. 웹 개발 실습
목표 : HTML5, CSS3, Javscript 를 이용하여 자기소개 페이지를 만들어보자
HTML5 : p, br, img, button 태그
CSS3 : text color, img border 속성
Javscript : button action 동작, facebook comment plugin 오픈 API
15
16. 실습 #1 - 화면 요소 생성
HTML 파일 생성
html, head, body 추가
자기소개 내용 작성 (p, span 태그)
프로필 사진 추가 (img 태그)
좋아요 버튼 추가 (button 태그)
16
17. 실습 #2 - 화면 요소 스타일링
텍스트 색, 버튼 배경색 변경
button {
color: white;
background-color: #3366ff;
}
버튼 모서리 효과
button {
border-radius: 5px;
}
17
18. 버튼 이미지 수직 정렬
button {
display: inline-block;
}
button img {
vertical-align: text-top;
}
18
19. 실습 #3 - 화면 요소 동작제어
버튼 클릭 이벤트 추가
<button onclick="clickButton()">click</button>
<script>
function clickButton() {
alert("프로필을 좋아합니다.");
}
</script>
19
20. 실습 #4 - 반응형 웹 디자인 적용
Responsive Web Design : 웹 페이지가 해당 기기의 크기에 맞춰 레이아웃이 자동 조절되는 디자인
기법
<header>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</header>
20
21. 실습 #5 - Facebook Comment API
Github Page 를 활용하여 자기소개 웹 페이지 업로드
Github 가입
Repository 생성
Repository 클론
HTML, 이미지 파일 업로드
http://username.github.io 에서 페이지 확인
21
22. Facebook Developer 에서 Comment API 플러그인 다운
Facebook 계정 생성
Facebook Developer 에서 페이스북 계정 연동 후 App 생성
App 의 Settings 에서 Github Page 추가
Facebook SDK 설치
Comment Plugin 설치
22