How to design a website? Plan and elements of web designing

Design elements for pronunciation of BBEROES

Carefully designed with cute and trendy elements. The pronunciation of BBEROES is like “ heroes ”, but instead of “ he ”, it is pronounced as “ b ”-roses. BBEROES is an original brand that is inspired by the conception of all beings is eligible to be
Carefully designed with cute and trendy elements. The pronunciation of BBEROES is like “ heroes ”, but instead of “ he ”, it is pronounced as “ b ”-roses. BBEROES is an original brand that is inspired by the conception of all beings is eligible to be | Source

Planning and understanding web design


It is critical to understand design first and technology second while trying to understand Web design. Design principles will be as relevant to future technological developments as they are to current technologies.

Web design does not exist in a vacuum. Trained and skilled people realizing Web design projects are key persons to the process. Getting to final implementation of a good idea requires mastering many processes. A step-by-step approach will increase chance of a web design project being a success.

HTML5-BlockElements

Diagram of the HTML5 block elements: body, header, navigation, section, article, paragraph, aside, and footer.
Diagram of the HTML5 block elements: body, header, navigation, section, article, paragraph, aside, and footer. | Source

Plan critical areas first


You have to plan for several critical areas before starting a web design. Some of the key processes are listed below:

  • Need analysis
  • Solution designing
  • Template creation
  • Story boarding
  • Content planning
  • Content drafting
  • Product photography
  • Graphic designing
  • Flash designing
  • Animations
  • HTML coding
  • CSS and XSL
  • Java scripting

You may or may not use all these features depending upon the need specified by the website owner and ultimate users of the site.


Designing a website in Notepad

Planning and features of web design


Web design is the planning and creation of websites. This includes the information architecture, user interface, site structure, Navigation, layout, color, font and many others.

Information architecture is the taxonomy or structure of a Web site. It is generally used to plan structure and navigation process of the whole site.

Common elements of a business Website:

Products and services page that provides information about products and services company offer.

About us page that informs about the company, organization and its structure.

Support page that provides help to the customers.

Contact page that gives necessary contact information including address, phone and mobile numbers, fax, email etc.

Erb design idea - Photoshop elements tutorial

Plan your navigation and web layout


You can start to plan your navigation process after you have defined information architecture of your site. You have to plan Navigation process according to your site architecture. Do it in organized way.

Think about how your customers may look in to the website. Flow charts and storyboards can help you map it out exactly. Navigation must include these four key features:

1. Accessible 2. Meaningful 3. Understandable 4. Prevalent

Web Layouts should be simple and clear Similar to that of Paper Layouts. Do not overlook layout while creating a Web design. Use CSS, tables, frames but do not ignore the basics of Web layout. Use wire frames while creating your layout. Consider these three elements while preparing your layout.

1 Space and White space 2 Images and Graphics 3 Text Width

Balance the graphics and text on a page. Balancing is the most important aspect of design principles.

Think deeply while choosing colors for your web design. Colors impact a lot on human eyes. It effects psychologically and culturally. Different cultures and ethnicity have different meanings for colors. Keep in mind cultural background and ethnicity of your targeted visitors.


Typography: Rouse Type Mortiser catalog 1946

 Rouse Type Mortiser, from "Time-Saving Equipment for Printers". 16 September 1946
Rouse Type Mortiser, from "Time-Saving Equipment for Printers". 16 September 1946

Elements of Typography


Use fonts (Typography) judiciously. Typography uses typefaces and the white space around and through them to create a whole design. There are six types of Typefaces On Web pages based on generic classifications. These are

1 Serif 2 Sans-serif 3 Mono-spaced 4 Cursive 5 Fantasy and 6 Script.

There are few adjustments that can be made between and around letters to beautify your text contents. Kerning, tracking, leading, measure, alignment and ligatures are the main components of adjustments in typography.

You have to combine all of these features with the principles of design and elements of design to create a good looking. eyecatching business website. This will meet goals of the business owner.

Website design tips: Standard layout

Principles and elements of web design


Principles of web designing:

Balance

Balance is distribution of materials in the web page. You have to balance darker versus lighter color, heavy versus light materials while balancing design in a web page.

Contrast

There are color contrasts such as black and white. There can also be contrasts in sizes e.g. large vs. small, shapes e.g. square vs. circle and in textures such as smooth vs. rough.

Emphasis

Emphasis is what catching eyes in a design. It is not wise for a designer to give everything equal emphasis. This will make your design bland and flat. It is better to emphasis on the elements based on hierarchy of the website.

Rhythm

Rhythm is repetition. Repetition provides patterns. It creates internal consistency in Web design. Human eyes can comprehend patterns easily. Rhythm makes your website more understandable.

Unity

Unity of a design is based on the principle of proximity and keeping like elements together.

Elements of designing:

Line, Shapes, Texture, Color and Direction are the main elements of design.

Create a basic webpage: Dreamweaver tutorial

Web design secrets: Imagination and creativity


Web design is not only a technology but also a creative art. It is essential for an expert web designer to be creative.One can not design a good website without imagination and creativity. You have to visualize a complete website before you start designing. People pay a lot for creative custom design. Spending some time on creativity will pay you back. Do not think it wastage of time.

Visualize and imagine the website you like to bring to your visitors. Keep your customer's need while imagining. Write down all elements together in a paper. Plan the whole thing and start working according to plan. Use basic design principles and design elements while executing your plan. Look at the design when completed. Whether it is complying with your visualization or not. Correct and change the design wherever required. Recheck it. This is the secret of web design. You can create a well designed, eye catching, beautiful website and web pages.

Never forget needs of your customer, owner of the website. You have also to keep in mind customers of the business owners. Ultimately they will be visiting the website you are designing. A well designed website enhances business credit of the website owner. Your designed website must accomplish the business goals.


Couverture-wikimedia

There was no conformance bug (just a limitation of the W3C validator that does not parse RDF).
There was no conformance bug (just a limitation of the W3C validator that does not parse RDF). | Source

Validate website design with W3C


Please do not forget to validate your website with W3C, World wide web consortium. W3C checks and verifies your site against any error in HTML and CSS. It also gives warning for any possibilities of any future error. Check your web design through W3C, correct the errors and warnings indicated in the report. Re-validate your web design. Once you reach to zero error and warning, your web design is technically error free.

You can put icons of W3C anywhere in your website, preferably in the footer to show that the website is technically error free and all CSS and HTML are correct. This will show your efficiency and accuracy in web designing.


More by this Author


Comments 6 comments

Arun 4 years ago

I am a SEO professional and i can understand importance of web designing in SEO. SEO friendly websites do well.

W3C validation is important.

Thanks for well structured article. Rated up and Useful.


Vikas Sharma 4 years ago

Wonderful article. I am a web designer but don't know that much of web design as you. I learn a lot and thankful to you.

It help me in better design. Rate up. Its beautiful.


Rusticliving profile image

Rusticliving 4 years ago from California

Thank you for your info. I built my own website for my online business and I enjoy it very much. Look forward to reading more of your informative Hubs.

Blessings,

~Lisa


jenubouka 4 years ago

Great info, the HTML code thing is completely confusing, thanks for the resources.


Cat R profile image

Cat R 4 years ago from North Carolina, U.S.

Very interesting! I had started building my own website in MS Publisher, but couldn't get it online. Now I am looking for a way to create a free or low-cost website that allows me to go beyond a one-pager.

Great supportive tools!


tsarnaudova profile image

tsarnaudova 4 years ago from Sofia, Bulgaria

Thank you for useful content, Jyoti. I liked the hint about colours - I also think they are important for impression that a website makes on fisrt sight, and after that of course.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working