Design week 3

  In this week's Design Blog, I wanted to share what I learned this week. This week, we learned more about HTML - HyperText Markup Language.  Particular things like using Dreamweaver to speed up work progress in my HTML document/ page. 

Creating different class 

Example 

<span class=”bolder”></span>

.bolder {font-weight:750}

p, main li {line-height:1.6em;letter-spacing:.05em;}

em {font-weight:bold;}

class=”left”

.left {float:left; padding-top: 10px;

    padding-right: 15px;

    padding-bottom: 10px;

    padding-left: 0px;}

class=”right”

.right{float:right; padding-top: 10px;

    padding-right: 0px;

    padding-bottom: 10px;

    padding-left: 15px;}

Project 2A

 

---

Project Name:

Banff Alpine Escape – Resort Tourism Website

---

Name of Client:

Banff Alpine Escape Resort
(A luxury eco-resort located in the Canadian Rockies, near Banff National Park)

---

Project Requirements:

• Design a visually stunning, responsive website to increase tourism bookings.

• Include pages for Accommodations, Dining, Activities, Spa & Wellness, Packages, and Booking.

• Incorporate SEO best practices.

• Feature high quality visuals and interactive content (virtual tours, maps).

• Include clear call to action buttons for booking and inquiries.

---

Target Audience:

The primary audience is affluent travelers aged 30–60, primarily couples and families seeking a luxurious and peaceful getaway surrounded by nature. Many of these travelers come from urban environments and are looking to unplug, recharge, and experience outdoor adventures in a pristine setting.

A secondary audience includes eco conscious millennials and Gen Z travelers (25–40) who prioritize sustainability in travel and seek unique, Instagram-worthy experiences. This group may include solo travelers or digital nomads seeking a quiet, scenic place to work remotely while enjoying wellness activities like yoga, hiking, and spa treatments.

The site also considers international tourists especially from Europe and Asia who are drawn to Canada’s natural beauty, wildlife, and adventure opportunities. Multilingual support and culturally relevant images will be used to make the site more inclusive.

---

The Goal of the Project:

We want users to be inspired and excited enough to book a stay at the Banff Alpine Escape Resort. Whether they’re planning a summer hiking adventure, a cozy winter retreat, or a wellness escape, the goal is to have them explore the site, fall in love with the experience, and make a reservation.

We also want to encourage engagement with downloadable brochures, newsletter signups, and inquiries for group bookings or custom packages.

---

Intended Message:

Taking action by booking a stay at Banff Alpine Escape will help visitors achieve their personal goals: unwinding from the stress of daily life, connecting with nature, creating unforgettable memories, or indulging in wellness and self-care. The website should convey that the resort is a stress-free, all-in-one destination for rest, adventure, and rejuvenation.

The message is clear

“Reconnect with nature. Rejuvenate in luxury. Rediscover yourself.”

---

Types of Imagery:

• Panoramic shots of the Rockies, lakes, and forest

• Cozy cabin interiors with fireplaces and mountain views

• Action shots of guests hiking, skiing, canoeing, and relaxing at the spa

• Lifestyle imagery of couples and families enjoying meals, stargazing, and wildlife encounters

• Drone footage and virtual 360° tours of the property

These visuals aim to immerse the audience in the experience and help them picture themselves there.

---

Color Choices:

• Forest Green – represents nature, calm, and eco-friendliness

• Sky Blue – evokes serenity, open space, and freshness

• Warm Earthy Brown – gives a rustic, cozy feel (wood cabins, trails)

• Snow White/Ice Gray – adds contrast and elegance, reflects winter themes

These colors reflect the surrounding natural landscape and the calming atmosphere of the resort.

---

Type Choices:

• Headings Playfair Display – a serif font that feels elegant and high-end, perfect for a luxury brand.

• Body Text Lato or Open Sans – clean, modern sans-serif fonts that ensure readability across devices.

• Accent/CTA Text Bold variations for emphasis (buttons or quotes)

These fonts balance luxury with clarity and ensure a comfortable reading experience.

---

What is your Call to Action?

• “Book Your Escape Now”

• Secondary CTAs

• “Explore Our Packages”

• “Take a Virtual Tour”

• “Download the Brochure”

• “Contact Our Concierge”

---

Prep Material:

✔️ Research

• Competitor analysis (other luxury resorts in the Rockies)

• SEO keyword research

• Seasonal tourism trends in Banff

✔️ Mood Board

• Visual inspiration including textures, color palettes, photo styles, typography, and UI design ideas.

✔️ Thumbnails/Roughs

• Sketches of potential homepage and subpage layouts

• Navigation flow and visual hierarchy experiments

✔️ Wireframes

• Low-fidelity wireframes for homepage, booking page, and key landing pages

✔️ Site Map

mathematica

CopyEdit

Home  

│  

├── Accommodations  

│   ├── Cabins  

│   ├── Suites     

├── Packages  

├── Gallery  

├── About Us  

├── Contact / Concierge  

└── Book Now

Accessibilty important

 Accessibility is crucial in web design because it ensures that all users, including those with disabilities, can access, navigate, and interact with the site effectively. It’s not just about legal compliance. It's about inclusivity, usability, and providing equal access to information and services for everyone.

1. Use Semantic HTML Elements

2. Provide Text Alternatives for All Non-Text Content

3. Ensure Keyboard Navigability

4. Maintain Sufficient Color Contrast

