Apirak Panatkool apirak

ซ้อม

ออกแบบ calendar สำหรับ Sprint3r

เตรียม Persona ให้ (0 min)

วัยกลางคน 30-45
รักธรรมชาติ แต่ทำงานในเมือง

#วันที่ 2: Design Process & Test

##10:00 - 12:00

###แนวคิดการออกแบบ

ในวันแรกผู้เรียนได้ทดลองออกแบบโปรแกรมโดยมีเพียงทฤษฎีเบื้องต้น แต่ยังขาดการออกแบบโปรแกรมอย่างเป็นขั้นเป็นตอน ในช่วงของแนวคิดการออกแบบ จะแบ่งหัวข้อเป็น 5 ส่วน

Concept : บอกถึงสิ่งที่สำคัญในการวางแนวคิดของโปรแกรม ว่าผู้ใช้แต่ละกลุ่มนั้นต้องการโปรแกรมที่มีคุณลักษณะไม่เหมือนกัน อย่างไร
Workflow : แนวทางในการร้อยเรื่องราวของโปรแกรมเพื่อควบคุมให้ผู้ใช้คาดเดาหรือคาดหวังอย่างที่โปรแกรมต้องการ

#วันที่ 1: User Experience Fundamental

##10:00 - 12:00

###ทำความเข้าใจ User eXperience

อธิบายถึงความหมายของ UX และพิจารณาความแตกต่างระหว่าง UX UI และ Graphic Design โดยผู้เข้าร่วมการอบรมจะได้ทดลองอธิบายโปรแกรมตัวอย่างว่าได้รับ Experience แบบใด

###เรียนรู้กระบวนการและพื้นฐานสำคัญ

	import { colorToRgb, rgbToHex } from "./colorUtility";

	function convertToDegree(matrix:Transform):number {
	const values = [...matrix[0], ...matrix[1]];
	const a = values[0];
	const b = values[1];
	const angle = Number(((Math.atan2(b, a) * (180 / Math.PI)) + 90).toFixed(2));

	return angle <= 0 ? angle + 360 : angle;
	}

	" Start NERDTree when Vim is started without file arguments.
	autocmd StdinReadPre * let s:std_in=1
	autocmd VimEnter * if argc() == 0 && !exists('s:std_in') \| NERDTree \| endif

	" Exit Vim if NERDTree is the only window remaining in the only tab.
	autocmd BufEnter * if tabpagenr('$') == 1 && winnr('$') == 1 && exists('b:NERDTree') && b:NERDTree.isTabTree() \| quit \| endif

	syntax on
	set rtp+=/usr/local/opt/fzf

	call plug#begin()

	" File Explorer NERDtree "
	Plug 'preservim/nerdtree'

	" Fast file search with crtl-p
	Plug 'ctrlpvim/ctrlp.vim'

	// Figma Plugin API version 1, update 14

	declare global {
	// Global variable with Figma's plugin API.
	const figma: PluginAPI
	const __html__: string

	interface PluginAPI {
	readonly apiVersion: "1.0.0"
	readonly command: string

	const rgbToHex = (r, g, b) =>
	'#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

	const nodes = figma.currentPage.findAll(node => node.type === "TEXT" && node.name.charAt(0) === "#");

	nodes.forEach(node => {
	let nodeId = RegExp(/^#(.*)/).exec(node.name)[1]
	let aNode = <RectangleNode> figma.getNodeById(nodeId);

	if (aNode) {

	curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
	https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

	#!/usr/bin/ruby
	# encoding: utf-8
	#
	# Updated 2017-10-25:
	# - Defaults to large size (512)
	# - If ImageMagick is installed:
	# - rounds the corners (copped from @bradjasper, https://github.com/bradjasper/Download-iTunes-Icon/blob/master/itunesicon.rb)
	# - replace original with rounded version, converting to png if necessary
	#
	# Retrieve an iOS app icon at the highest available resolution