WEB DESIGN and FRONT-END DEVELOPMENT (Part-2)

SCANNING PATTERNS
Just as with a scurrying movement in the corner of your eye or a sexy walk from someone across the street, the human eye is drawn automatically to certain points of interest. While some of this depends on the person, the majority of people tend to follow definite trends — including how they view a web page.

The F Pattern
Users will rarely read every word of your text. 
The first two paragraphs are the most important and should contain your hook. 
 Start paragraphs, subheads, and bullet points with enticing keywords.

The Z Pattern
Scanning occurs on pages that are not centered on the text. The reader first scans a horizontal line across the top of the page. When the eye reaches the end, it shoots down and left and repeats a horizontal search on the lower part of the page.

Background

Separate the background to keep the user’s sight within your framework.

1. This is a prime location for your logo.
2. Adding a colorful secondary call to action can help guide users along the Z-pattern. Center of Page
 A Featured Image Slider in the center of the page will separate the top and bottom sections and guide the eyes along the Z path.
3. Adding icons that start here and move along the bottom axis can guide the users to the final call to action at Point #4.
4. This is the finish line, and an ideal place for your primary Call to Action. THE Z PATTERN

Rules of Third
The guideline proposes that an image should be imagined as divided into nine equal parts by two equally spaced horizontal lines and two equally spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections.

Direct flash and Bounce flash
Direct flashing is firing your flashgun pointing directly at your subject. And Bounce flash is when, rather than firing your flashgun pointing directly at your subject, you point it elsewhere typically up or at an angle, bouncing off a wall or ceiling.

4 KEY WAYS TO MEASURE
Contrast
Contrast is the occurrence of two different elements positioned close together. In web UI design, these elements can be colors, textures, shapes, direction, or size, to name the important ones.

Color
In a nutshell, bright colors stand out from muted colors. This may seem obvious, but the important takeaway is its application: you can exploit this to draw your user’s attention where you want. Additionally, certain colors can help set the mood of the entire site.

Size
Size, particularly for text, is a powerful tool in that it circumvents the traditional rules of left-to-right and up-to-down reading. That means a large word or phrase in the bottom right-hand corner might be the first thing a person reads.
SIZE Source: http://getactive.sj-stmk.org/

Space
One of the most important tricks in making something pretty is the absolute absence of something pretty. Cluttering too many attractive images together is a quick way to ruin them all. It’s important that your web interface has breathing room and that you space everything out.
Space is not empty it is an element.
SPACE Source: http://minimal.skat.tf/

COLOR PSYCHOLOGY

Color psychology is the science of how color affects Human behavior

USING THE RIGHT COLOR IN THE RIGHT WAY

Color is a tricky thing. You have to use it in the right way, at the right time, with the right audience, and for the right purpose. Example: For Coca Cola, you can never use Blue, For Farming Companies, Green is most optimum. L’OREAL USE PURPLE: L’oreal sells products to women. That’s why L’oreal uses black and white, with purple overlay, in their e-commerce homepage.

WOMEN ARE NOT COMPLEX

In a survey on color and gender, 35% of women said blue was their favorite color, followed by purple (23%) and green (14%). 33% of women confessed that orange was their least favorite color, followed by brown (33%) and gray (17%).
Source: http://blog.kissmetrics.com/how-colors-affect-conversions/

MEN ARE SIMPLE

• If you’re marketing to men, these are the colors to stay away from: purple, orange, and brown. Instead, use blue, green, and black.
• These colors (blue, green, and black) are traditionally associated with maleness.
• However, it comes as a slight surprise to some that brown isn’t a favorite pick.

BLUE - GAINUSER’S TRUST!

• The color blue is a color of trust, peace, order, and loyalty.
Source: http://www.empower-yourself-with-color-psychology.com/color-blue.html
• Blue is the color of corporate America and it says, “Chill . . . believe and trust me . . . have confidence in what I am saying!”
Source: http://www.tuned-in.com/ColorSpeaks/Blue.aspx
• Blue calls to mind feelings of calmness and serenity. It often is described as peaceful, tranquil, secure, and orderly.
Source: http://psychology.about.com/od/sensationandperception/a/color_blue.htm
The world’s biggest social network is blue. For a company whose core values are transparency and trust, this probably is not an accident. PayPal also prefers the color blue. This helps to improve their trustworthiness. If they were to try red or orange as the theme color and branding, they probably wouldn’t have the same level of conversion.

YELLOW IS COMPLEX

Yellow is a color of warning. Brands use yellow to show that they’re fun and friendly. Yellow makes babies cry and people angry.
Source: http://www.businessinsider.com/branding-and-the-psychology-of-color-2012-12?op=1

GREEN IS IDEAL FOR ENVIRONMENTAL AND OUTDOOR PRODUCTS

Most intuitive color connection is green. Green essentially is a chromatic symbol for nature itself. Green also is a color that can improve creativity. Green also is a good call-to-action color.
Example: All of Dell’s conversion elements are green.
ORANGE

Orange can create a sense of haste or impulse.

Example: Amazon.com uses orange in their “limited time offer” banner. The color suggests urgency, which makes the message more noticeable and actionable.
BLACK - LUXURY AND VALUE
The darker the tone, the more lux it is. Full black color #000 is simple but if it is mixed dark then it creates more acceptance in the web design and peoples mind and it looks different then using full black.
HOW TO CREATE A COLOR PALATE IN PHOTOSHOP:
Filter-> pixelet -> Mozaic