arixstudio l virtual web design academy

14
CHAPTER l Web Development ( Part ll ) - Web designing

Upload: ashsha-bst

Post on 19-May-2015

150 views

Category:

Design


1 download

DESCRIPTION

Session 2 - Chapter l - Web development Part ll [ Web Designing ]

TRANSCRIPT

Page 1: arixstudio l virtual web design academy

CHAPTER lWeb Development ( Part ll )- Web designing

Page 2: arixstudio l virtual web design academy

Web Development Procedure

We know that Web development is the process of creating a website which includes Web designing, Programming, Customizing, Content managing etc. You must have heard about web programming but before that, let’s proceed to web designing and it’s modality.

Page 3: arixstudio l virtual web design academy

Website’s Layout

The layout is the visual part of website that can be broken down into five distinct elements:

• Images• Headlines• Body content• Navigation• Credits

Most Web pages will include all five of these items, but do you know what they all are?

Page 4: arixstudio l virtual web design academy

Images

Images are a visual element of almost every Web page. They draw the eye and help direct readers to specific parts of the page. In fact, most high quality Web pages have several high quality images to both decorate and inform the page.

Page 5: arixstudio l virtual web design academy

Headlines

After images, headlines or titles are the next most prominent element on most Web pages. Most Web designers use some form of typography to create headlines that are larger and more prominent than the surrounding text. Plus, good SEO requires that you use the HTML headline tags <h1> through <h6> to represent the headlines in the HTML as well as visually.

Page 6: arixstudio l virtual web design academy

Body Content

Body content is the text that makes up the majority of your Web page. Content is why people come to your Web page and the layout of that content can help them read it more effectively. Using items like paragraphs and page widths can make a Web page easier to read, while elements like lists and links make the text easier to skim. All of these parts fit together to create page content that your readers will comprehend and enjoy.

Page 7: arixstudio l virtual web design academy

Navigation

Most Web pages are not stand-alone pages, they are part of a larger structure - the website. So navigation plays a crucial role for most Web pages to keep customers on the site and reading other pages. But Web pages can also have internal navigation, especially long pages with lots of content. Navigation helps your readers stay oriented and make it possible for them to find their way around the page and the site as a whole.

Page 8: arixstudio l virtual web design academy

Credits

Credits on a Web page are the informational elements of a page that aren't content or navigation, but provide details about the page. They include things like:

• The publication date• Copyright information• Privacy policy links• Other information about the designers, writers, or owners of the Web page.

Most Web pages include this information at the bottom, but you can also include it in a sidebar, or even at the top if it fits with your design.

Page 9: arixstudio l virtual web design academy

Well,,

As I said before, here you read general concept of web development, however we could discuss all these procedures in detail @ our facebook group. Also I try to explain easier in a way you get the significant points as we are in basic level and a long way to go ;)

When you start a new design, no matter what your design methodology is, you start with a blank page. There is nothing on the Web page - so the first thing you'll do is put something up on the page.But do you think about the placement of those elements or do you just throw them onto the page willy nilly? Good designers don't allow the position and placement of their designs to occur randomly.

Page 10: arixstudio l virtual web design academy

Software(s) Introduction

Adobe Dreamweaver is one of the most popular professional web development software packages. Dreamweaver is a complex product suitable for everything from simple page design to development of dynamic pages written with ColdFusion, PHP, ASP, CSS, XML, XSLT, and JavaScript.

Page 11: arixstudio l virtual web design academy

So really, what is Dreamweaver?

The common misconception with Dreamweaver is that Dreamweaver is designed to or is even capable of completely removing the agency of HTML and CSS coding from web design. This is like saying that a nail-gun can completely replace a hammer. A nail-gun will nail the boards together, but it is an imprecise tool, and there is a certain amount of danger while using it. If you can’t occasionally fall back on the hammer for more detail-oriented work, then there’s a definite limit to what you can build. A skilled carpenter knows how to use the hammer and occasionally does so when the nail-gun just isn’t doing what is intended.

Page 12: arixstudio l virtual web design academy

Dreamweaver, like the nail-gun, is designed to make your life easier. You may never learn HTML or CSS, but without knowing them, you are limited to Dreamweaver’s way of doing things. This is not altogether a bad thing:

It is simply a slightly narrow perspective on a large field.

Page 13: arixstudio l virtual web design academy

Let’s come back to Layout

That’s not to say that every top website needs an incredible visual design, but if a site looks like it hasn’t been updated since 1994, it’s just not going to be associated with other great websites. A clean and simple design is usually all you need. Bells and whistles are nice, but I’m one who tends to go with the “less is more” theory. You don’t want your design to be over crowded. You just want it to look good so it can stand out from your competitor(s) in the minds of your potential clients.

# First impressions are key. Although good design alone will not keep someone on your site — an eye-catching design will, at the very least, grab their attention long enough to take a look around.

Page 14: arixstudio l virtual web design academy

In next session you’ll read:

• How to bring alive a layout

Discuss your doubts here if any,