DEV Community

loading...

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

Md. Ashikur Rahman
Experience in full stack (PHP, Java, Javascript, MySQL, MongoDB, Linux, Apache - LAMP, MEAN stacks) software development following Agile (Scrum, XP).
・4 min read

IMPORTATN CONCEPTS TO KNOW BEFORE MAKE A DESIGN
• In web design keep the element at first positions which actually keep the interest.
• To keep in mind that a user is going to visit the site for 3 seconds and on that 3 seconds i have to put something catchy so that a visitor get interest to go through the whole site.
• So before putting some element on the site we have to think if it is useful for the user or not.
• Call to action buttons and attractive headers with various offers or rank or superior service catch user attentions
• DRY concept- Do not repeat yourself, Which ever element and resources are available in the market try to use those rather start creating from the begining. It saves time and money.
• Use content on which license are GPL GUN or MIT
• The more you see the more design concept will grow. such as rocket theme, theme depo, theme fusion, theme forest etc.

Grid:
• Manuscript grid
• Column grid
• Modular grid
• Hierarchical grid

Flat design concept:
Flat design gets its name from the shapes used. Flat design employs a distinct two-dimensional style that is simply flat.
Here are five pretty distinct characteristics. Here’s a look at each, plus an introduction to “almost” flat design.
• No Added Effects
• Simple Elements
• Focus on Typography
• Focus on Color
• Minimalist Approach

Demo Contents and its importance:
• Content is important to choose according to priority.
• While choosing or selecting a demo content or component for the site you have to think like that you have the business.
• Have think like if that content or component serve the purpose of the target audience.
• Content analysis is important so have to divide the content according to target audience, suppose who is going to visit the site and what is the main goal for the site after a user has visited the site.
• Attractive offers and call to actions buttons are attract users.
Content Analysis and Organizations:
If we think it like a site is following the z patterns then we can follow the following patterns of organizing contents:

  1. At top left hand side we can put a logo
  2. Menus
  3. An attractive sliders to showcase the services or the products offered by the company. a. A paragraph about what the business is all about? b. What the business do? c. What are the services offered by the business?
  4. Put some samples of products and write what this thing do
  5. A call to action button to invite user to take a look or use the product or buy a copy.
  6. At footer part we can put a call to action button too.
  7. Contact details and some gallery can be put.

Website must convey a message like important message or a line which is telling that our service is best or we are the number one or our quality is super etc.

It is important that from a first impression user should have understand that many things are going on at the site so have to put some UI component to flip or tab.

It is important to think about the base color and design accordingly. We can find a base color of a company by looking at the logo of that company.

Working with 3 base color is good. Or we can choose a palate of colors and work accordingly.

 Think like a target audience
 Careful about color combinations and contrast.
 Keep in mind about the values, the level, and gender of target audience.
 Do a market analysis before launching a theme in the market, if there is any trends upcoming or any big event like football or world cup, or any seasonal ceremonies etc.

SYMMETRIC CONCEPT

SYMMETRIC

Symmetry creates balance, and balance in design creates harmony, order, and aesthetically pleasing results.

Asymmetry

Asymmetry is the lack of symmetry. Asymmetry can also represent an object that breaks a predefined pattern of symmetry, or an imbalance of design elements.
Asymmetry can be used as a design tool to create points of interest and organize visual hierarchy within a group of similar elements. It creates disorder, which can call attention to certain points of a design through distinction.

Use Symmetry Strategically

Strategic use of symmetry (and the lack of it) is a powerful design tool. Designs that need more stability, a strong organizational structure, and a classic and trusting message, tend to use more symmetry in the design.

For risk-loving designs, providing asymmetry can reinforce the message. You can use asymmetry to punctuate an otherwise orderly, boring design.
Translational Symmetry is good for Layout Structure Keeping pieces of content roughly the same size and spanning them across a web page or print piece is a great way to keep symmetry while maintaining enough space for all of the essential text and imagery.

Use Rotational Symmetry to Convey Movement and Action
Rotational symmetry can simulate motion even in an otherwise flat and static medium. It can also infer progress or forward movement.

Use Asymmetry to Draw Attention

Asymmetry can make designs more interesting overall, but it serves another primary purpose: to grab attention and create visual hierarchy. Sometimes a design can intentionally be thrown off balance to direct the viewer’s eyes to a certain area.
Source: http://sixrevisions.com/web_design/symmetry-design/

Minimalist Landing Pages: The Big Idea

Minimalist landing pages have only one primary goal.
Whether it’s to click on a sign-up button or enter your email address in a web form or download something onto your computer, there is only one well-defined action the web designer of the landing page wants her users to take.

Discussion (0)