informationdesignjwa187 - Tumblr blog

informationdesignjwa187 · 7 years ago

Text

Idea Journal #4

By Jiayi Wei

Reflections:

Decision point: The point that a visitor will have questions, and consider about how the right information can be offered to the person can.

http://www.mike-barker.com/school/infodesign/

Different users = different needs

Understand the different needs of the different audience.

Identified the different stages of a journey and describe what is required to support effective navigation as follows:

•Planning. These are the tools that allow people to plan a trip. They provide options regarding various travel modes. They are accessed via printed or digital media.

https://ginza.design/en/

•Moving. These are the tools that allow people to make decisions along the way. They provide orientation, direction, and identification information and are located at key landmarks, focal points, decision points and areas of rest.

http://www.nadadogan-dizajn.hr/nada-dogan-dizajn-komunikacijski-dizajn__2-6--1---en.htm

•Changing. These are the tools that allow people to make decisions about their journey when changing from one mode to another. These tools are necessary at interchanges such as subway stations and bus stops.

http://vancouver.citybytrain.com/i-htm/

Guiding principles

A set of principles provides the framework for the system and helps to guide the design of its components and their functions.

•A unified language of wayfinding: The wayfinding elements should be consistent so that people have a predictable, seamless and comprehensible experience of the city.

•Wayfinding data organized: The system should be built on a foundation of information that is stored and distributed digitally. Individual agencies and neighborhoods will update information in the same centralized database and will use the same graphic standards in creating maps.

•Wayfinding is more than signs: The system will include a cohesive family of wayfinding elements including fixed signage, publications, and digital tools.

•Information when and where you need it: The system must be user-centered so as to provide wayfinding information at key points along the way. Information should be available both while planning a trip and while conducting it.

•Better awareness of the city’s riches: A broad family of elements provides visitors and residents alike the confidence to wander and explore.

•City-wide standards, allowing for local identity: The elements of the system must convey a single image of a unified city program, yet have the flexibility to respond to varying conditions throughout the city.

http://www.minaletattersfield.com/en/post/1772/leading-the-way

Typologies:

https://www.pinterest.com/pin/217861700705381692/

https://janetdowle.wordpress.com/2015/10/29/washington-and-how-it-feels-to-be-an-ant/

https://s-media-cache-ak0.pinimg.com/736x/91/14/0b/91140bd4deba2e97eff3fba56f457a24.jpg

https://www.rgd.ca/2014/12/16/ttc-signage-system-improves-wayfinding-for-third-largest-transportation-system-in-north-america.php

Analyses:

https://www.pinterest.com/pin/265149496783952963/

The Alignment of the sign plate is great, though it might be better to move the arrow sign of the restaurant icon a bit right. The line element is used to separate the graphic and words, though I think is a bit necessary. I really like the color of the design, it makes the contrast very effective, and it resonates well with another signage element in the space. Also, the color separated also illustrate the alignment principle. It is obvious that the form of a shape is consistent through various sign poles, plates and even the design of the hallway.

http://buzzer.translink.ca/page/3/?s=bus+route+buzz

The highlight of the sign is the blue block, in which the functionality and the stop number is shown, and follow are the bus number and destination, lastly the contact info of Translink. It effectively shows a visual hierarchy. A great use of white space, which makes the contrast obvious. Using different color block is a subtle way of line element using, though I think other underlines are very unessasery.

http://www.designboom.com/architecture/ralston-bau-signage-design-for-government-building-norway/

The color use is very smart, it not only provides contrast for all the text, and it also brings in the line element as well as alignment, which is a great way orientating for different destinations. The size though doesn’t have much variation, but consider there is not much hierarchy for the information it is good enough. The use of symbols is great as they are symbols brought from the logos of the destination, which is easy to understand.

0 notes

informationdesignjwa187 · 7 years ago

Text

Idea Journal #3

By Jiayi Wei

https://npengage.com/nonprofit-fundraising/nonprofit-web-design-process-part-sitemaps/

https://www.shutterstock.com/zh/image-vector/flat-wireframe-design-style-vector-illustration-354461780

https://www.shutterstock.com/zh/image-vector/flat-design-style-modern-vector-illustration-174624449

https://emplus.net/print-identity/

https://www.pinterest.com/pin/262827328228228225/?lp=true

https://www.pinterest.com/pin/453174781224513908/?lp=true

https://www.pinterest.com/pin/453174781224117308/

https://www.pinterest.com/pin/446700856762077828/

https://cias.rit.edu/faculty-staff/159/student/734

http://velluminous.org/portfolio/detail/?35

http://cargocollective.com/designinsurgency/Changi-Airport-Information-Design

http://cargocollective.com/jameskuo/Environmental-Graphic-Design

https://www.pinterest.com/pin/426082814732922754/

0 notes

informationdesignjwa187 · 7 years ago

Text

Idea Journal #2

By Jiayi Wei

Reflections:

Color is extremely important in information design, color could provide a sense of wayfinding, allowing readers to scan text and quickly isolate elements such as subheads and bullets.

http://www.printmag.com/featured/beauty-vs-usability-using-subway-maps-to-explore-information-design/

http://www.packandbrand.co.uk/freelance-packaging-designer/project/electronics-packaging-design/

