from 스터디룸 2009.12.09 13:40

얼마전 존마에다의 Laws of Simplicity 강의를 접하고서 꽤나 흥미 있었 는데
오늘 구독하는 오픈캐스트에 Minimalist Web Design이라는 포스팅이 있었다.
웹은 트렌드에 민감한 매체라 미니멀리즘,한 디자인이 얼마만큼 사용자들에게 환영받을지,
그리고 얼마만큼의 유저빌리티가 있을지는 잘 모르겠으나...
개인적으로 지나치게 추상적이지만 않다면 미니멀한 디자인의 웹은 대환영이다.
단순하면 오히려 디자인+기능적인 측면에서 사용자를 다 만족시킬수 있지 않을까. =)
포스트내용을 간단히 요약해보았다.



미니멀리스트 디자인은 가장 기본적인 요소(컬러, 질감, 형태)로만 디자인하는 것이다. 미니멀리스트 디자인은 예쁘지만 모든 정보를 미니멀하게 보여주기는 어렵다는 딜레마가 있다.


미니멀리스트 디자인은 점점 중요해지고 있고 트렌드가 되고 있다. 웹사이트를 더 "아름답게"만들수 있기 때문에 미니멀리스트 테크익을 배우는것은 크게 도움이 될 것이다. 다음은 미니멀리스트 디자인의 기본 원칙을 소개한다.

1. 적은 내용이 더 많은 내용을 보여준다.
너무 많은 요소들이 있다면 사용자는 무엇이 어디있는지 혼란을 느낀다. 미니멀리스트 디자인은 Content에 포커스를 둔다. 블랙&화이트 디자인은 유저의 관심을 끌수 있다. 웹페이지의 중요한 것이 무엇인지를 정확히 보여주며, 디자이너의 브랜드와 아이덴티티를 명확히 보여준다.
복잡한 그래픽 요소나 더 많은 내용이 있으면 덜 중요하게 보인다는것을 명심할것.

2. Content를 미니마이즈 하는법.
- 레이아웃을 단순화시킨다. 단순히 그래픽을 줄이는게 아니라 컨텐츠를 다시 생각하고 불필요한 요구사항을 제거한다.
- 웹사이트를 만들때는 필요한 컨텐츠가 무엇인지 생각해보라! (로고, 소개, 네비게이션..) 가능한한 많이 버려라.
포인트는 웹사이트를 "덜 기능적"으로 만드는게 아니라 "불필요한 요소를 제거"하고 "더 단순한 레이아웃"으로 합치는 것이다.
3. 디자인을 단순화하는 법
미니멀리스트 디자인은 약간의 texture, color, shape, line, content, type을 사용한다.
단, 디자인이 너무 없어지면 지루해질수 있다. 모든 디자인을 삭제하는 것이 아니라 한가지 중요한 특징을 어필한다.
4. wirefime을 사용해라
wireframe은 컨텐츠들을 계층적이고 조직적으로 보여주고, 시각적 효과를 만들어 낼수 있다.
wireframe을 만드는 절차는 다음과 같다.
꼭 필요한 컨텐츠 결정 -> 컨텐츠의 우선 순위 정하기 -> 가장 우선순위가 높은 컨텐츠를 wireframe으로 스케치한다.
5. 여백
미니멀리스트 디자인을 할때 여백은 필수적 요소다. 요소들 주변에는 꼭 여백을 넣으면 balance를 맞추어 페이지를 돋보이게 한다.
6. Balance, Alignment, Contrast
미니멀리즘과 관련된 디자인의 3가지 특징들이니 염두에 둘것.
(Horizontal symmetry, Approximate Horizontal symmetry, Radial symmetry, Asymmetry)
7. 오버디자인은 습관이다.
심플하게 만들려는 노력과는 달리 항상 복잡해지는 웹사이트. 미니멀리스트 디자인을 하기 위해서 다음과 같은 팁을 제안한다.

- 무언가 부족하다는 생각이 들면 새로운걸 추가하는 대신, 무언가를 빼라.
- 완성된 제품을 보고 결과를 더 단순화 시킬수 있는지 생각해라.
- 확신할 수 없는 것이 있다면 다른 디자이너에게 빠진 요소들을 지적받아라.
8. Minimalist 디자인 예제.
아래 원문 그림 참조
9. 트렌드
미니멀리스트 웹 디자인은 명확한 트렌드다. 미니멀리스트 트렌드를 아는 것은 디자인을 더 좋게 하는데 있어 많은 방법들을 제공해 줄것이다.
10. 흑백
주목할만한 트렌드 중 하나는 검은색과 흰색의 확장이다. (컬러가 단순해짐) 그러나 과도한 사용은 웹사이트를 지루하게 만들수 있다. 아래 사이트는 강력한 컬러를 사용힌 미니멀리스트 디자인 예시이다.