5. Design for Screen Readers

6. Responsive and Flexible Layouts

7. Avoid Auto-Playing Media

8. Provide Clear Form Labels and Error Messages

9. Use Simple, Clear Language

10. Test with Real Users and Assistive Technologies

What is UI and UX Design?

UI and UX Design 

UI (User Interface) Design refers to the visual elements of a product or website. How it looks 

UX (User Experience) Design is about the overall experience a user has while using a product or service. How it works 

10 Tips for Great User Experience 

1. Keep it Simple and Intuitive

2. Make Navigation Easy

3. Ensure Mobile Responsiveness

4. Optimize Page Speed

5. Use Consistent Design Patterns

6. Prioritize Accessibility

7. Provide Clear Calls to Actions

8. Use Feedback and Error States Wisely

9. Test with Real Users

10. Keep Content Relevant and Readable
    

What is SEO?

 SEO stands for Search Engine Optimization. This is the process of optimizing a website to improve its visibility in (non-paid) search engine results. The goal is to attract more relevant traffic from search engines like Google, Bing, and others by making your website more accessible, relevant, and trustworthy. This is important because increased visibility = more traffic.Organic search is often the primary source of website traffic. This builds trust and credibility with both users and search engines. It also improves user experience. Higher ROI than paid ads over the long term and helps you stay competitive online.

Things to Ensure Your Site is Properly Indexed

1. Submit your sitemap to search engines

2. Use descriptive, keyword-rich URLs

3. Make your site mobile-friendly

4. Use proper heading tags (H1, H2, etc.)

5. Include internal linking

6. Add alt text to all images

7. Ensure all pages are crawlable

8. Fix broken links (404 errors)

9. Regularly publish high-quality, unique content

10. Secure your site with HTTPS

Why are copyrights important

 Copyrights are incredibly important to designers for several reasons. Protection of Original Work, Copyrights give designers the legal right to protect their original creations, whether it's a logo, website design, graphic, or any other visual work. By doing this it ensures that others can't copy, use, or distribute the design without permission. With copyright protection, designers have control over how their work is used. They can grant permission for specific uses,like licensing or restrict how and where their work appears, maintaining the integrity of their vision. Copyrights allow designers to profit from their work. By licensing their designs or selling the rights to their work, designers can earn money from their creativity, ensuring they are compensated for their efforts.Things like copyright protection helps prevent others from stealing or plagiarizing a designer's work. If someone uses a designer's copyrighted work without permission, they can face legal consequences. Also knowing that their work is protected, designers are more likely to be creative and innovate without fear of others copying their ideas. This encourages the continued development of original designs.

Design week 2

  In this week's Design Blog, I wanted to share what I learned this week. This week, we learned more about HTML - HyperText Markup Language. Particular things like inserting images, web links, and adding pages to my HTML document/ page.

How to insert images into HTML

First things first, <img> is a self-closing tag, so there is no need for </img> tag 

• src is the source on the image being the URL or file path 
• alt is what describes the image if it cant be displayed 
• width/height is what controls the image size, also (optional)

Local image vs online image 

<img src="cat.jpg" alt= cute cat">

<img src="images/cat.jpg" alt="A cute cat">

How to insert web link 

<a href> 

• <a href="URL link here"> Click here</a>

How to add pages to HTML

• each page =its own .html file
• use <a href="filename.html">Link Text</a> to move between pages

/my-website 

• index.html= my web page
• about.html= another page
• contact.html= another page 

Design Week 1

 In this week's Design Blog I wanted to share what I learned this week. This week we learned about HTML - HyperText Markup Language. It’s the standard language used to create and structure content on the web. 

I learned the different hierarchies between the

<h1> being the most important heading / largest text

<h2> is used for subheadings under <h1> 

<h3>  is the next subheading over from <h2> 

Another thing I learned was how to open and close tags 

for example <tagname> Content here</tagname>

<tagname> open tag 

</tagname> closed tag 

This is important because HTML is like building blocks, and if tags are not closed properly, it will display incorrectly or not at all. 

The difference between <ul>,<ol>, and <li> 

<ul> = unordered list 

• bulleted list 
• no particular order needed
• uses dots by default

<ol> = ordered list 

1. numbered list 
2. order matters here

<li> = list item

This is used inside both <ul> and <ol> 

its the actual item in the list 

is always considered to be a child of both <ul> and <ol> 

Creativity Week 3

 In this week's Creative Blog I wanted to share an exercise I read about in a book from class called Caffeine for the Creative Mind by (Stefan Mumaw and Wendy Lee Oldfield). The creative exercise was called What Happens From Here? I was tasked with creating ten single- sentence story openings. 

Story Opening Ideas

1. The sky cracked open at midnight, and something ancient stepped through the lightning.

2. Every mirror in the house turned black the day after Grandma's funeral.

3. He had three minutes left to live and still couldn't decide which secret to confess.

4. She didn’t remember adopting a cat, especially not one that spoke Latin.

5. The town’s clocks stopped at exactly 3:33 a.m., and no one seemed to notice except me.

6. His shadow began walking in the opposite direction before he did.

7. The letter arrived fifty years later, but it knew exactly where to find her.

8. Each morning, the tattoo on her wrist spelled a different word, and today was “run.”

9. They say the forest doesn’t let you leave unless it wants to, and today, it whispered my name.

10. The elevator button labeled “13” had never worked until today.