Web Design Concept, Architecture and Planning Prodia Web Development for Integrated Marketing Communication Web Design Concept, Architecture and Planning

Web Design “The Concept”

What is The Web ? In a nutshell, the web is a whole bunch of interconnected computers talking to one another. The computers (on the web) are typically connected by phone lines, digital satellite signals, cables, and other types of data-transfer mechanisms. A ‘data-transfer mechanism’ is a nerd’s way of saying: a way to move information from point A to point B to point C and so on.

What is The Web Server ? The computers that make up the web can be connected all the time (24/7), or they can be connected only periodically. The computers that are connected all the time are typically called a ‘server’. Servers are computers just like the one you’re using now to read this article, with one major difference, they have a special software installed called ‘server’ software.

What is the function of server software / programs ? Server software is created to ‘serve’ web pages and web sites. Basically, the server computer has a bunch of web sites loaded on it and it just waits for people (via web browsers) to request or ask for a particular page. When the browser requests a page the server sends it out.

How does the web surfer find a web site? The short answer is: by typing in the URL, or in other words, the web site address. So for example, if you wanted to find the web site www.prodia.co.id, you would type in the address into your web browser’s address bar or maybe use your ‘favorites’ or ‘bookmarks’ link to prodia website. There are other ways to find web sites (like search engines,) but behind the scenes web sites are all being found by going to the web site’s official address.

Registering your domain name If you ever wondered what the heck registering a domain was all about ? you probably figured it out by now! But just in case – registering a domain name gets you an official address for your web site on the World Wide Web. With this ‘official’ address, the rest of the web can find you. Like your home address is unique in the real world, there also can’t be any duplicate addresses on the Internet, otherwise no one would know where to go! In other words, domain names are unique addresses on the web.

Why does registering a domain name cost money? If you want to have your own unique address on the web, your own domain name, it will cost a few bucks for each year you want to ‘own’ the name. The cost of registering a domain name ranges from less than $10 USD to about $30 USD per year. You can register a domain from 1 to 10 years. The reason for the cost is that the central ‘address book’ of all the world’s domain names needs to be updated – somebody’s got to pay for that! You may have noticed that I just snuck in a little extra piece of information: the giant ‘web address book’ of domains.

What is Web Design ? Web design is the process of designing websites - a collection of online content including documents and applications that reside on a web server/servers. As a whole, the process of web design includes planning, post-production, research, advertising, as well as media control that is applied to the pages within the site by the designer or group of designers with a specific purpose.

Starting a Web Design Project A Website is like an information flow, with you as the provider and your site visitors as the receivers of the information. If you don't plan your website with this in mind right from the start, you could find yourself with a brand new website that solves all your immediate needs but not those of your site visitors

Web site these days Clicking away from your website has never been easier for Internet users. There are about 35 million websites competing with yours on the Internet (source: Zooknic). Search engine results are becoming better and better and Internet connection speeds faster and faster - finding one of your competitors' websites is now very quick and very easy

Step to start your web project Work out your site visitors' immediate needs Create an information flow Usability testing

Work out your site visitors' immediate needs Now we've worked out what our site visitors' immediate needs are, we need to create an information flow, a path (or paths) that your site visitors will traverse whilst on your website. The path(s) will initially address their concerns and needs and will gradually take them towards completing your goal for them To create this plan we'll need to :

Work out your site visitors' immediate needs Identify the different groups of people who'll use your website Work out what you want each of these groups to achieve on your website Identify the information you'll need to provide for them to achieve this (and in what order) Work out what might put them off achieving this Identify the information you'll need to provide to prevent them being put off

Create an information flow Your website has to provide information that fulfils the immediate needs of your site visitors. This is the fundamental principle behind usable website design, “so let's repeat it one more time: Your website has to provide information that fulfils the immediate needs of your site visitors”.

Example on the website

Example on the website The three boxes in the middle answer some immediate questions that users may have and proactively address their concerns. The contact us button on the top-left can remain in that position on every page, so users always have the opportunity to jump to the contact page

