Skip to content

Commit eebc188

Browse files
TemceoTemceo
committed
update wireframe.html and style.css
1 parent f067711 commit eebc188

2 files changed

Lines changed: 60 additions & 23 deletions

File tree

‎Wireframe/style.css‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ html {
66
:root {
77
--font-primary: "Roboto", sans-serif;
88
--clr-primary: #f5f5f5;
9-
--clr-accent1: #BEBFC5;
10-
--clr-accent2: #DBD7D2;
9+
--clr-accent1: #bebfc5;
10+
--clr-accent2: #dbd7d2;
1111
--paper: oklch(7 0 0);
1212
--ink: #333333;
1313
--font: 100%/1.5 system-ui;
1414
--space: clamp(6px, 6px + 2vw, 15px);
15-
--line: 1px solid #F5F5F5;
15+
--line: 1px solid #f5f5f5;
1616
--container: 1280px;
1717
}
1818
/* ====== Base Elements ====== */
@@ -47,19 +47,18 @@ footer {
4747
position: fixed;
4848
bottom: 0;
4949
text-align: center;
50-
left: 50%;
51-
transform: translateX(-50%);
52-
width: 100%;
53-
text-align: center;
54-
background-color: #f1f1f1;
55-
padding: 10px 0;
56-
box-shadow: 0 -1px 5px rgba(0,0,0,0.1);
50+
left: 50%;
51+
transform: translateX(-50%);
52+
width: 100%;
53+
text-align: center;
54+
background-color: #f1f1f1;
55+
padding: 10px 0;
56+
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
5757
}
5858
/* ====== Articles Grid Layout ==== */
5959

60-
6160
@media (min-width: 550px) {
62-
main {
61+
main {
6362
display: grid;
6463
grid-template-columns: 1fr 1fr;
6564
gap: var(--space);
@@ -93,6 +92,5 @@ article a {
9392
}
9493

9594
article a:hover {
96-
background-color: var(--clr-accent2);
95+
background-color: var(--clr-accent2);
9796
}
98-

‎Wireframe/wireframe.html‎

Lines changed: 48 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4+
<meta charset="UTF-8" >
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
66
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css" />
7+
<link rel="stylesheet" href="style.css" >
88
</head>
99
<body>
1010
<header>
@@ -14,22 +14,61 @@ <h1>Wireframe</h1>
1414
<article>
1515
<h2>What is the purpose of a wireframe?</h2>
1616
<p>
17-
A wireframe is a fundamental tool in the fields of web design, app development, and user interface (UI) design. It serves as a blueprint or schematic representation of a digital product, outlining its structure, layout, and key elements without diving into visual design details like colors, fonts, or images. The primary purpose of a wireframe is to provide a clear and organized framework that guides designers, developers, and stakeholders in creating an intuitive, functional, and user-friendly interface.
17+
A wireframe is a fundamental tool in the fields of web design, app
18+
development, and user interface (UI) design. It serves as a blueprint
19+
or schematic representation of a digital product, outlining its
20+
structure, layout, and key elements without diving into visual design
21+
details like colours, fonts, or images. The primary purpose of a
22+
wireframe is to provide a clear and organized framework that guides
23+
designers, developers, and stakeholders in creating an intuitive,
24+
functional, and user-friendly interface.
1825
</p>
1926
<p>
20-
One of the main purposes of a wireframe is planning and organization. By presenting a visual skeleton of a website or application, wireframes allow teams to define the placement of key components such as navigation menus, buttons, forms, content sections, and interactive elements. This ensures that the interface is logically structured, making it easier for users to navigate and complete tasks efficiently. Without a wireframe, designers may struggle to visualize the flow and hierarchy of content, potentially leading to a confusing or cluttered interface.
27+
One of the main purposes of a wireframe is planning and organization.
28+
By presenting a visual skeleton of a website or application,
29+
wireframes allow teams to define the placement of key components such
30+
as navigation menus, buttons, forms, content sections, and interactive
31+
elements. This ensures that the interface is logically structured,
32+
making it easier for users to navigate and complete tasks efficiently.
33+
Without a wireframe, designers may struggle to visualize the flow and
34+
hierarchy of content, potentially leading to a confusing or cluttered
35+
interface.
2136
</p>
2237
<p>
23-
Wireframes also facilitate communication and collaboration among stakeholders. Because they focus on functionality and structure rather than aesthetics, wireframes make it easier for designers, developers, project managers, and clients to discuss ideas and provide feedback. For instance, a client can review a wireframe and suggest adjustments to the layout or features before any coding or visual design begins. This early-stage feedback helps prevent costly revisions later in the development process.
38+
Wireframes also facilitate communication and collaboration among
39+
stakeholders. Because they focus on functionality and structure rather
40+
than aesthetics, wireframes make it easier for designers, developers,
41+
project managers, and clients to discuss ideas and provide feedback.
42+
For instance, a client can review a wireframe and suggest adjustments
43+
to the layout or features before any coding or visual design begins.
44+
This early-stage feedback helps prevent costly revisions later in the
45+
development process.
2446
</p>
2547
<p>
26-
Another key purpose is usability testing and problem-solving. Wireframes allow designers to identify potential usability issues and make improvements before investing significant time and resources into detailed design or coding. By testing a wireframe with users or team members, designers can evaluate navigation paths, the placement of interactive elements, and overall user flow. This iterative process ensures the final product is user-centric and meets its intended goals.
48+
Another key purpose is usability testing and problem-solving.
49+
Wireframes allow designers to identify potential usability issues and
50+
make improvements before investing significant time and resources into
51+
detailed design or coding. By testing a wireframe with users or team
52+
members, designers can evaluate navigation paths, the placement of
53+
interactive elements, and overall user flow. This iterative process
54+
ensures the final product is user-centric and meets its intended
55+
goals.
2756
</p>
2857
<p>
29-
Finally, wireframes serve as a development guide. They act as a reference for developers, providing a clear understanding of what needs to be built and how different elements should interact. This reduces ambiguity and streamlines the development process, ultimately saving time and resources.
58+
Finally, wireframes serve as a development guide. They act as a
59+
reference for developers, providing a clear understanding of what
60+
needs to be built and how different elements should interact. This
61+
reduces ambiguity and streamlines the development process, ultimately
62+
saving time and resources.
3063
</p>
3164
<p>
32-
In summary, wireframes are essential tools in the design and development of digital products. They organize content, enhance communication, identify usability issues, and guide development, all while focusing on structure and functionality rather than visual aesthetics. By providing a clear blueprint early in the project, wireframes contribute significantly to creating intuitive and effective user experiences.
65+
In summary, wireframes are essential tools in the design and
66+
development of digital products. They organize content, enhance
67+
communication, identify usability issues, and guide development, all
68+
while focusing on structure and functionality rather than visual
69+
aesthetics. By providing a clear blueprint early in the project,
70+
wireframes contribute significantly to creating intuitive and
71+
effective user experiences.
3372
</p>
3473
</article>
3574
</main>

0 commit comments

Comments
 (0)