Reading Task

WEEK9 – Reading – Visual Hierarchy

Posted on by zoeyzan

In this week, reading task talks about visual hierarchy. What is Visual Hierarchy? According to GIS dictionary, Visual hierarchy refers to the arrangement or presentation of elements in a way that implies importance. In other words, visual hierarchy influences the order in which the human eye perceives what is sees. A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to pick and choose among its offerings.(Upton, 2009)

This article called “Creating exciting and unusual visual hierarchies”, in this article, I think author said an important sentence that is “The key to creating hierarchy is contrast”. Therefore, Knight and Glaser showed six principles of visual hierarchies, which are texture and tone, seeing the designer as reader, combining typefaces, using color, employing multiple types, and using the grid. Designers can achieve visually by relying on several key things.

  1. The Designer As Reader – The valuable for the designer to identify highly topical subject matter, words and letters that make intriguing connections, challenging language and even shocking statements.
  2. Texture And Tone – letterforms, words and lines of type come together to form different tonal values and varying characteristics of patterns or texture. Give enough space to draw attention.
  3. Combining Typefaces To Create Hierarchy – Simple changes in weight, scale, positing, color, tone or font. And visual judgment of texture and tone is key. So the type size is very important.
  4. Color Type – Certain colors have different associations in different cultures. As a designer needs to carefully select not only the hue, but also the tone of a color. And the grayscale is key point in the color.
  5. Quantity Of Type – Designer need to select the appropriate order and hierarchy for the task in hand is essential.
  6. Why Grids Are So Practical – The grid provides a framework and structure for the combination of type and images. And according to research, a large number of designer like to have an uneven number of columns. And another thing is designing a grid with flexibility is important.

I am going to show you one good magazine. I think that is a good example of visual hierarchy and I will explain it.

magazine1

magazine3 magazine5

magazine4 magazine2

Project PRX Magazine on Behance.

There are mainly four different type sizes. At the first, most texts are black color, but the main word “PRX” is blue. Readers can easily see it after reading this title. And then, this magazine has plenty of columns. Three is a good uneven number of columns. Because establishes a more intriguing dynamism and asymmetry. Moreover, the whole page lived enough space to show the car’s appearance by picture. Finally, readers feel that the whole page has a little monotonous color, but the blue made this magazine has intriguing connections. So, I think that is a simple, clean and nice design that shows a good magazine of visual hierarchy.

Overall, I believe that creating exciting and unusual visual hierarchies are vital role in the design. And perfect visual hierarchy is undoubtedly the key to designers communicate with the reader.

Reference:

1.C. Knight, J. and C. Knight, J. (2013). Creating Exciting And Unusual Visual Hierarchies – Smashing Magazine. [online] Smashing Magazine. Available at: http://www.smashingmagazine.com/2013/02/26/creating-visual-hierarchies-typography/ [Accessed 23 Nov. 2014].

2.Behance.net, (2014). Behance. [online] Available at: https://www.behance.net/gallery/Project-PRX-Magazine/8145435 [Accessed 23 Nov. 2014].

3.Upton, E., 2009. Hierarchy. [online] Available at:
http://www.thinkingwithtype.com/contents/text/#Hierarchy [Accessed 15 Nov. 2014].

WEEK 7 –Reading – Post-digital prints

Posted on by zoeyzan

This video introduce that the Magazine Experience with WIRED. It is a new digital magazine, published on 2010. According to video, there are many function: music and 360s – the ability to turn a product around，the new navigation system, and touch the screen – you can get a visual overview of the entire magazine, and you can clip articles, share them with your friends and so on… The digital magazine is a new opportunity to use all these visual tools at our disposal.

It is a really exciting time fore publishing. Because digital magazine is a new relationship, and the user has with a brand is now not just limited to their relationship with the traditional print.

And nowadays, we should build a way for readers to engage with that content on any screen or device that they want to. Just like Kindle, it is a very useful and convenient device, and reader can read a lot of books on the kindle. It has a good function that is if you don’t know some word, you can link to dictionary find the meaning. It is good for students who study English.

So, the key point of the digital publishing is that the user can get information easier and can communicate with each other by some interesting functions.

WEEK6 – Reading – Using prototypes to find solutions

Posted on by zoeyzan

This article shows that using prototypes to find solutions by post-its. Prototyping is the practice of building low-fidelity representations of products, services, or experiences in order to learn and test before proceeding. And prototyping includes four points. There are thinking and planning by doing, and is iterative, fast, and low-fidelity.

