{"id":19349,"date":"2013-04-25T05:05:51","date_gmt":"2013-04-25T09:05:51","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=19349"},"modified":"2013-04-25T05:09:15","modified_gmt":"2013-04-25T09:09:15","slug":"a-complete-guide-to-good-website-designing","status":"publish","type":"post","link":"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/","title":{"rendered":"A Complete Guide to Good Website Designing"},"content":{"rendered":"<p>As a senior designer and developer I have identified some problems that are common with a large number of web projects. The main one is the failure to make a good plan. Therefore I\u2019ve pieced together this guide to help designers, clients and businesses to plan and bring to fruition successful websites. I have used language that is non-technical and content that gives a broad view of the designing process.<\/p>\n<h2>The \u201cWaterfall\u201d Method<\/h2>\n<p><a href=\"http:\/\/en.wikipedia.org\/wiki\/Waterfall_model\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/waterfall-method-good-web-design-coding-practices-guide-680x453.jpg\" alt=\"\" title=\"Waterfall Model Explained\" width=\"680\" height=\"453\" class=\"alignnone size-large wp-image-19353 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 680px; --smush-placeholder-aspect-ratio: 680\/453;\" \/><\/a><br \/>\n<em>Waterfall Model Explained<\/em><\/p>\n<p>Flexibility is the key to good website design. The content should be such that it can be altered at will. It\u2019s ludicrous to think that all aspects of a website can planned beforehand on paper.<\/p>\n<p>Large projects sometimes use the \u201cwaterfall\u201d method of developing a website. They specify everything before hand:  the type\u2019s point size, the length of headers and precisely how a photo gallery will function. In my view,<\/p>\n<blockquote><p>It\u2019s ludicrous to think that all aspects of a website can planned beforehand on paper.<\/p><\/blockquote>\n<p>Websites being flexible we have to reconcile the necessity for clarity and thorough specifications with the intrinsic suppleness of the medium. This can be achieved by breaking down the difference. If you follow the process I\u2019ve written here, you will be able to create content as well as design specifications which will greatly lessen the chances of glitches cropping up midway through the project, and at the same time create a framework that will give the website the flexibility to grow as time goes by.<\/p>\n<h2>Consequences of Failing to Plan<\/h2>\n<p><a href=\"https:\/\/www.andysowards.com\/blog\/2012\/simple-intelligent-powerful-a-simple-process-for-product-design-and-development\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/apple1984-mac-6-pillars-of-steve-jobs-design-philosophy-680x400.jpeg\" title=\"Simple. Intelligent. Powerful. A Simple Process For Product Design And Development\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 680px; --smush-placeholder-aspect-ratio: 680\/400;\" \/><\/a><br \/>\n<em>Simple. Intelligent. Powerful. A Simple Process For Product Design And Development<\/em><\/p>\n<ul>\n<li>Designer\/developer has to make assumptions, correct or incorrect, about how some content will look on the website.\n<\/li>\n<li>Communication between developer\/client on trivial subjects gets multiplied and work is delayed.\n<\/li>\n<li>Backtracking which leads to delays and deadlines getting missed.\n<\/li>\n<li>Cost rise above expectations as work goes outside the initial project plan.\n<\/li>\n<li>Client dissatisfaction as well as confusion that results from processes that are not based on original plans.\n<\/li>\n<\/ul>\n<h2>Assessing Needs<\/h2>\n<p><a href=\"http:\/\/www.paper-leaf.com\/blog\/2012\/02\/steps-to-take-before-designing-a-website\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/web-design-process-steps-to-take-before-designing-a-website-550x249.jpg\" alt=\"\" title=\"STEPS TO TAKE BEFORE DESIGNING A WEBSITE\" width=\"550\" height=\"249\" class=\"alignnone size-large wp-image-19354 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 550px; --smush-placeholder-aspect-ratio: 550\/249;\" \/><\/a><br \/>\n<em>STEPS TO TAKE BEFORE DESIGNING A WEBSITE<\/em><\/p>\n<p>Remember these things:<\/p>\n<ul>\n<li>A website should meet the requirements of the clients \u2013it is not for you.\n<\/li>\n<li>A website isn\u2019t an occasion. It is a bendable, extensible tool for communications that shows your business, both its negative and positive aspects.\n<\/li>\n<\/ul>\n<p>The website must function mutually with the company\u2019s basic marketing plan. The requirements for the site may coincide with the other endeavors and strategies of the marketing section. This is fine. The important thing to note is that the branding\/marketing of the firm must reflect the website\u2019s design and structure.<\/p>\n<h2>Typical Project Roles<\/h2>\n<p><a href=\"http:\/\/blog.teamtreehouse.com\/10-things-to-know-before-designing-for-the-web\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/10-things-to-know-before-designing-for-the-web-680x195.jpg\" alt=\"\" title=\"10-things-to-know-before-designing-for-the-web\" width=\"680\" height=\"195\" class=\"alignnone size-large wp-image-19355 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 680px; --smush-placeholder-aspect-ratio: 680\/195;\" \/><\/a><br \/>\n<em>10 Things to Know Before Designing for the Web<\/em><\/p>\n<p>All projects are different; but there are typical roles in a web project of some size. They are:<\/p>\n<ul>\n<li>Clients, who stand for the main features of the business.\n<\/li>\n<li>Manager of the project.\n<\/li>\n<li>Editor\/copywriter.\n<\/li>\n<li>Web designer.\n<\/li>\n<li>HTML coder.\n<\/li>\n<li>CMS\/web developer.<\/li>\n<\/ul>\n<p>Remember that one person can multi-task. The number of players has no direct bearing on the value of the result. Sometimes, a series of face-to-face meetings between executives and experienced designers can bring forth a great website.<\/p>\n<h2>Find Out What Your Website Content Will Be<\/h2>\n<h3>Number of Contributors<\/h3>\n<p><a href=\"http:\/\/blog.teamtreehouse.com\/building-and-managing-virtual-teams\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/building-and-managing-virtual-teams.jpg\" alt=\"\" title=\"Building and managing virtual teams\" width=\"590\" height=\"317\" class=\"alignnone size-full wp-image-19356 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 590px; --smush-placeholder-aspect-ratio: 590\/317;\" \/><\/a><br \/>\n<em>Building and managing virtual teams<\/em><\/p>\n<p>When you plan to put more content to the site, think about the contributors. In a small business, two is fine. In a firm, 5 or multiples of five could contribute. The time needed to edit\/proofread the copy and image content expands in the same ratio as the number of contributors.<\/p>\n<h3>Content is Not Only Text<\/h3>\n<p><a href=\"http:\/\/www.hongkiat.com\/blog\/designing-content-intensive-layout-tips-and-examples\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/designing-content-intensive-layout-tips-and-examples-550x249.jpg\" alt=\"\" title=\"Designing Content Intensive Layout: Tips And Examples\" width=\"550\" height=\"249\" class=\"alignnone size-large wp-image-19358 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 550px; --smush-placeholder-aspect-ratio: 550\/249;\" \/><\/a><br \/>\n<em>Designing Content Intensive Layout: Tips And Examples<\/em><\/p>\n<p>The content must not be only plain text. By using these multimedia features, you will significantly enhance the allure and efficacy of the website: 1) Images. 2) Audio. 3) Documents (PDFs). 4) Adobe Flash files. 5) Video. 6) Content feeds. 7)  Photos. 8) RSS feeds. 9) \u2018Friends\u2019 list from Facebook. 10) Twitter stream.<\/p>\n<h3>Good Photography is Valuable<\/h3>\n<p><a href=\"http:\/\/webdesignledger.com\/inspiration\/21-examples-of-big-photography-in-web-design\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/21-examples-of-big-photography-in-web-design.jpg\" alt=\"\" title=\"21 Examples of Big Photography in Web Design\" width=\"580\" height=\"440\" class=\"alignnone size-full wp-image-19359 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 580px; --smush-placeholder-aspect-ratio: 580\/440;\" \/><\/a><br \/>\n<em>21 Examples of Big Photography in Web Design<\/em><\/p>\n<p>Photos explain the organization\u2019s brand. Go for professional photographers. You will not need plenty of photos; only good pictures. Ten professional pictures are more worthy than 50 amateur snaps. Sometimes generic images will do; stock photos can also be used. But nothing can substitute for high-class photos of your storefront, staff, services or products.<\/p>\n<h3>Good Writing Has High Value<\/h3>\n<p><a href=\"http:\/\/www.distilled.net\/blog\/distilled\/content\/how-to-produce-high-quality-written-content\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/how-to-produce-high-quality-written-content.png\" alt=\"\" title=\"How to Produce High Quality Written Content\" width=\"529\" height=\"375\" class=\"alignnone size-full wp-image-19360 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 529px; --smush-placeholder-aspect-ratio: 529\/375;\" \/><\/a><br \/>\n<em>How to Produce High Quality Written Content<\/em><\/p>\n<p>Writing web content is not just writing policy papers, memos or technical documents. If your company doesn\u2019t have a person who can write clearly and briefly marketing copy, take on an expert\/editor.<\/p>\n<h2>Key Elements in Website Structure Planning<\/h2>\n<p>Site map: Your site map must resemble a flow chart and be created with software like Visio or a tool that\u2019s free. You could also build an outline with featured lists and serrations that point to pages as well as sub-pages.<\/p>\n<h3>Definition of Content<\/h3>\n<p>It\u2019s important to define every element of your content. If you fail to do this then developers will have to guess what each kind of content must be. Content elements need clear direction. They need to say exactly what they aim to accomplish and how they will be used.<\/p>\n<h3>Checklist of Content<\/h3>\n<p>Here\u2019s a list of common kinds of content: Articles, banner advertising, blog, documents, discussion forum, forms for contact, e-commerce, quotes, physical products, email newsletter, digital content, event registration, event calendar, image gallery, incoming and outgoing RSS feeds, link management, search, staff directory, and social media links.<\/p>\n<h3>Separating Content From Design<\/h3>\n<p><a href=\"https:\/\/www.andysowards.com\/blog\/2013\/website-design-dominates-in-the-world-of-web-content-development\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/difference-between-ia-and-ux-design.png\" title=\"Website Design Dominates in the World of Web Content Development\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 520px; --smush-placeholder-aspect-ratio: 520\/260;\" \/><\/a><br \/>\n<em>Website Design Dominates in the World of Web Content Development<\/em><\/p>\n<p>Though design has an intimate relationship with content both are also detached from one another. This may sound confusing. What is means it that content does not have all elements of design. For example, each article in your website will have:  Title, Meta title, Meta description, Author, Date of publication, Category, Summary, Main text. These bits of information make up an entire article, regardless of design you use for your copy: layout, fonts, colors, photo thumbnails, author and so on. Content is applicable even without design. The plain text may not look pretty but it reads well.<\/p>\n<h2>Meta Data and Good Content<\/h2>\n<p><a href=\"http:\/\/sixrevisions.com\/content-strategy\/seo-tips-improve-web-design\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/seo-tips-improve-web-design.png\" alt=\"\" title=\"10 Excellent SEO Tips That Will Improve Your Web Design\" width=\"365\" height=\"219\" class=\"alignnone size-full wp-image-19372 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 365px; --smush-placeholder-aspect-ratio: 365\/219;\" \/><\/a><br \/>\n<em>10 Excellent SEO Tips That Will Improve Your Web Design<\/em><\/p>\n<p>Meta data relates what your content is all about. In an article, everything &#8212; except the title and text &#8212; is called Meta data. Some people think that Meta data is meant for search engines. While search engines rely on this data for effective web page indexing, you may need Meta data for your records, without showing it. The minimum you require to qualify as an article is: Title, Text, and Author.<\/p>\n<h3>Plan for Future<\/h3>\n<p><a href=\"http:\/\/mobile.smashingmagazine.com\/2011\/03\/29\/designing-for-the-future-web\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/designing-for-the-future-web.jpg\" alt=\"\" title=\"Designing For The Future Web\" width=\"500\" height=\"336\" class=\"alignnone size-full wp-image-19364 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 500px; --smush-placeholder-aspect-ratio: 500\/336;\" \/><\/a><br \/>\n<em>Designing For The Future Web<\/em><\/p>\n<p>The value of high-quality Meta data rises with time. Over the years, if you have a stock of 150 articles, you could sort them out by category, author and date.<\/p>\n<h2>Wireframes<\/h2>\n<p><a href=\"http:\/\/webdesign.tutsplus.com\/tutorials\/workflow-tutorials\/a-beginners-guide-to-wireframing\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/beginners-guide-to-wireframing-workflow-tutorial-680x363.png\" alt=\"\" title=\"A Beginner\u2019s Guide to Wireframing\" width=\"680\" height=\"363\" class=\"alignnone size-large wp-image-19365 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 680px; --smush-placeholder-aspect-ratio: 680\/363;\" \/><\/a><br \/>\n<em>A Beginner\u2019s Guide to Wireframing<\/em><\/p>\n<p>Wireframes deal with the layout factor of web design. They show the layout of the page and are created in grayscale. Great tools like Illustrator, Photoshop and Visio work nicely for this, as do specialized ones like Balsamiq.<\/p>\n<p>Designers tend to make things appealing from the start but this must be completely avoided at the wireframing phase for it will divert from the aim of the wireframe which is to resolve where things must go and not what size of font to use or in what color should navigation be. Generally, one wireframe must be crafted for each distinct page. After the wireframes are reviewed, move on to the next design phase.<\/p>\n<h2>Beneficial Good Design<\/h2>\n<p><a href=\"http:\/\/tympanus.net\/codrops\/2011\/02\/07\/interesting-and-creative-structures-in-web-design\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/interesting-and-creative-structures-in-web-design.jpg\" alt=\"\" title=\"25 EXAMPLES OF INTERESTING AND CREATIVE STRUCTURES IN WEB DESIGN\" width=\"580\" height=\"315\" class=\"alignnone size-full wp-image-19362 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 580px; --smush-placeholder-aspect-ratio: 580\/315;\" \/><\/a><br \/>\n<em>25 EXAMPLES OF INTERESTING AND CREATIVE STRUCTURES IN WEB DESIGN<\/em><\/p>\n<p>Take the iPod for example. Exquisite design did wonders for this Apple product. In fact iPod has fewer features than other similar gadgets but its great design and interface, along with terrific marketing, made it a very buyable item. In websites, sadly, great design and minute details often don\u2019t count. The reason: if something works it need not be refined. But this is wrong thinking. A website significantly affects customers\u2019 perception of a business. A website that is harmonious, attractive and has easy navigation will have a positive impact. If it isn\u2019t, then visitors will leave your website.<\/p>\n<h3>Preliminary Design<\/h3>\n<p>The preliminary design, generally created in Fireworks or Adobe Photoshop or even Adobe Illustrator, comprises visually precise images of your home page as well as one inside page at least. Visual branding of your business elements must be included. Create elements that correctly reflect the business.<\/p>\n<h3>Approval of Design and Revisions<\/h3>\n<p>After submitting the preliminary design for approval, the possibility of a revision arises. The designer and stakeholders will share ideas and try out some variations before final approval is given to the design.<\/p>\n<h3>Don\u2019t Design by Committee<\/h3>\n<p>Multiple opinions could be problematic. Critics of the design may be absent at the time of filtering the website\u2019s content. Normally in small businesses, having in excess of five people to give design feedback causes a deadlock. In short, restrict your \u2018review committee\u2019  to five or less persons.<\/p>\n<h3>Client versus Designer<\/h3>\n<p><a href=\"https:\/\/www.andysowards.com\/blog\/2012\/a-tribute-to-clients-from-hell\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/I-love-the-colors-but-can-you-change-it-bad-client-feedback.jpg\" title=\"A Tribute To Clients From Hell\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 640px; --smush-placeholder-aspect-ratio: 640\/905;\" \/><\/a><br \/>\n<em>A Tribute To Clients From Hell<\/em><\/p>\n<p>Often there is tension between expert designers and clients who are less-informed. The \u201cbad idea\u201d problem illustrates this well: the client may ask for a design feature that is unattractive as well as unworkable. In this scenario the willingness of the client to listen to constructive criticism should be tested.<\/p>\n<h2>Think of Content<\/h2>\n<p><a href=\"http:\/\/sixrevisions.com\/content-strategy\/web-design-process\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/web-design-process-content-strategy.jpg\" alt=\"\" title=\"How to Bake Content Strategy into Your Web Design Process\" width=\"550\" height=\"200\" class=\"alignnone size-full wp-image-19363 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 550px; --smush-placeholder-aspect-ratio: 550\/200;\" \/><\/a><br \/>\n<em>How to Bake Content Strategy into Your Web Design Process<\/em><\/p>\n<p>Think about the future and expansion of your website. You may have a news segment with half-a-dozen news reports; a core news page that has summaries which link to the entire view of the item. This is good. But is you have a huge number of news items, you have to consider other options. These questions must be considered in the process of designing.<\/p>\n<h3>Web Design Guide<\/h3>\n<p><a href=\"http:\/\/www.awwwards.com\/20-web-design-examples-of-blog-front-end-structures.html\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/web-design-examples-blog-front-end-structures-layout-680x383.jpg\" alt=\"\" title=\"20 Web Design Examples of Blog Front-end Structures\" width=\"680\" height=\"383\" class=\"alignnone size-large wp-image-19371 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 680px; --smush-placeholder-aspect-ratio: 680\/383;\" \/><\/a><br \/>\n<em>20 Web Design Examples of Blog Front-end Structures<\/em><\/p>\n<p>A style guide can make adequate planning shine. A style guide defines the design, interactive, layout and the kind of elements used in the entire website.<\/p>\n<p>These include: Navigation styles; Lists; Paragraphs; Italics, underlining and bolding; Block quotes; Links; Icons; Use of images\/style; Background images; Elements that are common like sidebars and  &lt;h1&gt; to &lt;h5&gt; (heading tags).<\/p>\n<h2>Integration with CMS<\/h2>\n<p><a href=\"http:\/\/spyrestudios.com\/free-content-management-systems\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/free-content-management-systems-cms.jpg\" alt=\"\" title=\"Top 12 Free Content Management Systems (CMS)\" width=\"585\" height=\"325\" class=\"alignnone size-full wp-image-19369 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 585px; --smush-placeholder-aspect-ratio: 585\/325;\" \/><\/a><br \/>\n<em>Top 12 Free Content Management Systems (CMS)<\/em><\/p>\n<p>Your great design is now ready for integration with a CMS. The team that\u2019s tasked to do this will give you the CMS log-in details that enable you to include content, text, video, photos and documents. You could do this comfortably and stick to plain formatting like italics, bold and lists.<\/p>\n<h2>Putting It Together<\/h2>\n<p>Now you will be sitting pretty on a solid website. Whatever the project\u2019s size, you now need to do the following:<\/p>\n<ul>\n<li>Go over the content again. Check all the requisite points.\n<\/li>\n<li>Get your content proof read. Someone who has a fresh perception should be allotted the work; don\u2019t do it yourself.<\/li>\n<\/ul>\n<h2>Beta Testing &#038; Launch<\/h2>\n<p><a href=\"https:\/\/www.andysowards.com\/blog\/2012\/tips-to-create-a-web-design-that-overcomes-browser-compatibility-issues\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/15-Best-CSS-Practices-to-Make-Your-Life-Easier.jpeg\" title=\"Tips to Create a Web Design that Overcomes Browser Compatibility Issues\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 580px; --smush-placeholder-aspect-ratio: 580\/360;\" \/><\/a><br \/>\n<em>Tips to Create a Web Design that Overcomes Browser Compatibility Issues<\/em><\/p>\n<p>When you think that your website is nearly ready for public viewing, beta test it. Go through this checklist:<\/p>\n<ul>\n<li>Looks correct in all target web browsers.\n<\/li>\n<li>Interactive features are working well.\n<\/li>\n<li>Contact and supplementary forms are working predictably.\n<\/li>\n<li>External, internal links work.\n<\/li>\n<li>Images properly sized.\n<\/li>\n<li>Final copy content is in place.\n<\/li>\n<li>Links from intermediary software work.<\/li>\n<\/ul>\n<p>Once you\u2019ve completely beta-tested your website, launch it!<\/p>\n<h2>After the Launch<\/h2>\n<p><a href=\"https:\/\/www.andysowards.com\/blog\/2011\/after-the-site-launch-a-marketing-tutorial-for-wordpress-developers\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/shutterstock_63511027.jpg\" title=\"After The Site Launch \u2013 A Marketing Tutorial\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 500px; --smush-placeholder-aspect-ratio: 500\/500;\" \/><\/a><br \/>\n<em>After The Site Launch \u2013 A Marketing Tutorial<\/em><\/p>\n<p>Here are some tools to maintain the site post-launch.<\/p>\n<h3>Website Statistics<\/h3>\n<p>Visitor statistics give you an insight into the way people are using the website. One\/two months\u2019 data is needed to draw authentic conclusions. Consider these questions:<\/p>\n<ul>\n<li>From where are visitors coming? Check out search engines and direct traffic, links from other sites, ads, etc.\n<\/li>\n<li>Are your visitors local, national, regional or international?\n<\/li>\n<li>What are your most popular pages?\n<\/li>\n<li>How long do visitors stay on the website?\n<\/li>\n<li>Bounce rate? How many users leave after visiting only one page?<\/li>\n<\/ul>\n<p>App Google Analytics is generally used to get answers to these queries. There is other software too that provide the answers.<\/p>\n<h3>Documentation<\/h3>\n<p>A lot of your documentation will comprise different elements earlier discussed. These include wireframes as well as Photoshop documents. Details of how different sections of the website are deployed in the CMS will be needed. Check out the information that will be needed if new people were to take care of the website; what they would need so as to take up the project? Proper documentation includes all these factors.<\/p>\n<h3>Back-Up<\/h3>\n<p><a href=\"https:\/\/www.andysowards.com\/blog\/2013\/your-websites-disaster-contingency-plan\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/backing-up-your-website-the-ultimate-guide.jpg\" title=\"Your Website\u2019s Disaster Contingency Plan\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 617px; --smush-placeholder-aspect-ratio: 617\/319;\" \/><\/a><br \/>\n<em>Your Website\u2019s Disaster Contingency Plan<\/em><\/p>\n<p>The files as well as the database of the website should have frequent back-ups, preferably daily. The company that hosts you may provide a way to do this. If your files\/ database get erased or hacked or corrupted or damaged, you can repair the damage with the earlier day\u2019s copies.<\/p>\n<h3>Plan Maintenance<\/h3>\n<p>Your plan for maintenance must define clear roles as well as responsibilities for all aspects of the website. This refers to posting of articles and photos and graphics that have to be created regularly. Proper assigning and understanding of this is vital.  The best thing is to have a written maintenance plan.<\/p>\n<h3>Seek Visitor Feedback<\/h3>\n<p>Soliciting visitor feedback is a terrific way to better your website\u2019s impact. There are many ways to do this. You may conduct easy online surveys or focus on groups on-site. Visitors generally cannot explain what they like \u2013 or dislike. So pose specific questions to them when seeking feedback.<\/p>\n<h2>Summing Up\u2026<\/h2>\n<p>A great website is not a one-time happening. It\u2019s a communications tool that\u2019s extensible. Once you\u2019ve created a terrific website, the momentum must be kept going. Be regular with your maintenance and interact with visitors on a regular basis to spot areas for website enhancement. I hope you liked this blog post in which I have incorporated a lot of factors that need to be considered when designing a website. Your comments on it will be greatly appreciated!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As a senior designer and developer I have identified some problems that are common with a large number of web projects. The main one is the failure to make a<\/p>\n","protected":false},"author":136,"featured_media":19355,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[627,4207,24,4206,225,35,4050,437,5633,34,107],"tags":[2631,5885,304,1971,115,5886,848,3024,2149],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>A Complete Guide to Good Website Designing<\/title>\n<meta name=\"description\" content=\"As a senior designer and developer I have identified some problems that are common with a large number of web projects. The main one is the failure to\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Complete Guide to Good Website Designing\" \/>\n<meta property=\"og:description\" content=\"As a senior designer and developer I have identified some problems that are common with a large number of web projects. The main one is the failure to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/\" \/>\n<meta property=\"og:site_name\" content=\"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/andysowardsfan\" \/>\n<meta property=\"article:published_time\" content=\"2013-04-25T09:05:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-04-25T09:09:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andysowards.com\/blog\/assets\/10-things-to-know-before-designing-for-the-web.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alan Smith\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andysowards\" \/>\n<meta name=\"twitter:site\" content=\"@andysowards\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Smith\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/\",\"url\":\"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/\",\"name\":\"A Complete Guide to Good Website Designing\",\"isPartOf\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/10-things-to-know-before-designing-for-the-web.jpg\",\"datePublished\":\"2013-04-25T09:05:51+00:00\",\"dateModified\":\"2013-04-25T09:09:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/3bf7e9e22c24cb8aefc863903da69ae8\"},\"description\":\"As a senior designer and developer I have identified some problems that are common with a large number of web projects. The main one is the failure to\",\"breadcrumb\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/#primaryimage\",\"url\":\"https:\/\/www.andysowards.com\/blog\/assets\/10-things-to-know-before-designing-for-the-web.jpg\",\"contentUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/10-things-to-know-before-designing-for-the-web.jpg\",\"width\":2000,\"height\":576},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.andysowards.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Complete Guide to Good Website Designing\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\",\"url\":\"https:\/\/www.andysowards.com\/blog\/\",\"name\":\"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards\",\"description\":\"Design Inspiration &amp; Business Resources for Creatives\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/3bf7e9e22c24cb8aefc863903da69ae8\",\"name\":\"Alan Smith\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/44b303b667a7767cf1f83159142ad28d?s=96&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/44b303b667a7767cf1f83159142ad28d?s=96&r=pg\",\"caption\":\"Alan Smith\"},\"description\":\"Alan Smith is an avid tech blogger with vast experience in various IT domains, currently associated with SPINX Inc., Los Angeles, California based website design, web development and internet marketing company.\",\"url\":\"https:\/\/www.andysowards.com\/blog\/author\/alansmith\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A Complete Guide to Good Website Designing","description":"As a senior designer and developer I have identified some problems that are common with a large number of web projects. The main one is the failure to","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/","og_locale":"en_US","og_type":"article","og_title":"A Complete Guide to Good Website Designing","og_description":"As a senior designer and developer I have identified some problems that are common with a large number of web projects. The main one is the failure to","og_url":"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/","og_site_name":"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards","article_publisher":"http:\/\/facebook.com\/andysowardsfan","article_published_time":"2013-04-25T09:05:51+00:00","article_modified_time":"2013-04-25T09:09:15+00:00","og_image":[{"width":2000,"height":576,"url":"https:\/\/www.andysowards.com\/blog\/assets\/10-things-to-know-before-designing-for-the-web.jpg","type":"image\/jpeg"}],"author":"Alan Smith","twitter_card":"summary_large_image","twitter_creator":"@andysowards","twitter_site":"@andysowards","twitter_misc":{"Written by":"Alan Smith","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/","url":"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/","name":"A Complete Guide to Good Website Designing","isPartOf":{"@id":"https:\/\/www.andysowards.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/#primaryimage"},"image":{"@id":"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andysowards.com\/blog\/assets\/10-things-to-know-before-designing-for-the-web.jpg","datePublished":"2013-04-25T09:05:51+00:00","dateModified":"2013-04-25T09:09:15+00:00","author":{"@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/3bf7e9e22c24cb8aefc863903da69ae8"},"description":"As a senior designer and developer I have identified some problems that are common with a large number of web projects. The main one is the failure to","breadcrumb":{"@id":"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/#primaryimage","url":"https:\/\/www.andysowards.com\/blog\/assets\/10-things-to-know-before-designing-for-the-web.jpg","contentUrl":"https:\/\/www.andysowards.com\/blog\/assets\/10-things-to-know-before-designing-for-the-web.jpg","width":2000,"height":576},{"@type":"BreadcrumbList","@id":"https:\/\/www.andysowards.com\/blog\/2013\/a-complete-guide-to-good-website-designing\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.andysowards.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Complete Guide to Good Website Designing"}]},{"@type":"WebSite","@id":"https:\/\/www.andysowards.com\/blog\/#website","url":"https:\/\/www.andysowards.com\/blog\/","name":"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards","description":"Design Inspiration &amp; Business Resources for Creatives","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/3bf7e9e22c24cb8aefc863903da69ae8","name":"Alan Smith","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/44b303b667a7767cf1f83159142ad28d?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/44b303b667a7767cf1f83159142ad28d?s=96&r=pg","caption":"Alan Smith"},"description":"Alan Smith is an avid tech blogger with vast experience in various IT domains, currently associated with SPINX Inc., Los Angeles, California based website design, web development and internet marketing company.","url":"https:\/\/www.andysowards.com\/blog\/author\/alansmith\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/19349"}],"collection":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/comments?post=19349"}],"version-history":[{"count":0,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/19349\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media\/19355"}],"wp:attachment":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media?parent=19349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/categories?post=19349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/tags?post=19349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}