Introduction to Websites PDF

JH2301 INTRODUCTION TO WEBSITES What is a Website? It is a collection of web pages and related content that contain a single shared domain name and is typically...

JH2301 INTRODUCTION TO WEBSITES What is a Website? It is a collection of web pages and related content that contain a single shared domain name and is typically dedicated to a particular topic, such as news, entertainment, education, social networking, etc. It is also produced by a single person or organization that operates a service or product of the websites. Characteristics of Websites User- Friendly Visual Accessibility Appeal WEB Clear Purpose and SITE Search Engine Optimazation Goals (SEO) Performance Speed Security A good website should look professional and easy to navigate by allowing anyone who visits your website to find information quickly and efficiently. User-Friendly Organized content and clear menus can contribute to a positive user experience. A website should be designed and developed for all users, including those Accessibility with disabilities. Web accessibility ensures that people with disabilities can navigate and access the content effectively. A good website can capture the user’s attention and make a positive Visual Appeal impression. It includes colors, shapes, pictures, well-chosen fonts, and an overall aesthetic that aligns with the website’s design or theme. A website must have a clear purpose and goal, whether it is to provide Clear Purpose and Goal information, sell products or services, share news, or entertain users. 01 Handout 1 *Property of STI  [email protected] Page 1 of 5  JH2301 A website should implement SEO techniques that will help to improve a website’s visibility to rank higher on a search engine result page. Importance: Keyword Selection – It is the process of identifying which keywords and phrases you should target. Content Optimization – It involves various techniques to improve Search Engine Optimization the visibility and ranking of your content in search engine results. (SEO) Meta Descriptions – It is an important aspect of search engine optimization (SEO) that can influence click-through rates from search engine results pages. Linking Structure – It helps search engines understand the relationships between different pages on the website. Image Alt Attributes – It involves optimizing the descriptive text provided for images on the website. A good website must protect user data against malfunctions, phishing, data loss, cybercrimes, or cyber-attacks. It is essential to implement Security secure protocols. Using strong passwords and regularly updating software will help to prevent hacking and data breaches. A website's ideal load time must be 1-2 seconds. Websites that take too long to load can frustrate users and lead to higher bounce rates. Performance Speed Optimizing images and code, utilizing caching techniques, and choosing reliable hosting are some ways to improve website speed. Importance of Web Designing Web design - refers to the process of planning and implementing the plan for designing a website. It refers to the user experience, branding, credibility, perception, conversions, and visibility. It involves every attribute of the website so that it is simple and efficient, allowing the user to find the needed information quickly. All these factors show how the website is designed. Reasons why web design is important: 1. First Impression – It is the first thing the visitor will notice when they land on a page. In a few seconds, it will immediately give an opinion about the website, affecting how your audience perceives it. The concept of the website you make will decide whether they will remain on your page or leave your page and turn to a competitor. 2. Branding – There are several assets of branding, such as logos, colors, fonts, and other visual elements that make your audience remember your brand and easily differentiate it from others. Consistent branding across the website creates a memorable and cohesive brand experience. 3. User Experience (UX) – It ensures easy navigation, intuitive interfaces, and clear organization of content can help the visitors find what they are looking for effortlessly. It leads to longer visit durations, increased engagement, and a higher conversion rate. 4. Credibility and Trust – It is important to build trust with your audience so they will remain on your site. A visually appealing and well-structured website gives the impression to the visitors that the brand is legitimate and trustworthy. On the other hand, if they see your poor design or the 01 Handout 1 *Property of STI  [email protected] Page 2 of 5  JH2301 information looks outdated, they will not trust your site. It will raise doubts and discourage the users from engaging on your website. Key Elements of Web Design 1. Visual Elements – These elements help to capture users’ attention, communicate information effectively, and enhance the overall user experience, including: Fonts Icons Colors Logos Shapes Images Layout Video 2. Functional Elements - These enhance the site's functionality and usability by allowing the users to navigate, perform actions and accomplish their goals. Some of the functional elements include the following: Navigation – It allows the user to find content and features on the website. User Interaction – It refers to how users interact with a website or web application. Speed – It refers to how fast a website’s pages load when accessed by users. Site Structure – It refers to the organization and hierarchy of a website’s content and pages. It also enhances user experience and makes it easier to find what they are looking for. Cross-device Compatibility – It is the process of creating websites that can adapt and function seamlessly on various devices such as laptops, smartphones, tablets, and desktop computers. 3 Types of Web Design 1. Static Web Design – It is a type of web design where the web pages are created and presented in a fixed format. The website's content, layout, and design elements remain unchanged unless the web developer manually updates or modifies the website. 2. Dynamic Web Design – It is a process and developing a website that incorporates dynamic elements and functionality. It uses server-side programming languages, databases, and scripting techniques to create a website that generates content and offers an interactive user experience. 3. eCommerce Web Design – It refers to creating and designing a website involving online businesses or virtual stores selling products or services. 01 Handout 1 *Property of STI  [email protected] Page 3 of 5  JH2301 Web Designing Procedure Strategy Wireframing Development Launch Research Design Testing Steps in Web Design Procedure: 1. Strategy – This is the first step of the web design process. A clear strategy is essential for creating a website meeting its goals and objectives. A strategic approach ensures that the design is aligned with the target audience's needs, supports the business objectives, and provides a solid foundation for the website’s success. 2. Research – This is a crucial component of the web design procedure. It provides valuable insights and informs decision-making throughout the design process. 3. Wireframing – This serves as a blueprint for a website or application. It helps the designers and stakeholders understand the website’s organization before moving on to the design and development phase. 4. Design – This is the central aspect of the web design procedure. It is also a collaborative process that involves working with clients, stakeholders, and other team members to create visually appealing, functional, and user-centric websites. 5. Development – This is the critical phase in the web design procedure, where the website design is transformed into a functional and interactive website. It is also the implementation of coding and back-end systems integration to bring the design to life. 6. Testing – This procedure ensures the functionality, usability, and performance of the website. It involves systematically validating the website’s features, functionality, and user experience to identify and fix if there is an issue or bugs before the launch of a website. 7. Launch – This is the final procedure of web design by making the website public and ensuring a smooth transition from the development phase to a live environment. 01 Handout 1 *Property of STI  [email protected] Page 4 of 5  JH2301 References: Arek Dvornechcuck (2022). Web design process from start to finish. [Web Article]. Retrieved on July 11, 2023, from https://www.ebaqdesign.com/blog/web-design-process#7-launch. Danish Wadhwa (2020). These are the top 7 steps of web designing process. [Web Article]. Retrieved on July 11, 2023, from https://www.webdew.com/blog/web-design#title_7 Josh Steven (2019). HTML: Beginners guide to HTML to master your web designing. Self-published, Amazon, 2019 Rebah, H., Boukthir, H., & Chédebois, A. (2022). Website design and development with HTML5 and CSS3. iSTE and WILEY. Shaun Anderson (2023). How fast should a website load in 2023. [Web Article]. Retrieved on July 11, 2023, from https://www.hobo-web.co.uk/your-website-design-should-load-in-4-seconds/. Sujay Pawar (2023). The ultimate web design process step by step guide. [Web Article]. Retrieved on July 11, 2023, from https://wpastra.com/guides-and-tutorials/7-step-web-design-process/. Thierry Maout (2022). The web design process explained in 8 easy steps. [Web Article]. Retrieved on July 11, 2023, from https://www.softr.io/web-app/web-design-process. 01 Handout 1 *Property of STI  [email protected] Page 5 of 5