Lab: 7
Creating an aesthetic website
using Wix website builder by
applying the concepts of HCI.
Lab 7_____________________________________________00/00/2025
• Use Wix website builder tool and create a well aesthetic website. that should
comprise proper website, content ,logos, images, text color and detail's
• Objectives:
After completing this lab, Students will be able to;
• To create any website using WIX website builder.
• Will keep in mind the principles learned in HCI while creating website.
• Corresponding CLO and PLO:
• CLO 2, PLO 6
• Theory:
Considerations for Creating website
1. Purpose and Audience Define
Purpose:
Clarity: It's crucial to have a clear understanding of why the website is being
created. Is it to inform, entertain, sell products/services, provide resources, or
connect with an audience?
Goals: Define specific goals the website aims to achieve, such as increasing brand
awareness, generating leads, driving sales, or fostering community engagement.
Identify Audience:
Demographics: Understand the demographic profile of your target audience,
including age, gender, location, income level, education, and interests.
Needs and Expectations: Identify their needs, preferences, and expectations
regarding content, usability, and design to tailor the website effectively.
2. Information Architecture (IA) Organize Content:
Hierarchy: Structure content hierarchically to prioritize and organize information
logically. Use categories, subcategories, and pages to create a clear path for users
to navigate.
Navigation: Design intuitive navigation menus that are easy to understand and use.
Ensure consistent placement of navigation elements across pages for familiarity and
usability.
3. Visual Design
Aesthetic Appeal:
Branding: Use colors, typography, imagery, and design elements that reflect and
reinforce your brand identity. Consistency in visual elements helps in building
brand recognition.
User Interface (UI): Design UI elements such as buttons, forms, and menus to be
visually appealing and functional, ensuring they align with the overall aesthetic of
the website. Consistency:
Design Patterns: Maintain consistency in design across all pages to create a
cohesive user experience. Consistent use of colors, fonts, layouts, and navigation
enhances usability and reinforces brand identity.
Whitespace:
Balance: Utilize whitespace effectively to create a balanced layout that enhances
readability and visual hierarchy. Whitespace helps in reducing cognitive overload
and directing user focus on key content.
4. Content Strategy Content Planning:
Relevance: Create content that is relevant and valuable to your target audience. Align
content with user needs and interests to ensure engagement and retention.
SEO Optimization: Incorporate relevant keywords and optimize content for search
engines to improve visibility and attract organic traffic to the website.
5. User Experience (UX) Usability:
Intuitiveness: Ensure the website is easy to navigate with clear labels, consistent
navigation patterns, and intuitive user interactions. Minimize the number of clicks
required to access information.
Accessibility: Design for accessibility to accommodate users with disabilities.
Ensure text is readable, images have alt text, and navigation is operable via
keyboard for inclusive user experience.
6. Responsive Design
Device Compatibility:
Adaptability: Design the website to be responsive, ensuring it adapts seamlessly to
different screen sizes and devices (desktops, tablets, smartphones). This improves
user experience and accessibility across various platforms.
Mobile Optimization: Optimize for mobile devices with touch-friendly
navigation, compressed images for faster loading, and content prioritization for
smaller screens.
7. Interactivity and Engagement Call-to-Actions (CTAs): z
Effectiveness: Strategically place clear CTAs throughout the website to guide
users towards desired actions such as signing up for newsletters, making
purchases, or contacting the business.
Feedback Mechanisms: Incorporate feedback forms, surveys, and social media
links to encourage user engagement and gather insights for continuous
improvement.
8. Performance and Security Loading Speed:
Optimization: Optimize website performance by minimizing HTTP requests,
compressing images, using caching techniques, and leveraging content delivery
networks (CDNs) to ensure fast loading times.
Security Measures: Implement security protocols such as SSL certificates
(HTTPS), data encryption, regular software updates, and secure authentication
methods to protect user data and maintain trust.
9. Analytics and Iterative Improvement
Analytics Tools:
Monitoring: Use web analytics tools (e.g., Google Analytics) to track visitor
behavior, traffic sources, conversion rates, and other key performance indicators
(KPIs). Analyze data to identify trends, user preferences, and areas for improvement.
Iterative Optimization: Continuously optimize the website based on analytics
insights and user feedback. Test new features, design changes, and content updates
to enhance user experience and achieve business goals.
10. Legal and Ethical Considerations
Privacy Policy:
Transparency: Clearly outline how user data is collected, stored, used, and protected
in compliance with data protection regulations (e.g., GDPR, CCPA).
Copyright Compliance: Respect intellectual property rights when using images,
text, or multimedia content on the website. Obtain permissions or licenses where
necessary to avoid legal issues.
5.Task:
Use Wix website builder tool and create a well aesthetic website. that should
comprise proper website, content, logos, images, text color and detail's.
6. Conclusion:
Building a website on Wix gave me hands-on insight into the significance of user-friendly
design, maintaining layout consistency, and incorporating responsive elements. I gained
knowledge on applying fundamental design principles, tailoring interactive features, and
organizing content to cater to diverse user requirements—all achievable without needing
expertise in coding. This experience was instrumental in crafting a website that's both functional
and aesthetically pleasing. Furthermore, working with Wix's drag-and-drop tools allowed for
efficient experimentation with design choices and layout adjustments. It highlighted the
importance of navigation simplicity and content readability in enhancing user experience. By
customizing my site, I understood how visual hierarchy and element placement impact user
engagement. Overall, building the website was a practical lesson in balancing form and function
for effective web design.
7. Rubrics:
Absent Student is Student can Student has Student has Student
unable to understand followed constructed perfectly
follow the the instructions the implemente
provided provided to construct functional/ d a working
instruction laboratory the working model/
s properly. instructions fundamenta schematic/ logic/
The and l model/ circuit/
student familiar schematic/ block block
can name with the lab block diagram/ diagram/
the environmen diagram/ code, and code and
Demonstratio hardware t (Trainer/ code/ have successfully
n or software/ model on successfull executed
simulation IDE), but the y executed the lab
platform, cannot protoboard/ the objective in
but unable implement trainer/ program/ Realtime or
to on the simulation run circuit in a
implement platform software. on software simulation
anything practically platform environmen
practically or on the t and
or on the software produced
software the desired
results
Category Ungrade Very Poor Poor Fair Good Excellent
d
Percentage [0] [1-20] [21-40] [41-60] [61-80] [81-100]
Marks 0.0 0.1 0.2 0.3 0.4 0.5
Date Total Instructor’s Signature
Marks
Report Plagiarize Requirement Observation Appropriate Correctly
not d content s are listed s are computation drawn
submitted presented and recorded s or conclusio
or experimental along with numerical n with
Laborator
incomplete procedure is detailed analysis is exact
y procedure
submissio presented performed results and
Reports
n complete
report in
all respects
Category Ungrade Very Poor Poor Fair Good Excellent
d
Percentage [0] [1-20] [21-40] [41-60] [61-80] [81-100]
Marks 0.0 0.1 0.2 0.3 0.4 0.5
Date Total Instructor’s Signature
Marks
