Sunday, November 22, 2015
Wednesday, November 18, 2015
Thursday, November 12, 2015
Free Photograph
1. LITTLE VISUALS ( littlevisuals.co/ )
2. UNSPLASH ( unsplash.com/ )
3. Picjumbo ( picjumbo.com/ )
4.GRATISOGRAPHY ( gratisography.com/ )
5.FREE REFE MOBILE PHOTO ( getrefe.tumblr.com/ )
6. Splitshire ( splitshire.com/ )
7. New Old Stock ( nos.twnsnd.co/ )
8. Function free photos ( wefunction.com/category/free-photos/ )
9. Superfamous ( http://images.superfamous.com/)
10. IM Free ( imcreator.com/free )
Monday, November 9, 2015
Assignments by 11/10
1. Revised Research Presentation (update VISUALLY) and add more researches if you need.
2. Create a suggested Flowchart (save as PDF and bring in class printed version)
3. Paper Prototype:
Posting all into Google Drive
2. Create a suggested Flowchart (save as PDF and bring in class printed version)
3. Paper Prototype:
- 10-15 screens (wireframe: computer or pen, text should be readable on your sketch)
- Taking photos: a process of your group discussion.
- Bring actual "individual paper Prototype" in class.
Posting all into Google Drive
Friday, November 6, 2015
Inspiration: Where good ideas come from:
13Design giants (13 talks)
From graphics to products, check out these talks by some of the world's greatest designers.
Curated by TED
UI: GIF Animation
UI: GIF Animation
Left : http://dribbble.com/shots/1078102-Sidebar-animationRIght : http://dribbble.com/shots/1343162-Gif-Timeline-App
Left : http://dribbble.com/shots/1239862-iPad-Mini-Showcase-TemplateRight : http://dribbble.com/shots/969876-Switch-gif
Left : http://dribbble.com/shots/1280333-iWatch-Mock-UpRight : http://dribbble.com/shots/1323294-Sange-watch-02-GIF
Left : http://dribbble.com/shots/1078102-Sidebar-animationRIght : http://dribbble.com/shots/1343162-Gif-Timeline-App Left : http://dribbble.com/shots/1239862-iPad-Mini-Showcase-TemplateRight : http://dribbble.com/shots/969876-Switch-gif Left : http://dribbble.com/shots/1280333-iWatch-Mock-UpRight : http://dribbble.com/shots/1323294-Sange-watch-02-GIF
From idea to core prototype in hours
From idea to core prototype in hours, not weeks
Note: Neila Rey is awesome, but I can’t use her copyright. The original graphics created with this post have been removed. The design principles described in this post still apply, even though the mock-ups provided no longer reflect Neila’s workouts.I’ve been working out every day with these great at-home workout plans from Neila Rey.One day between exercises, I found it annoying that I had to keep getting up and looking at my laptop to see the next step. This evolved into an idea to create a fitness app that takes you through your exercises step by step.
This is how I prototyped the core experience in a matter of hours:
Idea Dump: Spend some time sketching and brainstorming. Start over often. By my third time drawing out the app I had a strong sense of what it needed to be. Re-drawing your ideas helps you streamline what’s important, and omit what isn’t.
1. Choose Workout, 2. Do Workout.
Nothing more, nothing less.
Nothing more, nothing less.
Define the Mission: Define the ‘most important thing’ the product does. Make doing that one thing as simple as possible for the user. That’s what we’ll be prototyping here. (The main point of this app is to allow/help the user DO WORKOUTS)
User Flows: Map out the user flows in Sketch, Illustrator, or with detailed sketches, work out any obvious UX errors. Remember: make it easy for the user to do one thing. This simplifies your focus, creates clarity in your product, and most importantly allows you to finish the work that you start.
I used Sketch to map out the core interactions.
Visual Design: Open up Photoshop and create some high-fi mockups. Keep the visual design to a minimum. Focus on clarity. Use hierarchy (and perhaps some color!) to create a singular “do this next” feel for your screens. In my example, the user is supposed to *wait* and stretch until the timer runs out.
Make Interactive & Share: Once you have your screens, open up InvisionApp, Flinto, or POP, and upload your screenshots! Send it to friends, colleagues, your cat, anybody who can give you feedback.
That’s it! Is it perfect? No. But that’s not the point. Relish in the fact that you’ve put together something faster than you thought you could. Although it isn’t perfect, your product will improve through feedback from users. The purpose of working in this way is to make stuff. The purpose of making stuff is to get feedback and then make it better!
But wait— you’re not done yet. Building prototypes quickly doesn’t count for jack if you don’t take the time to actually listen, learn, and improve your product through the feedback process. The process for collecting, organizing, and integrating feedback is the topic for another post.
Mayo Clinic - Physicians on Designers
http://nexus.som.yale.edu/design-mayo/?q=node%2F104
Physicians and Designers
SPARC and the Center for Innovation brought together physicians with designers, an unlikely marriage that could produce at some times excitement and at other times confusion.
Physicians were deeply guided by tradition, and because they bore the responsibility for the patient's life and well-being, they were as a group risk-averse. Physicians were scientists who needed to see data and proof before trying something new. This conservative culture affected doctors' willingness to try not only new drugs and treatments but also new administrative procedures and educational methods.
Designers, on the other hand, operated in a more qualitative world. They experimented freely and preferred "rapid prototyping" to careful proof. They wished to see their ideas applied in real-world settings, but they shared with fine artists a love of creativity and risk-taking.
CFI staff from both cultures admitted that they faced challenges in communicating with each other, but they also believed that it was the differences that enabled innovation. "It's a match made in heaven," said one physician.
Thursday, November 5, 2015
Service Design: RKS Design
cAir - redefining air travel for families from RKS Design on Vimeo.
cAir (pronounced “care”) is a service design concept that eases the burden of air travel for families, making the journey more enjoyable for everyone. A proactive initiative by the strategic design consultancy RKS, cAir was a venture built organically from the ground up. They architected a new flying experience based on the real-life challenges of family travelers, a stark departure and inspiration for an industry traditionally focused on efficiency.
http://www.rksdesign.com
Monday, November 2, 2015
Apple Market share
http://fortune.com/2015/08/09/apple-android-comscore-asymco/
Chart: Android losing ground to Apple
by Philip Elmer-DeWitt
@philiped
AUGUST 9, 2015, 6:13 PM EST
Smartphone OEM Market Share: 190.3 million people in the U.S. owned smartphones (76.7 percent mobile market penetration) during the three months ending in June. Apple ranked as the top OEM with 44.1 percent of U.S. smartphone subscribers (up 1.5 percentage points from March). Samsung ranked second with 28.1 percent market share, followed by LG with 8.3 percent, Motorola with 4.9 percent and HTC with 3.4 percent.
Chart: Android losing ground to Apple
by Philip Elmer-DeWitt
@philiped
AUGUST 9, 2015, 6:13 PM EST
Smartphone OEM Market Share: 190.3 million people in the U.S. owned smartphones (76.7 percent mobile market penetration) during the three months ending in June. Apple ranked as the top OEM with 44.1 percent of U.S. smartphone subscribers (up 1.5 percentage points from March). Samsung ranked second with 28.1 percent market share, followed by LG with 8.3 percent, Motorola with 4.9 percent and HTC with 3.4 percent.
Wednesday, October 28, 2015
iOS Human Interface Guidelines
iOS Human Interface Guidelines:
- UI Design Basic. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556-CH66-SW1
- Design Strategies
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Principles.html#//apple_ref/doc/uid/TP40006556-CH4-SW1 - UI Elements
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Bars.html#//apple_ref/doc/uid/TP40006556-CH12-SW1 - Icon and Image Design
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1
The System Font, SF, for OS X, iOS, watchOS, and tvOS.
App Definition Statement [ADS]
Apps – 5 Steps from Idea to Definition Statement:
http://zeroheroblog.com/business/iphone-or-ipad-app-5-steps-from-idea-to-definition-statementApp Definition Statement and Core App Metrics
http://www.quesucede.com/page/show/id/app-definition-statement
HTML5 Basic
http://www.littlewebhut.com/html5/the_basics/
Video
Part 1. https://www.youtube.com/watch?v=9gTw2EDkaDQ
Part 2. https://www.youtube.com/watch?v=YcApt9RgiT0
Part 3. https://www.youtube.com/watch?v=CGSdK7FI9MY
Part 4. https://www.youtube.com/watch?v=4I1WgJz_lmA
Other Resources.
https://external-production.codecademy.com/learn/web
http://www.w3schools.com/html/
Video
Part 1. https://www.youtube.com/watch?v=9gTw2EDkaDQ
Part 2. https://www.youtube.com/watch?v=YcApt9RgiT0
Part 3. https://www.youtube.com/watch?v=CGSdK7FI9MY
Part 4. https://www.youtube.com/watch?v=4I1WgJz_lmA
Other Resources.
https://external-production.codecademy.com/learn/web
http://www.w3schools.com/html/
Tuesday, October 27, 2015
Tuesday, October 13, 2015
All list of Assignment by 10/22/TH
1. Response paper: AIGA Event or Video clip
2. Group Discussion Report (meet on 10/20/Tuesday)
3. Reading Text Book
4. Layout all contents in InDesign (text and images)
5. Revised Final Cover Design (you choose numbers)
2. Group Discussion Report (meet on 10/20/Tuesday)
3. Reading Text Book
4. Layout all contents in InDesign (text and images)
5. Revised Final Cover Design (you choose numbers)
Monday, October 12, 2015
Convert smart quotes
How to Convert quotation InDesign to Dreaweaver automatically?
1. copy Content Texts in InDesign
2. paste special into Dreamweaver HTML documents
Characters in HTML
Kindle HTML
HTML Tags
HTML Basic - 4 Examples [Headings, Paragraphs, Links, Images]
http://www.w3schools.com/html/html_primary.asp
HTML Image <img /> Tag
http://www.w3schools.com/tags/tag_img.asp
HTML <tt> <i> <b> <big> <small> Tags
http://www.w3schools.com/tags/tag_font_style.asp
HTML Subscript <sub> and <sup> Tags
http://www.w3schools.com/tags/tag_sup.asp
HTML "blockquote" Tag
http://www.w3schools.com/tags/tag_blockquote.asp
HTML <a> name Attribute (TOC) and Links
http://www.w3schools.com/tags/att_a_name.asp
http://www.w3schools.com/html/html_links.asp
CSS TEXT-INDENT
http://www.w3schools.com/cssref/pr_text_text-indent.asp
Page "Height"
<p align="left" height="70%" width="0">
HTML Character-sets:
http://www.w3schools.com/tags/ref_entities.asp
NUMBER NAME DESCRIPTION
" " " quotation mark
' ' ' apostrophe
& & & ampersand
© © © copyright
  non-breaking space
@ @ at Symbol
HTML <meta> Tag [Describe metadata]
http://www.w3schools.com/tags/tag_meta.asp
XHTML 1.0 Reference [Ordered by Function]
http://www.w3schools.com/tags/ref_byfunc.asp
Kindle HTML tags
http://kindleformatting.com/book/files/KindleHTMLtags.pdf
http://www.w3schools.com/html/html_primary.asp
HTML Image <img /> Tag
http://www.w3schools.com/tags/tag_img.asp
HTML <tt> <i> <b> <big> <small> Tags
http://www.w3schools.com/tags/tag_font_style.asp
HTML Subscript <sub> and <sup> Tags
http://www.w3schools.com/tags/tag_sup.asp
HTML "blockquote" Tag
http://www.w3schools.com/tags/tag_blockquote.asp
HTML <a> name Attribute (TOC) and Links
http://www.w3schools.com/tags/att_a_name.asp
http://www.w3schools.com/html/html_links.asp
CSS TEXT-INDENT
http://www.w3schools.com/cssref/pr_text_text-indent.asp
Page "Height"
<p align="left" height="70%" width="0">
HTML Character-sets:
http://www.w3schools.com/tags/ref_entities.asp
NUMBER NAME DESCRIPTION
" " " quotation mark
' ' ' apostrophe
& & & ampersand
© © © copyright
  non-breaking space
@ @ at Symbol
Page break: <mbp:pagebreak/>
HTML <meta> Tag [Describe metadata]
http://www.w3schools.com/tags/tag_meta.asp
XHTML 1.0 Reference [Ordered by Function]
http://www.w3schools.com/tags/ref_byfunc.asp
Kindle HTML tags
http://kindleformatting.com/book/files/KindleHTMLtags.pdf
InDesign Inserting Text (automatically flow)
Inserting Text
- Go to the File menu and select Place > Find text file.
- Navigate to your document and click Open. Your cursor turns into the Place icon (). Click in your document where you'd like the text to be placed – the text box will fill the spaces between the margins. Remember, you can always move and resize it.
- If you want the text to automatically flow to the next column or page, hold down the Shiftkey on the keyboard as you place your text and a slightly different icon will appear (). Now pages will be automatically created as needed.
- If you hold down the Alt key instead, you will still get the autoflow icon (), but it will not automatically create new pages. As you click on your document, if there is more text, the icon will remain. Click again somewhere else to place the rest of the text.
- You can also designate the size of your text block by clicking and dragging a square as you place the text.
- Note that if you place text from Word, the Word styles will carry over and can be edited as described in the Formatting Text section below.
InDesign Document Size
Tuesday, October 6, 2015
Assignment by 10/08 & 10/13
Assignment by 10/08/th (No class)
Refined Cover Sketches:
Do group discussion and critique:
Assignment by 10/13/t
Finalized cover design:
Refined Cover Sketches:
- 2 concepts, total 8 designs (PDF)
Refined Contents Design:
- 8 computer sketches (PDF)
Book Text (at least 30–50 pages, you can do more than 50 pages)
- .doc or .txt (file format)
Do group discussion and critique:
- meeting about one hour.
- discuss with your about your cover design and contents design.
Assignment by 10/13/t
Finalized cover design:
- 4 final designs (1 concept)
Finalized contents design:
- 8 final designs
Reporting Group Discussion:
- your name
- Who attended in the meeting
- What did you learn from meeting?
- How to develop your design in next step?
- one page (80–120 words)
- save as PDF
* All Assignment are submitting through GOOGLE DRIVE. If not working Google Drive then just send me a link where saved your files on cloud.
Monday, October 5, 2015
Response Paper by 10/22/TH
Pick one your favorite event from lists: (I highly recommend you attend a conference)
1. Attending AIGA Events in Portland
2. Watch video clip
* How to write up & submit your report:
Submit by PDF format into Class Google Drive
- 2 pages (double space)
- Add your name and class name
- What did you learn from lecture (or video)?
- Get Inspired? You may include images (speaker’s work, slides, etc.)
- I highly recommend use InDesign program when you write the paper.
*If you didn’t submit your paper on time, automatically marked down as absence for 10/20 attendance, and missed class assignment as well.
Thursday, October 1, 2015
Assignment by 10/06
1. Cover Computer Sketches [Document size: 824 x 1200 pixel (72ppi)]
Contents design means inside of book images related with story. See the example below.
> Example of Final Content Design
- Pick (2-4) your best concepts from pencil sketches > Generated by computer (illustrator or photoshop)
- Total 10 sketches: (variations are allow for counting)
- SAVE as PDF (combined single PDF) > Save all at Google Drive
Contents design means inside of book images related with story. See the example below.
- Rough Thumbnails (12 sketches)
- Drawing on Letter Size paper
- Scan > Save it at Google Drive
* Submit Assignments (1,2) in Class Google Drive
- Folder name: GD328_Shared > P1_assignment
- Naming: When you save your files into Google Drive, please follow this direction for naming.
- Naming: First_Lastname.pdf
Tuesday, September 29, 2015
Assignment by 10/1
1. Research Book Covers or inspirations. (Printed mood board - 8.5x11 or 11x17)
2. Research Content Design (what you picked - letter size)
3. 14 Sketches (2 or 4 sketches on Letter size paper)
2. Research Content Design (what you picked - letter size)
- title of book
- author
- main story
3. 14 Sketches (2 or 4 sketches on Letter size paper)
Monday, September 28, 2015
DESIGN WEEK IN PORTLAND
http://www.designweekportland.com/
Subscribe to:
Posts (Atom)