Web Development and Foundations of Web Design

Web Development

  • Web development is the practice of developing websites and web apps that live on the internet.
  • Website development is the process of designing, building, and maintaining a website.

Types of Web Development

Frontend Development
  • The process of designing, building, and testing the visual part of a web or mobile application.
  • Front-end developers create interfaces that are used by users to interact with a system.
  • They work with both visual and functional design, as well as user experience and accessibility.
  • Focuses on layout, animations, content organization, navigation, graphics.
  • Programming languages used: JavaScript, HTML, CSS
Backend Development
  • The process of designing, coding, and testing the functionality of a web application's back-end part of the system that handles requests from users and interacts with databases.
  • Back-end developers work in close collaboration with front-end developers, who design and create the user interface for a website or app.
  • Ensures that the system works as expected and meets all requirements as well as all data is stored securely and accessible by users.
  • Focuses on building code, debugging, database management.
  • Programming languages used: Node.js, Python, Java

Web Development Basics

Hypertext Markup Language (HTML)
  • A simple markup language that allows you to style your website's display content and structure.
  • You can use this to create pages with text, photos, videos, and embedded objects (like ads).
Cascading Style Sheets (CSS)
  • A powerful tool for styling the web's text, images, and video.
  • You can use this to change the color, size, and layout of your website's elements.

Web Designing

  • Web design is creating the visual appearance of a website, including the layout and graphics.
  • Web designers use tools like Photoshop and Illustrator to create a mockup of the site’s appearance.
  • They then use HTML and CSS to build a web page’s functionality, including navigation buttons and font styles.
  • Web designers are responsible for creating everything from the overall look of a site’s design to the individual parts like buttons and icons

Importance of Web Design

  • Web design is about creating a website that works.
  • It’s about taking your content and making it look great on a computer screen, phone, or tablet.
  • Web designers work closely with business owners (and sometimes customers) to figure out what they want their websites to accomplish.
  • Then they build those sites using HTML and CSS, coding languages that tell computers how to display text and images on screens.

Skills Required for a Web Designer

  • Excellent graphic design and webpage development skills, as well as an understanding of HTML and CSS.
  • Familiarity with a variety of web hosting platforms and databases, as well as marketing and advertising strategies.
  • HTML & CSS training through online courses.
  • Staying up-to-date on the latest web design trends by reading online resources.
  • Knowledgeable about various web hosting platforms and databases.

How to Create a Website

  • Identify the purpose.
  • Determine who your target market is.
  • Create a plan.
  • Seek some inspiration.
  • Design for real life.
  • Take note of the typography.
  • Allow the fine arts to influence you.
  • Investigate various forms of design.
  • Prepare content before you begin.
  • Keep your design simple.
  • Learn the fundamentals of user experience (UX).
  • Learn the fundamentals of user interface (UI).

User Interface (UI)

  • The user interface (UI) is the point of human-computer interaction and communication in a device.
  • This can include display screens, keyboards, a mouse, and the appearance of a desktop.
  • It is also how a user interacts with an application or a website, using visual and audio elements, such as type fonts, icons, buttons, animations, and sounds.
  • UI design refers to the aesthetic design of all visual elements of a digital product’s user interface; namely, the product’s presentation and interactivity.

Types of User Interface

Graphical User Interfaces (GUI)
  • Utilizes graphical elements like icons and windows to facilitate interaction, commonly found in operating systems and applications.
Command-Line Interfaces (CLI)
  • Relies on text-based commands for user interaction, often used by developers and system administrators for precise control over operations.
Voice User Interfaces (VUI)
  • Enables interaction through spoken commands and responses, popularised by virtual assistants like Siri and Alexa.
Touchscreen User Interfaces
  • Allows users to interact with devices through touch gestures, prevalent in smartphones, tablets, and interactive kiosks.
Augmented Reality (AR) User Interfaces
  • Integrates virtual elements into the natural environment, commonly seen in AR apps for navigation, gaming, and education.
Virtual Reality (VR) User Interfaces
  • Creates immersive virtual environments for user interaction, utilised in VR gaming, simulations, and training programs.

Key Elements of UI

Input Controls
  • Allows users to input information into the system.
  • Helps users move around a product or website.
Informational Components
  • Shares information with users. This includes notifications, progress bars, message boxes, and pop-up windows.
Containers
  • Holds related content together, such as accordions.

Importance of UI

  • These interfaces make our interactions smoother and more efficient, whether a physical product or software application.
  • The first impression of a product often sets the tone for the entire user experience.
  • A good UI design helps to build customer loyalty and brand recognition, and customers now expect well-designed products.
  • An excellent UI can make or break the success of a product, as it draws in visitors, retains customers, and facilitates interactions between users and businesses.

User Experience (UX)

  • User experience (UX) design is the process design teams use to create products that provide meaningful and relevant experiences to users.
  • UX design involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability, and function.
  • UX Design focuses heavily on having a deep understanding of users, what they need, what they value, their abilities, and their limitations.

Characteristics of a Good UX

  • Usable: Its design, structure, and purpose are obvious and simple to understand.
  • Equitable: A design is helpful to people with diverse abilities and backgrounds.
  • Enjoyable: The design delights the user.
  • Useful: It solves user problems.

Importance of UX

  • The UX design is important because it focuses on fulfilling user needs.
  • This benefits businesses as it improves brand reputation and loyalty.
  • A good user experience provides a competitive edge and reduces the risk of product failure.
  • Designers, in general, are excellent problem solvers and can apply their knowledge to broader areas — not just to specific products or services but also to the entire company and even society.
  • By focusing on user-centered design, responsive design, performance optimization, and accessibility, developers can create websites and applications that delight users and increase engagement.

Difference Between UI and UX

  • User Interface (UI) focuses on the visual design of the website, including the icons and layout.
  • User Experience (UX) focuses on the customer's experience in interacting with the UI developed by the design team like user navigation, ensuring usability, efficiency, and satisfaction.
  • It is also used to understand users to effectively cater to the website’s UI to their needs.
  • In conclusion, User Interface emphasizes aesthetics, while User Experience prioritizes functionality and accessibility.

Principles of Good Web Design

  • Website purpose: The website needs to accommodate the needs of the user.
  • Simplicity: is the best way to go when considering the user experience and the usability of your website.
  • Navigation: is the wayfinding system used on websites where visitors interact and find what they are looking for.
  • F-Shaped pattern reading: is the most common way visitors scan text on a website.
  • Visual hierarchy: is the arrangement of elements in order of importance.
  • Content: An effective website has both great design and great content.
  • Grid-based layout: helps to structure your design and keep your content organized.
  • Load time: Waiting for a website to load will lose visitors.
  • Mobile-friendly: More people are using their phones or other devices to browse the web.