Usability testing Once the website plan has been created, it's time to test it. This is the most important usability test that needs to be done and the one that will save you the most time and money in the long run. According to IBM, every $1 invested in making your website easy-to-use returns $10 to $100 The most common objections to doing usability testing are: It's too expensive! It'll take too much time! I don't know how to do it!

Usability testing Wrong, wrong, and wrong! Usability testing, especially at this early stage, is incredibly cheap, quick, informal and easy to do. You just need to show five people the plan/site map of the website and ask them: What's the point of this website? If you were on this homepage, where you would click? And where after that? Is it what you need?

Usability testing That's it! As long as these five people roughly fit into your user profile everything should be fine. It's been shown that using five people for a usability test will uncover 85% of the usability issues of the website

Web 2.0

What is Web 2.0 The term Web 2.0 is associated with web applications that facilitate participatory information sharing, interoperability, user-centered design, and collaboration on the World Wide Web A Web 2.0 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community, in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 2.0 include social networking sites, blogs, wikis, video sharing sites, hosted services, web applications, mashups and folksonomies

Why it called Web 2.0 The term “Web 2.0” is closely associated with Tim O'Reilly because of the O'Reilly Media Web 2.0 conference in late 2004. Although the term suggests a new version of the World Wide Web, it does not refer to an update to any technical specification, but rather to cumulative changes in the ways software developers and end-users use the Web. Whether Web 2.0 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee, who called the term a "piece of jargon", precisely because he intended the Web in his vision as "a collaborative medium, a place where we [could] all meet and read and write". He called it the "Read/Write Web"

Web 2.0 Concept Web 2.0 can be described in 3 parts which are as follows: Rich Internet application (RIA) — defines the experience brought from desktop to browser whether it is from a graphical point of view or usability point of view. Some buzzwords related to RIA are Ajax and Flash. Service-oriented architecture (SOA) — is a key piece in Web 2.0 which defines how Web 2.0 applications expose their functionality so that other applications can leverage and integrate the functionality providing a set of much richer applications (Examples are: Feeds, RSS, Web Services, Mash-ups) Social Web — Defines how Web 2.0 tends to interact much more with the end user and make the end-user an integral part.

Web 2.0 Concept As such, Web 2.0 draws together the capabilities of client- and server-side software, content syndication and the use of network protocols. Standards-oriented web browsers may use plug-ins and software extensions to handle the content and the user interactions. Web 2.0 sites provide users with information storage, creation, and dissemination capabilities that were not possible in the environment now known as "Web 1.0".

Web 2.0 Features Web 2.0 websites include the following features and techniques: Andrew McAfee used the acronym SLATES to refer to them S e a r c h L i n k s A u t h o r i n g T a g s E x t e n s i o n s S i g n a l s

Web 2.0 usage One of the important part of Web 2.0 is the social Web, which is a fundamental shift in the way people communicate. The social web consists of a number of online tools and platforms where people share their perspectives, opinions, thoughts and experiences. Web 2.0 applications tend to interact much more with the end user. As such, the end user is not only a user of the application but also a participant by: Podcasting Blogging Tagging Contributing to RSS Social bookmarking Social networking

Website “The Architecture”

What is Website Architecture Website architecture is the organization and structure of website information. It is a phase that begins after a website plan has been documented, but before the website is developed. If your website had proper planning before starting to draft the architecture, you will already have a clear idea of Website objectives Content requirements User groups These three components tell an informational architect what is required in order to produce a digital structure that will meet the needs of both the business and the website users.

Website Objectives Website objectives help architects prioritize information. They are measurable goals that answer the question, “What will the website accomplish”? More clearly, what the website will accomplish for the business. Will the website spawn a 15% increase in leads? Generate 25% more sales? Create $100,000 in new subscriptions within the first year? Help gather feedback 50 times faster from users of your products and services? Cut business costs 5% by automating processes? Whatever the objectives, they need to be defined clearly in a quantifiable, time conscious statement.