11. 타이포그래피
타이포그래피는 미니멀리스트 웹 디자인의 중요한 요소다. 그 자체만으로 트렌드가 되는, 사이트를 더 흥미롭게 만드는 시각적 요소다. 다음은 타이포그래피가 디자인을 강화시킨 예시이다.

12. 플래시
많은 미니멀리스트 웹 디자인은 플래시 기반으로 되어 있다. 시각적 효과없이 애니메이션만으로도 효과를 얻을 수 있다. 플래시의 사용은 wireframe, 타이포그라피, 다른 요소들의 사용을 더 쉽게 만든다.



출처 http://www.webdesignerdepot.com/2009/12/minimalist-web-design-when-less-is-more/

원문 Minimalist Web Design: When Less is More
Tag: Creativity, Design, Web Design


As designers, we all know that a minimalist design can achieve beautiful results.

Still, many designers have trouble creating one; either they have a hard time making a page with so few elements look good or the final result just doesn’t look “complete.”

There are many articles on the Web about minimalism and this article aims to help you achieve a minimalist design that is beautiful but not bare.

To top it off, we’ll present a small showcase of minimalist designs, so that you can analyze why some designs work and others don’t.

What Is Minimalist Design?

Minimalist design has been described as design at its most basic, stripped of superfluous elements, colors, shapes and textures.

Its purpose is to make the content stand out and be the focal point. From a visual standpoint, minimalist design is meant to be calming and to bring the mind down to the basics.

The design movement began in Switzerland and was then applied to a variety of media: graphic design, architecture, music, literature, painting and, more recently, web design.

Although minimalist design took off decades ago, the early days of the Internet did not show it. Even without the rotating logos, marquees and bright colors, website designs were cluttered and overbearing.

We’ll go over the basic principles of minimalist design. But even if you choose not to pursue a minimalist aesthetic, the lessons here can help you simplify your design, whatever your style.

Less Is More

As mentioned, minimalism brings the most important content to the forefront and minimizes distractions for the user. If a page has too many elements, the viewer will be confused about where to look or misinterpret the priority of each element. A minimalist design puts the focus squarely on the content.

Any splash of color on a black-and-white design, for example, is sure to get the user’s attention. The color itself becomes the focal point. Let’s look at a specific example:

Jan Reichle

You’ve probably seen this kind of design before: plain white background, one block of content and one graphic element.

The graphic element brings color, texture and shape. It is clearly the most important element on the page, and it defines the designer’s brand and identity.

With the complexity of this particular graphic element, more content on this page would have made it less noticeable, and less important. Keeping the content to a minimum, the designer has achieved the perfect balance.

How to Minimize Content

The first step to creating a minimalist design, or just simplifying a layout, is not simply to cut out most of the graphics, but rather to rethink the content and strip it to the bare requirements. Only then will the most important elements on the page achieve their intended effect.

Just as you would plan any website, write down what content you need: logo, introduction, navigation, etc. Cut out anything else that is not essential. Throw out as much as possible.

Below are some elements you probably do not need. Keep in mind that this is just a guide. Your exact requirements will depend on your particular design. Some of the items below may not be required for your website.

  • Icons or graphics for social media, or a social media section at all
  • Taglines and supplementary descriptions or introductions
  • “Featured,” “Popular” and “Recent” lists (including Twitter and RSS feed lists)
  • Pages with more than three major sections (e.g. “Introduction,” “About” and “Services”)
  • Secondary navigation pages.

The point here is not to make the website less functional, but rather to cut out unnecessary elements (and thus highlight the necessary ones) or to combine sections into a simpler layout (for example, by incorporating your social media links into the “About” or introductory section).

You could also divide content into separate pages, giving each piece of content more attention.


How to Simplify the Design

Now it’s time to simplify the design as much as possible.

Minimalist designs should have little texture, color, shape, lines, content or type. Go too bare, though, and the design will be boring. Rather than dumping everything out, give the design appeal by making just one important feature the focal point.

Choose what that focus will be, and keep the tips below in mind as you work through your design.


Use a Great Wireframe

In browsing the showcase section below, we see that some designers have added visual interest with subtle bursts of color, unique typography or interesting shapes. Perhaps the most important element they have all relied on, though, is a unique wireframe.

Creating a wireframe for such a bare page requires a bit of extra attention. With the correct wireframe, you can achieve the right hierarchy and organization and create visual interest.

Wireframe


