Web Design Fundamentals: From UX to UI and Beyond
Web Design Fundamentals
Design: Aims to convey the appearance, function, and production of an object with a specific function.
Stages:
- Observation and analysis
- Planning and projection
- Construction and execution
Web design: The activity that consists of planning, design, implementation, and maintenance of websites.
History and Evolution of Web Design
First Web Generation (1990-1994)
Webpages used HTML. Mosaic was the first free web browser program. In 1994, the W3C was created to prevent large companies from monopolizing the business of web pages and designs.
Second Web Generation
Web developers started to research, test, and add their own HTML snippets, making it more complex. (HTML 2 appeared).
- Words replaced icons.
- First background images.
- Banners in the header.
- Graphics, colors, and resolution.
Third Web Generation (1997-2002)
HTML 3.2 evolved from static to dynamic.
- Internet Explorer was launched.
- Backgrounds with many colors and patterns.
- Animations.
Web Formats
Divided into the following categories:
- Video
- Image
- Sound
Web Objectives: Functions
- Visibility: Make a product, service, or brand known.
- Entertain: Offer multimedia content to users.
- Positioning: Differentiate and stand out from the rest.
- Data analytics: Capture data. Users, in the end, are numbers and can indicate various factors.
- Transparency: It is important to build trust with users.
Quantitative Analysis
- Based on numbers and data.
- Logging.
- The most used tools are Google Analytics, Clicktale, and CrazyEgg.
- Relatively low cost.
- Easily detect errors in navigation.
Qualitative Analysis
- Focuses on the market as a whole; cannot be measured in a purely objective way.
- Benchmarking: Consists of evaluating elements of competitors from the point of view of the end user.
- Helps understand how our product is positioned.
- Know what usability guidelines are considered in similar products.
Logging
- It’s key to monitoring each time a user enters and interacts on the web.
- The behavior of the user, the time people spend on the website, and what they visit.
- The user’s perception can cause rejection.
- Key information for long-term maintenance, especially for e-commerce.
UX (User Experience)
UX is the set of factors and elements that interact with the user in a specific environment or device, resulting in a positive or negative perception of said service, product, or device. It’s how a person feels during and after using a digital product or service.
- Key when generating sales in our product or service.
- Helps to build user loyalty.
- Influences the time the user remains on the website.
Wireframes and Prototypes
A wireframe or prototype is a sketch where the structure of a web page is visually represented in a simple and schematic way. Only the functionality of the site and the UX are considered.
Wireframe Advantages:
- Quick and cheap to create.
- Problem detection.
- Better usability: If done correctly, it can positively affect the UX.
UI (User Interface)
UI is the result of defining the form, function, or usability that affects the external appearance of our product or service. It’s the way the user uses to feel and evaluate their experience. It brings UX to life. Examples include fonts, icons, and colors.
The goal is to create a virtual interface for “machines” (software) that is easy to recognize by most people who interact with it.
- UI gives an artistic touch to UX.
- Helps us guide the user throughout their experience.
- Should try to convey the visual assets of the brand.
- Helps each visual element feel connected and purposeful.
- Affects UX and wireframes.
ELEMENTS: Input Controls / Navigation Components / Informative Components
ELEMENTS
Web Architecture
- Improves the usability of the web and the UX.
- Powers search engines (SEO).
- Improves the competitive advantage of our company.
Vertical Architecture
- Large distance between the home page and the last one.
- From the home, you can access all the URLs of the web.
- Frequent in market niches and websites with very specific content.
- Ideal for websites with not too much content.
Horizontal Architecture
- The most used structure in the digital world.
- Ideal for websites with different topics.
- From home, we can only access the main categories.
Information Architecture – 3 Pillars
User, content, and context.
- Organization: Presents the web information in a clear way.
- Navigation: Helps the user through the content.
- Search: Focuses on common search patterns.
User Journey
A method that shows the user’s interaction with a system step by step, describing their emotions and reactions at each of all the possible points of contact.
- Deepen the interaction (start to end).
- Detect weak points.
- Improve the UX (User Experience).
Objectives:
- Empathizes and understands the user.
- Identifies which interactions can be improved.
- Unifies the vision and mission of the product or service.
Phases:
1. Before the purchase: Awareness and consideration.
2. Purchase: Purchase and customer service.
3. After the purchase: Retention and recommendation.
Interaction Design (IxD)
An area of design responsible for studying, planning, and applying points of interactivity in digital and physical systems.
Objective
Optimize the relationship between user and product.
Main Mission
Plan and develop all elements that allow interaction with the product through the interface.
1D – Text / 2D – Visual Representation / 3D – Physical Object / 4D – Time / 5D – Behavior
Typography
A design discipline that involves the use of typefaces and their organization to create easy-to-use interfaces, readable experiences, etc.
Too Many Fonts:
- Using too many fonts creates a sense of confusion.
- It also affects the page load time; it’s recommended to use types that users already have available on their devices.
Complementary Typefaces:
- Use fonts that contrast.
- Combine serif and sans serif.
Legibility and Accessibility:
- Text must be understandable. Take into account the user, context, and content.
- The color of the typography and the background color affect the accessibility of the user.
Graphic Elements
Color, Lines, Textures, Sizes, Shapes, Forms, Space
Layouts
A scheme of distribution of the elements within a web page created through the original wireframe. Consists of blocks of certain dimensions in which the content will be placed. The wireframe will indicate how the layout of our website will be applied.
Types of Layouts
One Column:
- Presents content in a vertical column.
- Simplest layout and the most common.
- Ideal for mobile content.
Split Screen:
- Used when two elements have the same importance.
- Both options are displayed simultaneously so that the user can choose between one or the other.
- Influences the user journey.
Asymmetric:
- Lack of fairness between its own layout; the opposite of split screen.
- Allows for more creativity and design options and has gained popularity in recent years.
- Generates dynamism and allows the user to notice individual objects that could go unnoticed.
Grid:
- Perfect for clickable information containers.
- Presents a wide variety of products to the user in a digestible way.
- Can vary in size, space, and number of columns.
Boxes:
- Have a large image in the header and below some small “boxes” that occupy the lower space.
- It’s usually common in e-commerce or corporate pages.
- Boxes can be used to develop a “story” or advance information as the user scrolls down.
WordPress
A content management system focused on the creation of any type of web page. Has a wide range of plug-ins, which can give different functionalities to the web.
HTML
Used to structure and develop a web page and its contents.
Block Toolbar
- Allows us to navigate between blocks.
- Change the block position.
- Preview the HTML code.
CSS (Cascading Style Sheets)
A language that manages the design and presentation of web pages; that is, how they look when a user visits them.
Advantages:
- Facilitates accessibility to the user.
- Enhances creativity.
- Optimizes the edition of the site.
- Works in any browser.
Disadvantages of AMP:
- Loading speed is prioritized, and this can cause some <script> elements to not load at all.
- Some key widgets/buttons (CSS and JavaScript) may not appear as content (HTML) is prioritized.
- UI elements fade into the background and can take away from the dynamism of the web page.
JavaScript
A programming language that is used to add interactive features to websites.
- Uses the same nomenclature as HTML but focuses on creating web interactivity.
- Helps make the page more dynamic, load elements faster, and helps with data analytics.
- To bring dynamism with interactions on our website, JavaScript is also important to track users who visit our website.
- Google Analytics is the most common tool used by web content creators to visualize traffic and optimize it.
Types:
JQuery: Most used on the internet. 90% of web browsers.
Bootstrap: Focused on HTML and CSS. Famous for its UI solutions.
AngularJS: Belongs to Google. Mainly for apps.
AMP (Accelerated Mobile Pages)
A technology created by Google that helps improve the speed at which mobile web pages are loaded.
Advantages:
- It’s an open-source system.
- Prioritizes loading speed and removes content that isn’t essential.
- Belongs to the Google ecosystem, making it easier to optimize.