Content Requirements Content requirements are detailed statements that answer the question, “What will the website do?” This helps the architect organize the informational architecture in a way that meets the needs of the business, website users, and the search engines. Will the website need a checkout process that can be completed in one step? Will the business need a way to recover abandoned orders? Will users want to track their orders? Will the search engines need to be blocked from indexing SSL pages and printer friendly pages to avoid duplicate content issues? Content requirements align with website objectives and user groups to define this final component. It’s at this point that the job of website architecture begins.

User Groups User groups describe who will use the website. They help architects categorize informational architecture in a way that humans can understand.  Will the users be shoppers, researchers, investors, donors, potential members, and/or potential employees? Depending on time and budget, these user groups can be further developed into individual user profiles or personas that help the website architecture empathize with the user. This results in a deep understanding of who primary users are and what content they want.

What it’s need A website architect uses the components gathered above to start shaping, connecting, and forming the informational architecture. Making your website easy to navigate is a process that involves site mapping, task flows, and wireframes.

Site Map A site map is a lot like a business organizational chart. It’s a visual way of showing how the website will be organized. In this step, website architecture gives names to pages and arranges them in a way that makes sense to human users and the search engines.

Task Flow A task flow is like a site map, but also shows how users will navigate the site. For example, a site map would show a block that represents the Contact Us page, but a task flow shows what happens if the user interacts with that page. If users submit the Contact Us page, where will they go next? What if they experience an error?

Wireframe A wireframe is a grayscale digital skeleton that helps visualize how website pages will layout. Placeholder headlines, subheading, text, images, navigation, advertising, and other required content will be added to show the informational architecture users will view when visiting the website. An organized and structured website begins with creating a website architecture before development begins. By knowing the objectives, content requirements, and user groups, you can produce an informational architecture that includes a site map, task flow, and wireframe that ensures a website meets the needs of both the business and the website’s users.

Information Architecture Information architecture (IA) is the approach you take to structure and navigation on your website. The IA model that you choose will have an impact on how you design your site. For some websites, this is as simple as choosing to put all your content on a single homepage. There is a few model type of Information architecture that can be adopt to creating a better website such as;

Flat The flat Information Architecture model is where you have more than one page, and each page is granted equal importance. You can go from one page to another page in a single click. This method can also be called monocline grouping.

Index The index structure is the web equivalent of a directory. The homepage acts as the index, navigating you to the right page within the directory.

Strict Hierarchy The strict hierarchy looks like an organizational chart in most large companies. People report to their boss, and their boss reports to their boss. Management links to lower level employees via their managers. In the web architecture example, you access a lower level page via its parent.

Multi-dimensional hierarchy Multi-dimensional hierarchy, other than the most primitive, must opt for a multi-dimensional hierarchy to achieve their usability and navigation goals. The multi-dimensional hierarchy embraces the nuance that a strict hierarchy ignores.

Search Search has become fundamental to understanding the architecture of many of today’s leading websites. Google, clearly, would be unusable without search functionality. Twitter does not rely on search to be functional, but it adds a whole new dimension to their social network. Without search, users would exist in pockets of followers connected only by disparate connections.  Search adds a discovery mechanism to content and people.

Website Navigation Models There is no right or wrong navigation model for a website. A website usually combine more than one method in their website architecture, providing a choice for website users.  Too much choice can risk causing confusion and cluttering your design. From their experiences elsewhere on the web, website users have engrained views on how your website navigation should work. Consider this when formulating your navigation model and reduce the friction involved in navigation. Here are the models below;

Bread crumb Trail Breadcrumb trail navigation lets you know where you are in the hierarchy of a website. In the example below, you know you are inside News > World news > United States.  This allows your website users to know where they are in a website, and provides a navigational shortcut to skip back.

Horizontal Top Bar Horizontal top bars are among the most common navigation models used on all websites, including social networking websites. Here is an example of a simple horizontal top bar used on Twitter. While website users are comfortable browsing vertically, they are less comfortable browsing horizontally. Try to keep this is mind when formulating your navigation – make sure the number of links is known in advance.

Horizontal Top and Vertical side bar A top and side bar method is deployed on most prominent website.  Usually the top bar will be used for top-level navigation, while the side bar will allow users to access sub-categories. The side bar will be used for any conditional or dynamic links. It is easier to add additional links vertically, but you must be more careful when adding additional links horizontally. This is the method favored by Facebook.

