Planning a Design for a Website PDF

IT2008 Planning a Design for a Website B. Designing a Website for a Target Audience I. Purpose and Target Audience...

IT2008 Planning a Design for a Website B. Designing a Website for a Target Audience I. Purpose and Target Audience The target audience is considered as one of the most important things that a web designer should consider when designing; if the A. Designing a Website for a Purpose website is cutting-edge but does not cater to its target audience, the website is useless. Therefore, a designer must consider doing the A successful site requires an effective and sustained strategy beyond necessary preparations before publishing the website: presenting a collection of products, services, images, videos, or other files. That means your website design’s purpose should be focused on  Identify the audience - Great design begins with an specific goals, along with measurable objectives to attain them: understanding of who it’s for. By understanding your audience, a designer will be able to choose the right design elements, such  Building the Brand – Some website types wish to showcase what as typography, color schemes, layout, and navigation. the people behind the website do, either personally or professionally.  Create Personas – This type of preparation requires a little bit Some of the things that can be used as elements for such a goal of roleplaying by putting the designer into the audience’s shoes. would be to supplement the native content with social media Once a designer has an understanding of who the visitors will programs, promotions such as splash pages or banners containing be, he/she can formulate different scenarios, which can be the latest information, and reputation management thru active or accommodated by the website’s features and design. passive correspondence with visitors.  Check the Environment – As a preparation step that is  Interaction with Potential Clients or Customers – Do not forget considered very important for business-purpose websites, a that the most important purpose of a website’s design is to retain designer must look at the current environment for the website. your visitors by giving them a reason to come back; one of the most By evaluating other websites and competitors, you can gain a effective ways to do this is to actually interact with your visitors. This much clearer picture of where your organization stands, and can be facilitated by providing options for correspondence, be it where the website can take the audience for a unique active (via a chat support feature) or passive (email groups or experience. forums).  Use Unity and Design Essentials – Utilizing design essentials  Increasing Visibility – To retain visitors, one must make sure that and website design unity will allow a website to have a unique the said visitors can see the website in the first place. Some things personality of its own. Through using the appropriate text, to consider are utilizing SEO (Search Engine Optimization, which images, and color schemes, a designer can further emphasize uses keywords to make their website appear on the first page of a the site’s brand. search engine), organizing content to be user-friendly, and more  Think About the Content - Content is king. So your design efficient processing of transactions for products and services for efforts will be in vain if the site content is inappropriate or lacking business. in quality of the content, especially for the audience you’re  Becoming an Authoritative Resource – If the way your content is targeting. For example, if the website is for a specific profession, designed allows you to establish trust with your visitors, this then industry-specific jargon is acceptable, and often necessary. translates to increased reputation and, in turn, an increased number  Put Information in Order - Organizing your information of visitors. One must consider the content for the website as up-to- according to a visual hierarchy will help your users navigate the date, credible, and for businesses, marketable. site and absorb the information according to your clients’ preferences. A visual hierarchy gives all elements on a page order of importance according to how they’re positioned and displayed. 03 Handout 1 *Property of STI  [email protected] Page 1 of 4  IT2008  Use the Element of Surprise - Introduce a fun, quirky, or  Use Storytelling, not “Storyselling” - You may feel that your helpful factor that will surprise and delight your audience. This website is a chance to “tell your story” or sell a product or will make them more likely to remember your website and service outright. Instead, it should tell the stories of others who become repeat visitors, and it will help your brand personality have benefitted from using your content. Making your content shine through. People are more likely to work with organizations user-centered meets visitors’ needs and tells their story instead that make them feel happy and comfortable, so if you can put a of just yours. smile on their faces, you’re more likely to turn them from visitors  Create Content for People and Search Engines – While to patrons. Search Engine Optimization (SEO) is considered as an important factor for website design, it sometimes makes content II. Website Content sound mechanical, monotonous, or too obvious on what it’s all about. By naturally including your terms or using alternative (Participate in an introductory activity by your instructor) synonyms throughout on the site, you ensure that once someone gets there, you don’t sound like a robot.  Planning and developing your website’s content can be a difficult  Make It Action-Oriented - Encourage people to take action task. Whether you have three pages or 100, deciding what content once they visit your website and consume your content. to place on your site is crucial to its overall success. Whether you want them to call you, message you for more  Content not only includes the written copy but images, charts, or information, or buy a product online, tell them what their next downloadable files as well. step is at the end of your content. Providing an email address or  Making sure that you have the right content for your users and links to your contact page gives them an easy action to take collaborating with others in your business is considered paramount if while your content is still top of mind. the website is to accomplish a specific task or cater to a specific  Give It Visual Appeal - Break your text up with supporting audience. images, charts, or illustrations. Also, because most people will not read all of your content but will scan through instead, A. Planning Website Content separate it using larger pull quotes or testimonials, as well as bulleted lists. In addition, keep your paragraphs short and use To ensure that content meets standards, the following best practices sub-headings to divide sections. can be considered by a web designer:  Set Deadlines - Although it’s easier than ever to edit your own website copy with a content management system (like  Evaluate What You Have – While this is commonly applicable WordPress), this can be the enemy of completing and launching to designers who already have an existing website, it is still your new website. You will need to set concrete deadlines to important for aspiring website designers to know what they have make sure your project stays on track. Grouping content to create or update a website to an acceptable standard. There creation activities into relevant chunks ensures that you are four (4) common factors to consider for content: accuracy, complete tasks on time. updating of content to its up-to-date version, usefulness to visitors, and completeness. III. Website Structure  Collaborate with Others – Whether with fellow website designers or with other people with relevant roles to the website (Participate in an introductory activity by your instructor) design project, a designer can have their content reviewed to allow them to revise anything that may be considered lacking or A. What is Website Structure? erroneous before it is published.  It is the hierarchy of webpages that comprise a website.  It, if set up properly, allows seamless navigation of the website. 03 Handout 1 *Property of STI  [email protected] Page 2 of 4  IT2008  Each page leads to specific content or other pages.  Check for Competition – A designer is usually not alone when  The main page or splash page is a prime example of this due it comes to creating websites, some existing ones may already to its capability to access other pages. exist to get a chunk of potential visitors for the website. Find the keywords that tickle the audience’s fancies, and create keyword B. Why Plan for a Website Structure? combinations that can pull a large number of searches from  It’s the Blueprint - The website structure is considered a search engines with little to no usage by any competition. foundational component; it defines which web page is seen first,  Plan the Hierarchy - In this step, designers will basically create what web page can be accessed on the main page, which page a system that will order the data in a logical and user-friendly leads to which content, and so on. way. Designers must create a diagram with the main pages on  It Improves the Visitor Experience - If we strip the site down top and then go from top to bottom to structure the relative to its bare bones by taking away the colors, the fonts, and other topics for each web page. The hierarchy must be simple and not design elements, it remains all about the structure. If a visitor over-categorized, as this will help once navigation and URL can still find all the information easily it enhances his user structure is planned out. experience and, most importantly, the visitor stays longer on  Plan Your Navigation – The structure of a website must be your site. created in a manner that all its web pages are not only properly  It Makes Web Crawling Easier – Web crawling is a technique connected, but also easily accessible. Pages should be used by search engines to update their content. If a website has connected in a way that allows a visitor to access what he/she a sound structure, this means that web crawlers (in the form of needs from these pages without having to dig through the entire searchbots) will be able to index your website easier. The more website. accessible the web pages on the site, the easier the web  Implement an Internal Linking Strategy – Website structure crawler can index each page, the more visible your website will must also be created in a way that the most accessed pages are be on search engines. categorized at the most accessible places (such as the main  It Accomplishes Site Goals – If every single page is seamless page), and more specific pages are accessible within these and properly connected, then the website in its entirety category pages. Not only will this allow visitors to easily access accomplishes its purpose and satisfies its target audience. these pages, but also help web crawlers to index your new or Visitors will more likely find what they are looking for, and each edited pages faster. web page has a high possibility of being visited, increasing  Don’t Forget the Sitemap – The sitemap is basically all of a indexing chances. website’s pages in one (1) file that gets constantly updated. Most search engines use sitemaps to find out about new pages. C. Things to Remember for Creating Proper Web Structure It also helps search engines to index your pages faster than if  Know What the Site is All About – A precursor to creating a you don’t have one. proper website structure is to know its purpose and target audience. This will identify the starting point of research, which IV. Site Navigation will provide the basic information that you will need to plot your web pages in the hierarchy. A. What is Site Navigation?  Do Keyword Research – For a website to become visible to  It is something derived from web structuring that connects a search engines, a designer must be able to research keywords website’s pages together. that can be used to search the contents of its web pages. While  It facilitates the means for a visitor to access the content they this alone may allow you to be visible to some extent to your want within the web pages using hyperlinks. target viewers, most designers opt to use pre-made, paid services to optimize website visibility. 03 Handout 1 *Property of STI  [email protected] Page 3 of 4  IT2008  If the website can be properly navigated, potential audiences will Post-Discussion Activities: be more engaged and curious about what the website offers, Accomplish 03 Laboratory Exercise 1 after answering the quiz. which can translate to more views and/or visits. Answer 03 eLMS Quiz 1 via the STI eLMS website based on what you have learned for this lesson. B. Why is Site Navigation Important?  Without website navigation, visitors can’t figure out how to find References: important pages, such as the site blog, the email signup page, Amos, J. at Layout (2017). How to Successfully Design for a Target Audience. Retrieved on April product listings, pricing, contact information, or help docs/pages. 5, 2020 at https://getflywheel.com/layout/design-target-audience/ Campbell, J. T. (2025). Web Design: Introductory 5th Edition. Boston, USA: Cengage Learning.  If a website designer has made site navigation so that visitors De Faselle, C. at Blitz Media Design (n.d.). Setting Successful Website Goals and Objectives. follow a predicted path, it allows them more ideas that can be Retrieved on April 5, 2020 at https://www.blitzmediadesign.com/blog/2014/05/setting- used to streamline the navigation process, such as simplifying successful-website-goals/ categories, reducing page load times, or lead them to more Dennis, S. at subcide (n.d.). Web Design for a Purpose. Retrieved on April 7, 2020 at http://www.subcide.com/articles/web-design-for-a-purpose/ important information and/or pages. Kedinger, D. at Practical Ecommerce. 9 Steps to Planning Website Content. Retrieved on April 6,  A website designer must remember that the purpose of website 2020 at https://www.practicalecommerce.com/9-steps-to-planning-website-content navigation is to convince people to explore the site further. Sebjanic, S. at Nomiscom Web Design (2019). How to Plan a Website Structure? 9 Steps to Do It Designers can give them reasons to click on links or access Right! Retrieved on April 8, 2020 at https://nomiscomwebdesign.eu/how-to-plan-a-website- structure/ more pages by inspiring curiosity and enticing them with great Sklar, J. (2015). Principles of Web Design, 6th Edition. Boston, USA: Cengage Learning. offers. The Daily Egg (2020). Website Navigation: Tips, Examples and Best Practices. Retrieved on April 13, 2020 at https://www.crazyegg.com/blog/website-navigation/ C. Types of Website Navigation Wahhab, G. at Square2 Marketing (2016). 5 Roles Every Successful Web Design Project Needs. Retrieved on March 26, 2020 at https://www.square2marketing.com/blog/5-roles-every-  Header Menu – One of the traditional ways for navigation, the successful-web-design-project-needs header menu usually contains the main categories under the web page, which can be accessed to view its child web pages. Some header menus have dropdown functionality that allows them to simplify and streamline the navigation process.  Sidebar – These are usually found as a vertical bar either on the left or right of the website pages. Links are usually organized, such as by date or category. Websites with large amounts of information opt to use dual sidebars on both sides of the website.  Fat Footers – These are usually found on the bottom of a website, containing links to the site’s main pages as well as popular resources. They allow for more links, which means a better user experience  Breadcrumbs – First found on online forums, these are hierarchical navigation links that appear on a specific page. They tell you how that page is nested within other pages, the parent page it is under, and on which category page its parent page is in, and so on.  Hamburger Menus – These are exclusive to websites that offer mobile device viewing; it is a dropdown menu that will display its content on the mobile device once the visitor taps on it. 03 Handout 1 *Property of STI  [email protected] Page 4 of 4