To come up with a wireframe, follow these steps:

    • Decide on what content you absolutely need
    • In a list, prioritize the content
    • Sketch a few wireframes based on your list to experiment with the best visual hierarchy.

      When working out the wireframe, consider placement but also visual treatment. For example, if your logo has a color that you do not reuse elsewhere in the design, you have to account for that.


      White Space

      White space is practically synonymous with minimalism.

      No matter how creative you are with it, a minimalist design without plenty of white space is not really minimalist at all. So, be sure to add more white space around elements than you normally would.

      The space is needed to balance the few elements that will appear on the page.


      Balance, Alignment, Contrast

      While much of the load can be carried by white space and a good wireframe, special care should be taken with the fundamentals of design. The three biggest related to minimalism are balance, alignment and contrast.

      Be sure that your design adheres to these principles and that it does not need supplementary visual aids to look “finished.”

      Design Principles

      Keep other basic design principles in mind, too. Review them and experiment with different options to achieve the best result. Check out “The Principles of Design” for more ideas.


      When Over-Designing Becomes a Habit

      Over-designing sometimes becomes a habit. No matter how hard you try to keep a design simple, it comes out messy and complex. To fix this, we must form new habits.

      Try reviewing the tips above before each project to keep them in mind during the process. Focus on developing one habit at a time. For example, work on reducing and simplifying the content before moving on to white space.

      If you find yourself in a tough spot thinking, “Something’s missing,” first try taking something out, rather than putting something new in.

      Every aspect of minimalism requires a different talent. Your designs will become simpler the more you put these principles into practice.

      Taking it further, once you have applied the techniques discussed here, look at the finished product and see if you can find ways to simplify the result even further.

      You could focus on areas that you were unsure of during the design process, and you could ask other designers to point out elements you may have missed.


      Minimalist Showcase

      Below is a brief showcase of minimalist designs. See how each of these implements the principles we have discussed. Also see which ones break our guidelines, and think of why they still work.

      1. James Day Photo

      James Day Photo


      2. Killswitch Collective

      Killswitch Collective


      3. Lonely

      Lonely


      4. DBushell

      DBushell


      5. XPD.no

      XPD.no


      6. Toy NY

      Toy NY


      7. Joshua Serbus

      Joshua Serbus


      8. Ah-Studio

      Ah-Studio


      9. Symour Powell

      Symour Powell


      10. Icon Werk

      Icon Werk


      11. Neil Wilson Architects

      Neil Wilson Architects


      12. Non-Format

      Non-Format


      13. Zaum

      Zaum


      14. Checkland Kindlysides

      Checkland Kindlysides


      15. Blumenthal

      Blumenthal


      16. Tink London

      Tink London


      17. Proud Creative

      Proud Creative


      18. Kimag

      Kimag


      19. Bernat Fortet

      Bernat Fortet


      20. All Day

      All Day


      Some Trends

      As you can see, minimalist web design has some clear trends. Being aware of these trends helps us improve our designs in a number of ways.

      Not only are we able to take inspiration from the layouts that other designers have worked so hard on, but we can consciously break from these trends to forge our own innovative path.

      Let’s discuss a few of these trends in further detail.


      Black and White

      One of the most noticeable trends is extensive use of black and white. This is obvious enough: color should be simplified along with texture, shape and content. But it can be overdone these days and look a little boring.

      Look at a few websites that have defined colors in the showcase above, and see how they stand out from other minimalist designs. Also, think of how they manage to stay minimalist even with such strong use of color. Here’s one example:

      Toy NY


      Interesting Typography

      Typography-based Web design is closely tied to minimalism.

      When designers have very little else to excite the user, they often seize on interesting typography. You could even go so far as to use typography as the sole visual element.

      This is a daring technique but still a trend in itself. Look for ways to make typography enhance the design while remaining unique.

      Ah-Studio


      Flash

      A surprising number of minimalist web designs are Flash-based. With so little else for visual stimulation, a design could benefit from subtle animation (such as text fading in and out) without being overpowering.

      Also, Flash removes certain limitations in the design process. Unconventional wireframes, typography and other elements can be easier to achieve with Flash than by traditional methods.

      Tink London


      Wrapping Up

      Minimalist design comes in many forms, and yet we too often see the same form repeated. Trends can become overbearing, and we must fight the urge to imitate while understanding what it is about a trend that makes sense.

      In any case, minimalism can be beautiful and will be around for years to come, so learning some of its techniques can be incredibly beneficial, whether for your clients or for your own projects.

      And even if you’re not interested in the minimalist style, the lessons and principles involved can help you simplify your designs, which is always a good thing.


      Written exclusively for Webdesigner Depot by Kayla Knight.

      So, what makes minimalist design so effective, and when should we avoid it? Please share your comments below…

      티스토리 툴바