Horizontal Top Bar with revealed drop downs This has become an increasingly popular navigation method, which comes with some variations. Sometimes you click on a menu and a further sub-menu or link is revealed. In other occasions, simply hovering over the menu causes this to be revealed. One advantage of this method is space efficiency.  The menu takes up little room and it can provide an intuitive method of navigating website with a deep structure.

Paging This is a method used by a website where content spans several pages. News websites will sometimes use this method to break up larger articles. Websites often use this approach to browse through profiles and present search result pages. Look at the example below, on Myspace. This allows users to skip back and forward between results, and browse from start to finish easily. When your Website displays search results, this can be the most intuitive way to present them to your users.

Tabs Tabs are usually a type of horizontal navigational bar, although they can be used in other settings too. They serve to make it easy for the user to know the section of a network they are on. Tabs have rapidly became a major feature of web browsers, so users are now increasingly comfortable with their use. In the example below, check out how Linked in uses tabs.

Web Design “The Planning”

How to structure the website Unsure of how to structure your information and visualize what their Websites should contain? For most small, medium-sized to big businesses, there are two types of content sections you’ll need to think about. Common sections: those elements you see on most commercial Websites. Company-specific sections: those sections that are unique to your business. They may be sub-sections of the above.

Common Section These type of section will contain general information about your company. It will be up to you to decide which sub-elements should be included, of course, but consider this following there are view things that you should consider to put before building a company website : About Us Contact Us Product and Services

About Us You’ll see this on almost every commercial Website, both large and small. People like to know who they’re doing business with, and this is your opportunity to tell them. Your information might fit on a single page, or stretch to several. Elements you might include are: Who we are Company history Company profile Mission statement

Contact Us It may seem obvious, but many sites either don’t provide adequate contact information, or they forget it entirely! You should include as many different ways for customers to contact you as possible. Common elements for a ‘Contact Us’ page are: Telephone and fax numbers Email addresses Email forms Physical address A ‘We Are Here’ map Emergency contact details

Product and Services Most companies will want to include information about their products or services on the index page (the front or home page), but it’s important to also dedicate a separate section of your site to your products. This will help your customers find your products and services easily, and allow them to research and assess your offering quickly.

Company Specific Section The best way to go about creating company specific sections for your site is to follow the same general structure as above, creating logical subsections for each section. The first page of a subsection should contain general information on the subject, as well as links to more detailed information if your visitor requires it. For example, a second hand car site may have an accident and repair section that contains the following sub-sections: Paintwork repairs Body repairs Insurance assessments Accident and Repair FAQs

Company Specific Section Take a logical approach to the organization of your site, group related material, and always offer general information first, followed by optional, more detailed information for your users.

How To Design Intuitive Navigation Bad navigational systems kill Websites. This information will help you avoid some of the more common navigational mistakes made by many small, medium to big sized businesses.

What causes bad navigation? Many business Websites actually do more harm than good. When a user comes away from your Website feeling frustrated, it reflects directly on your business. Bad navigational style is the number one cause of such online aggravation, and it typically has two key effects upon your site’s visitors: They leave before having explored all the information you offer that’s relevant to them They get frustrated while trying to explore the site, and simply leave

Bad navigation can be caused by Overly complicated or gimmicky menu systems Inconsistent or unusual placement or style of links The user not being able to find the links at all Inconsistent page design or layout Unclear or misleading link text Graphics-only links Notice that inconsistency is a common theme here.

So what makes good navigation? Ever heard the phrase "dare to be different"? Well, as far as designing Website navigation is concerned: forget it. Daring to be different with your navigation can cause the death of your Website just as quickly as can sub-standard content or 5 minute Flash introductions. The key to intuitive navigation is consistency. Take a look at any large commercial Website and you’ll find very similar elements in very similar places. Why? Because that’s what users expect. Here are a few guidelines to bear in mind when considering your site’s navigation:

