http://www.vipspatel.com/wp-content/uploads/2014/10/science-beakers-liquid-testing.jpg
A polarity found in most work is the balance between logic and intuition. Web design along with most artistic endeavors favor creativity. Yet the process of actually coding and structuring a website is primarily logic-driven. Does this mean the design process can only be viewed as a creative touchy-feely kinda process? Not exactly, because most designers I know hate to be touched or feel emotions.
I would say the processes of designing and coding for the web both require creativity and logic. In this post I’d like to specifically focus on the design aspect of things. Even more specifically I’d like to outline a few concepts you can utilize during the early stages of a design workflow. Logic can benefit your creative process when distinguishing between good ideas and other ideas with not-so-positive adjectives. Once you get into the groove of using both thought patterns it’ll be easier to create extraordinary pieces of work.
Build through Example
One of the best methods to view the world is through a lense of deconstruction. A principle known as gestalt psychology explains that people generally see the whole of something before seeing the individual parts. Understanding this principle can help you shift back and forth between a mindsend of composition and deconstruction. It doesn’t make you a cognitive neuropsychologist but if you can even pronounce that out loud I’m giving you bonus points.
The scientific approach is generally accomplished through a logical understanding of the subject matter. Approach each website as a full composition ready to be analyzed and broken down. Vacillate between the full composition & its parts until you can see everything perfectly and truly understand the designer’s intentions.
Follow this process on a number of different websites and apply the same principles to your own design work. Learning how to build a layout through example is one of the most powerful techniques. The early phase of constructing a website requires a lot of brainstorming and freedom to try new things. It requires that you already have some idea about how to structure a webpage and how to understand design from a user’s perspective.
If you’re having trouble with this step it may be useful to rebuild an existing website either in Photoshop or HTML/CSS. Since web design requires both design and coding you can focus on whichever side you prefer. This way you’re being forced to analyze each part of the layout while asking yourself “how do I build this?”.
Color Choices
We all know about the cool scientific term “color theory” but how much science really goes into it? Well actually quite a lot, much like music theory and my theory about a device called a “breadster” which turns toast into bread.
There are plenty of reasons to study color theory including fine art, print design, interior design, or even just a fun conversation starter. Web design is another variation of print/graphic design which incorporates many of the same ideas. As a designer you want to think about which colors fit best with a certain branding or company. This takes a little bit of intuition and some guesswork.
However the toughest part about color theory is the same reason you should learn it – to understand color matching principles. Certain colors will compliment each other when put together in the proper context. Using a color wheel can expedite this process if you have the patience to give it a shot. Just remember that colors are relational so choosing one color will affect the rest of your foreseeable options.
I should also point out that basic color theory deals primarily with the hue of a color. This means it will take some work to understand concepts like tints and shades. Once you can match up color schemes the design process becomes more about selecting the right colors to match a project.
Practicing and studying other websites will help you understand how colors match and behave. You may also start out with color matching tools to get started on the right foot. Ultimately it’s a very long process where you often learn best from mistakes. As the Frizz used to say: “take chances, make mistakes, and get messy!”.
The Golden Ratio
If you’re one of those people really into mathematics then put aside your multivariable calculus worksheet and take a look at this fascinating Ted talk. It goes into detail about Fibonacci numbers which eventually break down into a common ratio of 1.618, or 1.62 for shorthand. This ratio appears in nature, photography, architecture, fine art, and most certainly digital design.
Applying this ratio is a little more complicated but it’s all based on sound logic. By measuring the area of any composition you can divide this number by the golden ratio ratio(1.62) and get back a numeric value. This value can be used to split up the whole into two parts – not exactly a 1:1 ratio but a 1:1.62 ratio.
Check out this extensive post giving both real-world examples and web-centric examples. Composition isn’t the only applicable subject. Another such example could be relative font size – either multiplied or divided by 1.62 to impact headers, navigation, footer text, really anything. You don’t need to follow the numbers exactly but this golden ratio can help you get to a reasonable starting point.
Designing for Content
A very simple yet effective rule to consider is how to design specifically for content. It requires an understanding of the website itself and what type of content would be displayed. Is the site comprised primarily of text like a blog? Or will there be more tables, columns, charts, videos, image sliders, or grid-style lists? Which content needs to be displayed with a greater focus to encourage more visitor procrastination?
Keep in mind that design is a process. You need to put down some bad ideas in order to reach the good ones. It certainly won’t come easy but starting with content will make it easier. This way you’ll know what to design around – or phrased differently, you’ll know which pieces of content need designing.
Based on the specific type of website you could organize a list of germane page elements. For example a band website should include tour dates and information about their music. You might also want to include links to the band’s social profiles to hopefully accumulate a larger following.
The type website and subsequent content also structures how a navigation menu is organized. Most of the page layout is directly influenced by how content needs to appear. Once you understand what needs to be prominently displayed all the other stuff can fall into place naturally.
Closing
Although web design is more of an art there’s still plenty of logical guidelines to follow. It may not be a hard science like math or physics. But keep in mind there are scientific ideas related to design with many passionate proponents. I hope these tips can help out designers who are just getting started and need a push in the right direction. A combined dichotomy of logical processing along with creative intuition will lend itself to much greater results.
Constructing a Scientific Approach to Web Design, Technology newsTechnical, Technology, Technology Trends
Constructing a Scientific Approach to Web Design
0 comments:
Post a Comment