According to reading, prototyping is a part of the design thinking. The author said, “It has been successfully adapted as a tool for fostering creativity and solving complex problems”. And the design thinking has five-step process, including interviewing and observing in the field; synthesizing insights; generating ideas; building prototypes; and testing with users.

Before we start prototyping, there are SIX steps. And these points can help designers.

  1. Defining the problem.
  2. Preparing your organization.
  3. It starts with you.
  4. Show, don’t tell.
  5. Preparing your team.
  6. Preparing your space.

Firstly, you should come to consensus on the context. Your prototype will yield the best results when specific concepts or variables can be built and tested. Then, you should consider some principles, when you exploring the possibilities of prototyping. Next, you should fully embrace listening to your users and be committed to iterative thinking and working. Besides, be care about introducing terms like “design thinking” before people understand some of the key components of the process. Finally, you should prepare your team and space, and you can do some activities.

Basing on this reading, at the start part, author mention the “low-fidelity”. Finished this reading, I think “low-fidelity” prototyping maybe not has more details. “Just-good-enough fidelity” has clear strategy and points, but not has good engineered work. “High fidelity” prototyping maybe has enough details and pretty good design. In my view, “just-good-enough fidelity” should be the best choose for prototypes, because it makes users catching the grasping better, communicating easier, and then, the staff can suitably explain the works, and they can give many useful feedbacks.

prototypes prototypes1

Reference

1.Silvers, L., Lytle-Painter, E., Lee, A., Ludden, J., Hamley, B. and Trinh., 2014. From Post-its to Processes: Using Prototypes to Find Solutions. [online] Available at: http://mw2014.museumsandtheweb.com/paper/from-post-its-to-processes-using-prototypes-to-find-solutions/ [Accessed 2 Nov 2014].

2.Naranjo-Bock, C. (2011). Using Paper Prototyping as a Tool for Participatory Design Research. [online] Paul Olyslager. Available at: http://www.paulolyslager.com/paper-prototyping-tool-participatory-design-research/ [Accessed 2 Nov. 2014].

3.McDonald, I. and McDonald, I. (2014). Helpful Rapid Prototyping Methods and tools to bring Digital Ideas to Life Fast | Iain McDonald. Chief Disruption Officer. [online] Chiefdisruptionofficer.com. Available at: http://chiefdisruptionofficer.com/helpful-rapid-prototyping-methods-and-tools-to-bring-digital-ideas-to-life-fast/ [Accessed 2 Nov. 2014].

Week 5 – The importance of Web sketching

Posted on by zoeyzan

When learning web design, as a designer, you need to present a complete website. So we always focus on some technical skills, such as learning languages and writing code. But in my view, these skills are programmers’ job. This video shows that as a web designer, you should create good idea and think more plans about websites. Even if you have good learning languages and writing code, but you don’t have a good planning process of website. I believe that users don’t like it, because the sites simply won’t be effective. So the process of design is very vital, and designer need good planning sites.

  • Content strategy
  • Site architecture
  • User experience
  • All must be considered before designing a site

And we can use sketchbook, writing down some idea. This way is free, easy and convenience. And everyone can do it. You can express ideas freely, even if these ideas have mistakes or problems, but you can just draw your ideas. If you want to use a program like PS or HTML to create plan, maybe these way not quickly. Week 5 – The importance of Web sketching Week 5 – The importance of Web sketching1 Using sketchbook has some benefits.So designers just need to create ideas instead of design decision. Week 5 – The importance of Web sketching2 So designers just need to create ideas instead of design decision. Then according to James Williamson said, we really need to get started sketching is a pen or pencil, paper, ruler and markers. Then according to James Williamson said, we really need to get started sketching is a pen or pencil, paper, ruler and markers.3 You don’t have any good drawing, you just draw your thought on your sketchbook, at the end, and you have to draw effectively to communicate your ideas. So, as web designer, you should started to draw your ideas on your sketchbook with pen, pencil, and so on. By the way, you can watch some useful videos on the http://www.lynda.com.

Reference: lynda.com, (2014). The importance of sketching from the Course Web Design Fundamentals. [online] Available at: http://www.lynda.com/Web-Web-Design-tutorials/importance-sketching/150166/164888-4.html [Accessed 26 Oct. 2014].