1. Place major section/category links horizontally, near the top of every page Most sites will place these links beneath the logo in the top left corner. If this doesn’t immediately make sense, think about how you read a page of text: from top left to bottom right. Right? Also, limit your major categories to a maximum of about eight. Give them too many choices, and your users won’t make a choice at all.

2. Put section-specific links in a clearly marked column along the left-hand edge Again, this is where users will expect to find such links. Remember, the easier your site is to use, the better the user experience, and the better the impression they’ll have of your site. This doesn’t mean you should throw style out the window of course, but, like many things in life, it’s a matter of balance and priority. An example of section-specific links for the obligatory About Us section might look like this: About Us Who We Are Company Profile Mission Statement

3. Use contextual links in your body text Wherever appropriate, use contextual links to lead your users to related information. And don’t be afraid to link to outside content: contextual links to outside sources add value to your own information, and well chosen links lend validity to your authority on a given subject. If your information is of interest to your visitor he’ll come back, and if he doesn’t, then you never had him anyway.

4. Provide a search box for your visitors. All users are different, and some will undoubtedly prefer to find the information they seek via a search box rather than your neatly placed, intuitive text links. A search box is an essential feature of any Website, and it’s extremely easy to set up

5. Use text links wherever possible. Not all the visitors to your site will be human. Many will be search engine robots. Search engines and graphical links don’t mix well, so if you can’t avoid using graphical links, then provide text alternatives at the bottom of the page.

6. Provide a site map. Sounds kind of obvious, huh? However, most small to medium sized sites don’t offer a site map, and this is a crying shame. They’re very easy to make, don’t have to be particularly pretty to be functional, and will aid both your human and non-human visitors. A good place to put a link to your site map is in the page ‘footer’ near the copyright notice

How to Write a Page Titles Good page titles can increase traffic and qualify your visitors. A Web page’s title has two main functions: 1. To explain what the page contains, and 2. To promote keywords or phrases and thus increase and qualify traffic.

How to Write a Page Titles A page’s title is the most important part of what makes a user click a link in a list of search results. To demonstrate, imagine you’re in search of a second hand car. Which of these links are you more likely to click? J.A. Hendersen & Sons A/S Affordable second hand cars Untitled document SALE!!! CARS!! DEALS ON WHEELS AT LAUGHING LARRY’S SHOWROOM!!! It’s clear that your first choice would be number two, but let’s take a look at why

How to Write a Page Titles So what’s so good about number two? Ideally page titles should either contain, or better still, be the phrase that your visitors search for. Many search engines award higher rankings to short, concise titles that contain the searcher’s keywords. Ideally you should keep your page titles less than 40-50 characters long and be as honestly descriptive of the page’s contents as possible. You might get more hits by titling your pages ‘free porn!’ but if you sell second hand cars, wouldn’t you rather have visitors that, want to buy second hand cars?

How to Choose Keyword Targeting keywords increases traffic and qualifies visitors. Keywords and search terms are those words or phrases that your customers may enter on a search engine in order to find a Website that offers products or services like yours. Choosing keywords is not difficult if you follow a few guidelines.

1. Think Like Your User Try to think like your customers, and choose words or phrases that you could imagine them entering into a search engine. How would you find a site like yours? If you can find your competitors via a search engine, what search terms did you use to locate them?

2. Be Specific Try to think like your customers, and choose words or phrases that you could imagine them entering into a search engine. How would you find a site like yours? If you can find your competitors via a search engine, what search terms did you use to locate them?

3. Use Words from the Page Use words that appear in your page’s content. Let’s say your site sells second hand cars and you have different sections for Fords and Toyotas. An effective choice of keywords might work like this: Front page: ‘second hand cars’, ‘used cars’, ‘affordable cars’ Ford page: ‘second hand fords’ ‘used fords’ ‘previously owned fords’ Toyota page: ‘second hand toyotas’ ‘used toyotas’ etc etc. And make sure you use these keywords in your page titles.

Conclusion That is all we need to build such a good website for your business. There for this presentation may become a reference to help you build your wonderful website for your company. Have a pleasant designing and building your website

Thank You Very Much For further information : Rully Frantino Email : rullyf@gmail.com Phone : +6287886923972 Blackberry pin : 26A899D7