[seminar: my note] 2015 크리에이티브 디렉터 세미나 (translation:Creative Director Seminar 2015)

Subject	2015 크리에이티브 디렉터 세미나 (translation:Creative Director Seminar 2015)
Place	Seoul Women’s Plaza, Seoul
Time	June 10-11, 2015 10:00~18:00
Speaker	link
Host	KIPFA (Korea Internet Professionals Association)
Focus	branding, user research, font, pixel, portfolio

1. Lesson
1. 한국인이 바라본 중국 인터넷 기업 알리바바의 디자인본부 이모저모 (translation: A Korean Person’s Experience with Design Center of Alibaba, a Chinese Internet Company) [Min Ah Shin@Alibaba’s Taobao, Design Expert]
1. Chinese users: people in China are very skeptical about new things
2. user research at Taobao: e.g. visit a town and spend a whole month with users to conduct research

2. 경험을 이끌어 내는 디자인 (translation: Experience Generating Design [Uzin Hwang@Interbrand, Executive Creative Director]
1. Brand is about building relationship (e.g. Brompton)
2. A design change can bring behavior change (e.g. Philip’s MRI for kids: c.f. super formula for chemotherapy drugs)
3. Reinventing brand can transform old image to be new (e.g. Yellow Pages)
4. Any organization’s Identity can be re-branded for a whole new image change (e.g. Hansol Museum)
5. Interbrand experience framework has three parts: 1. insights & needs 2. idea and true 3. better, real, and shared
6. new term: wordmark, hero typeface, motif, element

3. 디자이너 해외진출. 무조건 + (translation: Should Designers Work Aboard? Absolutely!) [Younghee Jo@NINEFIVE, CEO]
1. Design firms in America have feedback-friendly culture and so should you!
2. Consider implementing golden ratio in design
3. portfolio: have a good layout
4. resume: make your resume fit within 1 page; consider putting communication, job relevance, teamwork, creativity, and proactiveness as strengths

4. 픽셀 시대의 종말 (translation: The End of Pixel Era) [Byungsam Hwang@D.FY, CEO]
1. monitor
1. history: green -> orange -> white (e.g. Apple) -> color -> RGB -> anti-alias (9.6 pixel- Helvetica, 8.5 pixel) -> ClearType (drawing curve pretty well) -> retina 326 pixel? (according to Steve Jobs, human eyes can’t tell the difference above 300 pixel)
2. c.f. resolution 1920 x 1080 @216 dpi ; 5 x 5 (8 bit) ---(x4)---> 20 x 20 (32 bit, retina)
3. for accurate color representation, consider using dual monitor (one for retina and another for dot color)
2. website/app design
1. layout: 12 columns
2. trend: flexible/fluid/liquid/elastic (e.g. a menu can be added as browser width gets wider)-> responsive (e.g. designers prepared four sets of images for an Innocean website)
3. should designers prepare many sets of images to suit various screensize width?
1. e.g. for Apple devices, 768 (on iPad’s portrait mode)-> 1024 (on iPad’s landscape mode) -> 1440 (on MacBook Air) -> 1920 (on iMac and MacBook Pro) -> 2560 (on iMac and MacBook Pro) -> 5120 (on iMac with Retina 5K display)
2. c.f. 320 (iPhone 5), 414 (iPhone 6 Plus), 360 (Galaxy Nexus)
4. design metaphor change: skeuomorphism -> flat (c.f. realtime blur, translucent)
5. typography: Apple SD Neo Sans -> 윤고딕 700 (or 본고딕 Light) -> Neo 고딕 (DM) system font?
6. copywriting: consider using meaningful/effective adverbs (e.g. Apple’s Korean site uses adverbs quite effectively to explain insight for products)

5. Digital Re-branding / EXR, Lexus [Juhwan Yi@ Designfever, director]
1. new term: 시간 masking, manifesto, mood board

2. personal takeaway
1. read this to understand difference between DPI, Resolution and Print vs. Web Images

[personal UX/UI review] PowerMockup by Wulfsoft

case: PowerMockup by Wulfsoft

positive: searchable module UI in the figure above, some updated wireframe shapes (e.g. Android Lollipop on phone, Bootstrap), easy drag and drop for fast and convenient wireframe design

c.f. 1. The tool doesn't include interaction feature. 2. No iPad or Android tablet mock-up included in the tool. 3. The tool is only available on Windows. 

[edu: my note] PM (product management) Camp course at Fast Campus

Subject	PM Camp
Place	Fast Campus nearby Sinsa Station
Time	12:00PM ~ 6:00PM on Saturdays, 8:00PM ~ 11:00PM on Wednesdays 5/9/2015 ~ 7/15/2015 (10 weeks or 90 hours)
Speaker	link
Host	N/A
Focus	product management overview, development, UX, analytics, project management method, maintenance

프로덕트 매니지먼트의 기초 다지기

• 제품/서비스 기획의 역할과 변화
• 조직 형태에 따른 업무 역할 이해
• 기획 업무를 위한 기본 지식
• 비즈니스 모델의 기초 이해와 실습
• 필요한 방법론 살펴보기

1. Understanding Your Business and Market [Sunghwan Bae@Strategy Team, SK planet]
1. lesson
1. bottomline: as a PM, combine quantitative and qualitative analysis, play a role to reveal blindside for designers and developers
2. todo:
1. draw business model canvas (9 boxes; finish within 3 hrs) and lean canvas (metrics, competitor analysis included on top of business model canvas; finish within 15 min) and show the canvases to designers and developers
2. prepare scaled up business by knowing the number of workforce for the future
3. support designers and developers with what they cannot do e.g. data
4. assist syncing up between designers and developers
5. find selling points for sales and communicate with sales team
6. consistently monitor and provide feedback internally to improve service
7. ideas to follow
1. how to make (aka old model to lose)
1. business model: business (business model, competitor, strategic partner), technology (base technology, platform), customer (needs, pattern)
2. what to make (aka new model to follow)
1. think customer first, then business and technology instead of the other way around
8. break myths with below strategy
1. do marketing first then register the app
2. be careful in adding one input field which causes losing customer conversion rate by 30%
3. add feature (or benefit) one by one instead of all at the same time
9. always know trend and ask the right question
10. shift paradigm from product development to customer development
11. qualitative research: invite and conduct research on users in both extreme loyal and not-loyal
12. know how to do front-end development (HTML, CSS, JS, jQuery)
3. comprehend The Project Management Knowledge Areas from “A Guide to the Project Management Body of Knowledge” by PMI Standards Committee (link)
1. integration management
2. scope management
3. time management: launch on time, define resource and time
4. cost management
5. quality management: quality management has close relationship with time management
6. human resource management
7. communications management: sync-up with stakeholders
8. risk management: consider qualitative/quantitative data analysis
9. procurement management
4. view and approach
1. characteristics of professional goals (c.f. consider OKR (objective and key result))
1. easy words used
2. clear to understand
3. metrics included
2. lean approach: ideas-> build-> product-> measure-> data-> learn-> ideas to create MVP (minimum viable product)
5. strategy: basic direction to build product and service
1. think of innovation because competition focuses on winning but innovation focuses on both winning and performance (e.g. from 9.9 to 10)
2. think what values you are providing
3. double-check assumptions and reject wrong ones
6. growth hacking
1. growth hacking: a marketing technique developed by technology startups which uses creativity, analytical thinking, and social metrics to sell products and gain exposure <source: Wikipedia>
2. growth hacker: nexus of analytics, marketing, UX
3. method: AARRR metrics, funnel analysis, cohort analysis, SEO, A/B Test
7. service design
8. business model blueprint
1. 3 characteristics
1. differentiation
2. value proposition: values providing to stakeholders (e.g. supplier, platform, etc.)
3. selection and focus: simplify business with core features
2. c.f. new business model
1. the long tail: e.g. Netflix, eBay
2. multi-sided platform: Google
3. free as a business model: Gillette, Flicker, Metro news, Evernote
4. open business model: P&G’s R&D, GSK

2. personal takeaway
1. study design thinking (c.f. link), business model canvas, lean canvas, The Project Management Knowledge Areas from “A Guide to the Project Management Body of Knowledge” by PMI Standards Committee
2. prepare for scaled up business
3. read 브릴리언트
4. participate 김진영 대표’s A and B course

프로덕트 매니지먼트 개론 #2

시장과 서비스 관점에서 프로덕트 관리 시장의 변화와 디자인 사고 관점의 접근 프로세스의 이해와 정성적 조사 개요

2. Product Management in the Perspective of Market and Service [Sunghwan Bae@Strategy Team, SK planet]
1. lesson
1. business model canvas/lean canvas
1. business model trends: modeling approach is more important than business planning
2. service-dominant logic: instead of business and product, what values customers need became more important (<- design thinking); fast prototyping with decision-making
2. lean canvas model approach (c.f. beecanvas tool: link)
1. create the model within 15 min in one sitting
2. list up each category based on now
3. create user story when all members are present
1. ask the most needed two features
2. categorize must-have, should-have, could-have, won’t-have
3. determine acceptance criteria
4. understand quantitative and qualitative research
1. purpose: find issue

2. personal takeaway
1. study
1. Maker Faire (link)
2. Solid Conference (link)
3. Joi Ito: Want to innovate? Become a "now-ist” (link)
1. Demo or Die

2주차

5. 16 토

개발 #1 – 알고 보면 쉬운 개발 용어

다양한 개발 용어를 이해해 보자 IP, DNS, Host, Protocol, HTTP Front-end, Back-end, Server/Client, 자주 사용하는 프로그래밍 언어, Ajax

김태곤

3. Getting familiar with development terms [Taegon Kim@Fancy.com, software engineer]
1. lesson
1. communication tips
1. use numbers instead of descriptive wordings: e.g. move to the right by 15 px vs. move a little to the right
2. provide detailed and tangible explanation instead of ambiguous and intangible: e.g. latency when pressing on Submit button vs. something wrong with text entry vs.
3. use png instead of jpg (reason: difficult to pinpoint exact color)
4. consider big picture (e.g. feasibility, resource, cost) first before making a request
5. tell animation name and CSS code (link) and mouse over effect (link)
6. before asking questions:
1. before asking any questions, read previous conversation history
2. ask how long will it take to finish a task instead of you can finish this within short period of time
3. c.f. read Joel on Software (link, amazon link)
2. image
1. vector vs. bitmap (raster): vector (e.g. svg, ai format; icon image), bitmap (png, jpg, gif)
2. 1 pixel: combination of red, green, blue
3. color: 0~255 color
4. #0000FF: first 00 (red), second 00, last FF, requiring 3 byte
5. to express transparency, add another byte: e.g. rgba (255, 255, 255, 0.7)
6. icon font: link
3. the Internet and Web
1. IP address
2. localhost: 127.0.0.1 (aka my computer)
3. tracking command: e.g. dig taegon.kim +trace
4. server-client: relative concept because the server can become a client
4. developer
1. role
1. client side: web publisher, javascript
2. server side:web application developer, DBA (database administrator), SE (system engineer)
2. programming
1. application code by condition
2. repetitive code
3. clustered code
3. classification of programming language
1. compile language
1. server side: C/C++, Java
2. client side: n/a
2. interpreter language
1. server side: Python, PHP, Ruby
2. client side: JavaScript
4. library and framework
1. license
1. GPL: need to make entire codes open source if used any (e.g. Linux related codes)
2. LGPL: need to make codes regionally open source where modification happened
3. BSD, MIT: no restriction in usage
5. server service
1. some concept: vertical scaling, sharding
2. service: Baas, Paas, microservice (e.g. address service, paygate service)
6. tool: e.g. asana.com, slack.com
7. cookie: data leaving a mark on server
8. c.f. http: brings header and body info on network
9. AJAX (asynchronous JavaScript and XML)
1. can do: text data, file upload (only in recent browsers)
1. XHR (XMLHttpRequest) 2: allowing file uploads, auto-save
2. cannot do: ?
3. AJAX usage: check status at XHR on Chrome browser
10. JSON (JavaScript Object Notation): A representation of structured data like XML; great for both server and client side developers
11. API (Application Programming Interface): point of useful chunk of libraries
12. XML (Extensible Markup Language): markup language that defines a set of rules for encoding documents in a format which is both human-readable and machine-readable.
13. SPA (Single-Page Application): a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application <source: Wikipedia>
14. DOM (Document Object Model): document is referring to HTML doc, used in JavaScript
1. DOM API: to make web page more dynamic

2. personal takeaway
1. understand rudimentary concepts to build web service

5. 20 수

개발 #2 – 개발 환경을 구축하고 맛보기

개발에 필요한 어플리케이션을 설치하고 간단히 사용하기 GUI, CUI, Shell, Permission, Process, Thread SVC, GitHub, Wiki, Issue Tracker, Markdown

4. Terms related to development environment [Taegon Kim@Fancy.com, software engineer]
1. lesson
1. CUI: character user interface (aka CLI (command-line interface))
2. shell: usually referring to Linux CUI e.g. bash csh
3. SVC (source version control): aka SCM (source code management or software configuration management)
4. tagging: nicknaming for a code of a specific time
5. branch: features not introducing yet e.g. an experimental feature
6. conflict: problematic situation occurred when diffs were merging
7. resolve: solving the conflict
8. Git (distributed Git development) over SVN (centralized SVN development) (source: link)
9. project hosting service: GitHub, Bitbucket
10. markdown:
1. syntax: e.g. # main title, ## subtitle, ### sub-subtitle, *italics*, **bold**, ~strikethrough~
11. fork: In software engineering, a project fork happens when developers take a copy of source code from one software package and start independent development on it, creating a distinct and separate piece of software. (source: Wikipedia)
12. CDN (content delivery network): e.g. CloudFlare

2. personal takeaway
1. try using Bracket, Wrike