http://thetechgeek.com/jabra-revo/

Hierarchy can express by means of size and intensity and distinguishing variables by means of color and form.

http://cline-company.com/projects/sacramento-garden-packaging-design/

Type styling can be used to differentiate types of information and building a sense of hierarchy.

Various Weight and Scale can be used to prioritize certain pieces of information.

http://www.514pixels.com/portfolioPackaging.html

Structure: Grids and white space can help to navigate the eye flow in complex information for users.

https://www.sribu.com/en/packaging-design/technology

Grouping can help the reader to locate the information that they want quickly. Grouping of information can also signal hierarchies especially when using changes in color weight, and scale at the same time.

https://www.pinterest.com/pin/136726538662825724/

Graphic elements: Lines, rules, bullets and other devices can be used to attract the eye, also provide direction and punctuation.

http://www.514pixels.com/portfolioPackaging.html

Imagery: text and image combination is more powerful. People don’t like to go through too many paragraphs.

https://www.pinterest.com/pin/51017408257868521/

Choosing appropriate media:

It is not just about choosing what the designers like, depending on the project, information may need to be conveyed across different platforms, via various media, there might need to be multiple ways provided for delivering the data for different materials.

The difference between print and digital:

When transferring information from a printed medium onto a screen, the navigation, quality and size of rendering, along with considerations of interactivity, should be considered.

http://glasscanopy.com/whats-difference-rgb-cmyk-spot-pms-colors/

An article about the difference between print and digital:

https://www.nngroup.com/articles/differences-between-print-design-and-web-design/

Designing for different digital platforms:

When designing screen-based information, there are several digital platforms that may have to be taken into account: From traditional screen delivery platforms such as websites or television to mobile technology such as tablets and smartphones.

http://shaereamer.com/julep-digital-design/

Code snippets (From exercises):

1. For link styling:

2. Linking another page in a page:

3. Link to an internal page:

Typologies (for different smartphone packaging and labelling):

https://www.behance.net/gallery/15456511/Sony-Ericsson-Packaging-Design-Exploration-1

Yes they are smartphone packing boxes…

http://www.packagingoftheworld.com/2015/01/vega-secret-note2-smartphone-packaging.html

https://www.androidcentral.com/quick-look-near-final-nextbit-robin-hardware-and-packaging

Total Design Fails:

Way too many graphics on the package box, such a bad color scheme… green and purple really doesn’t fit… it hurts my eyes. Barely any text explaining about the graphics.

http://www.ls6.idv.hk/#portfolio

Too many words without applying different color and grids to help the reader navigate through it, too less white space, making the package seem so crowded. The hierarchy is vague, the fonts should be vary in weights and styles for a better visual effect. No new graphic elements created for helping to read, but tons of graphics borrow from other brands… and they are in so many different colors making the whole product look cheap and in a low quality.

http://thecoolgadgets.com/goflex-1-5tb-seagate-freeagent-external-hard-drive-usb3-0-interface/

Too many colors—white, green, blue, purple and black! ... Not a good color scheme neither. But the way why not just make the graphics of DVD and other device at the bottom into redesign graphic elements, all the different images ruin the whole design. And the text is in similar fonts and weight, doesn’t show a clear hierarchy.

https://dealdesign.com/packaging-designer-portfolio/page/8/?portfolioID=4731

0 notes

informationdesignjwa187 · 8 years ago

Text

Idea Journal #1

By Jiayi Wei

Think about what the clients want, think about how to structure the team members based on what roles they are capable of taking, creates a timeline for structuring the project.

Learned about the audience, meet different requirements of them.

Organizing Content: create an alphabetic and numeric systems to note down the order. Such as chunking.

Give a visual hierarchy for the eye—direct the audience:

Visual Hierarchy: Organizing content to follow natural eye movement patterns:

https://www.interaction-design.org/literature/article/visual-hierarchy-organizing-content-to-follow-natural-eye-movement-patterns

Use size difference to make contrast and help the audience navigate through information from the most important to the least important:

http://www.visualmess.com/

Using design elements like lines, boxes and bullets to divide information:

http://www.visualmess.com/

Do content analysis, communicating with the client and get information or access of the contents of the project. Thinking about the big picture and find out the needs and goals of the project.

Content analysis help targeting the wanting information to represent in the project:

https://justpublics365.commons.gc.cuny.edu/tag/ethnographic-content-analysis/

http://hackeratwork.com/hacker/people-likes-buzzfeed-headlines/

Review the content while developing it, think about what could be talk about more and what have already been covered.

Make Creative Brief: it is a short document outlining the relevant information about a project, so that the team has a clear sense about the projects background and goals. Get feedback and approval from the client.

Creative Brief should include: Client info and Project info.

Why Do Companies Need a Creative Brief More Than Before?

http://www.designorate.com/why-do-companies-need-a-creative-brief/

How To Write a Creative Brief For an Infographic?

http://anna.vc/post/114147909777/how-to-write-creative-brief-for-infographic

Create Persona: -a brief profile of a typical user that outline s specific personality attributes, desire, needs habits and capabilities. -Identify main audience.

Having personas as a reference while you work on the project helps to create empathy and a deeper understanding for user needs and how the particular audience types might respond to your design.

Example: