Design post-4

 

  If you've ever been to Publix or other local grocery stores in Florida, you've probably noticed that most of the bottled water on the shelves is from Zephyrhills—a natural spring located near Dade City. I’ve always been partial to this brand. It’s cheap, easy to find, and in my opinion, it tastes the best. There’s also something comforting about the light aqua-colored wrapping and the clean, simple label—it’s familiar, nostalgic even.

But one thing I didn’t realize until I started traveling more is that spring water brands are often deeply regional. When I was in Louisiana and Texas, I started noticing that Zephyrhills was nowhere to be found. Instead, there was Ozarka, a Texas-based brand with similar packaging and price. The label was different, but the concept was the same: clean design, a splash of color, and some carefully chosen typefaces that try to say, “this water is pure, local, and trustworthy.”

Up north, especially in states like Maine and New Hampshire, the shelves were full of Poland Spring and Deer Park. Again, same idea—regional spring water packaged in a familiar format. It was kind of like seeing the same product wearing different clothes depending on the state you’re in. That’s when it hit me: I was learning about design without even realizing it.

Every label told a visual story. The colors, the fonts, the imagery to appear local—they were all subtle cues meant to convey purity, nature, and reliability. It made me realize how much design plays a role in building trust, especially with everyday items like bottled water. And honestly, comparing these brands helped train my eye. I started noticing how typography, layout, and color palettes can be adapted for local markets while still feeling familiar across the board.

But safe to say- no one beats Zephyrhills.

Anyway- One of my friends got curious about the water bottles, I mean after all they even held the same shape, only difference was the taste of minerals in some- and upon further research, all these are owned by Nestle, who actually received some back lash and legal issue, so they renamed/got sold to Blue Triton.

Despite all of these being regional, and some getting incredibly patriotic over their "water" they're all packed and sold by the same company, it's a very smart and clever way to market, and I thought it was quite intresting to discover!

Accessibility

 Accessibility is important in website design because it ensures that all users- including those with disabilities- can perceive, understand, navigate, and interact with content. Making a site accessible not only complies with legal requirements (The ADA like we went over in class) but also improves usability for everyone, broadens your audience, and demonstrates inclusive design.

List of 10:

1. Use Semantic HTML
   Structure with proper HTML tags (<header>, <nav>, <main>, <article>, <footer>, etc.) so assistive technologies can interpret the content.

2. Provide Text Alternatives for All Non-Text Content
   Use descriptive alt attributes for images, and ensure captions or transcripts are available for videos and audio. These show when the images cannot load as well.

3. Ensure Sufficient Color Contrast
   Text should have enough contrast against the background to be readable by people with visual impairments or color blindness. Or have the option to change it.

4. Keyboard Navigation
   Ensure that all interactive elements (like links, buttons, forms, etc..) can be accessed and operated using a keyboard alone.

5. Responsive and Scalable Design
   Make your site usable across different devices/platforms and support zooming without breaking layout or hiding content.

6. Clear and Consistent Navigation
   Keep menus, headers, and page structures consistent so users can learn and navigate intuitively.

7. Use ARIA Landmarks and Roles Wisely
   Use ARIA (Accessible Rich Internet Applications) roles to provide additional context to screen readers, but avoid overuse or misuse.

8. Descriptive Link Text
   Avoid vague links like “click here.” Use link text that describes the destination or action (e.g., “Download the accessibility guide”).

9. Avoid Auto-Playing Media
   Auto-playing videos or sounds can disorient users- especially those using screen readers—and should be avoided or easily stopped.

10. Test with Real Users and Assistive Technologies
    Go beyond automated tools and include users with disabilities in your testing process to find issues that algorithms might miss.

UI/UX

 UI Design: focuses on the look and feel of a digital product and how the interface looks, including buttons, typography, colors, spacing, icons, ect. It's essentially the visual design and interactive elements users interact with.

UX Design: is about the overall experience a user has when interacting with a product or site. It involves user research, usability, information architecture, and how intuitive or satisfying the experience is. UX is about solving problems and making sure the user's journey is smooth and effective.

Underlined is basic summary :)

List of 10:

Design for Mobile First (or at least keep it well in mind)

• Ensure your website is responsive and works well on all screen sizes- mobile traffic often exceeds desktop.

Keep Navigation Simple and Intuitive

• Use clear menus and logical structure so users can easily find what they need in just a few clicks.

Use Clear Calls-to-Action

• Buttons and links should be easy to see and tell users exactly what will happen when clicked ( (“Get a Quote,” “Sign Up”).

Optimize Page Load Speed

• A fast site improves user satisfaction and lowers bounce rates. Compress images and eliminate unnecessary scripts.

Prioritize Accessibility

• Make sure your content can be accessed by all users, including those using screen readers or other assistive technologies. Remember ALT commands on images!

Maintain Visual Consistency

• Use consistent colors, fonts, and design elements to build trust and brand recognition.

Use Whitespace Effectively

• Don’t overcrowd the page- good spacing improves readability and highlights important elements.

Make Content Easy to Scan

• Break text into headings, bullet points, and short paragraphs. Most users skim before deciding to read. Avoid a million images.

Test with Real Users

• Conduct usability testing to find out where users struggle and improve based on real feedback.

Minimize User Effort

• Fewer clicks, faster access to info, and easier forms all contribute to a smoother experience—remove unnecessary steps wherever possible.

SEO Post

 SEO (Search Engine Optimization)-

Refers to the process of optimizing a website to improve its visibility and ranking on search engine results pages like Google. The goal is to increase organic (non-paid) traffic to a website by making it more accessible and relevant to search engines and users.

List of 10-

1. Submit a Sitemap to Search Engines: Create and submit an XML sitemap to search engines (like Google) to ensure they know the structure of your site and can crawl it effectively.
2. Add alt text: After recently going over this in class, its good to give your images titles, and alt text, incase images cannot load, or to ensure all (visually impaired or blind) can also take in your data and content.
3. Optimize Your Site’s Load Speed: Fast-loading pages are crucial for user experience and are favored by search engines. Use tools like Google PageSpeed Insights to test and improve load times.
4. Make Sure Your Website is Mobile-Friendly: With mobile-first indexing, search engines prioritize mobile-optimized websites. Use responsive design to ensure your site works well on all devices.
5. Use Clean, SEO-Friendly URLs: Ensure URLs are descriptive, concise, and include relevant keywords. Avoid using long strings of numbers or irrelevant characters.
6. Optimize Title Tags and Meta Descriptions: These elements are important for SEO and help search engines understand the content of each page. Ensure they are clear, keyword-rich, and enticing for users.
7. Improve Internal Linking Structure: Internal links help search engines crawl and index your site more efficiently, as well as improve user navigation.
8. Use Header Tags (H1, H2, etc.) Correctly: Header tags help search engines understand the structure of your content. The H1 tag should describe the main topic of the page, while H2 and H3 tags break down sections.
9. Ensure Your Site is Secure (HTTPS): Search engines prefer secure websites. Implement SSL certificates to ensure your site is HTTPS encrypted, which is also a ranking factor.
10. Regularly Update and Optimize Content: Keep content fresh and relevant. Search engines tend to favor websites with up-to-date and valuable information. This includes optimizing older blog posts or pages that may have lost relevance.

Creativity 3-

Engaging in collaborative creative exercises can significantly enhance one's imaginative capabilities. By partnering with others, individuals can explore diverse perspectives, challenge their assumptions, and co-create ideas that might not emerge in isolation.​ Recently, a friend and I embarked on a collaborative endeavor to conceptualize a paladin character for a Dungeons & Dragons campaign. He uses this character in his current campaign with friends but never really thought about how they looks- so this started when I offered to draw.

​

While the drawing remains a work in progress, I focused on elements that allowed for greater artistic freedom, such as the helmet, pose, and sword. These aspects enabled me to infuse personal interpretation while staying true to our shared vision.

​

Collaboration I have seen on the "creative exercise" sites a handful of time but haven't had a chance to try it out so much- which is why I was happy to sit down with someone and shoot ideas out in a brainstorm session. DnD has a lot of creative elements, after all the whole purpose of the game is to create characters and roleplay as them, imagining the world and scenarios they'll get into. As stated, my friend uses the Paladin play style, armor is very difficult to draw as there is many blocky shapes and intricate designs- I went with a more Bloodborne based armor, with lots of wing based details and almost eldritch horror style. Id like to finish this project and make it more polished once I have time!

A few sites you can check out with collaborative ideas:

• https://www.uxpin.com/studio/blog/design-thinking-exercises/
  
• https://www.ideou.com/pages/collaboration
  

Design 3-

 Currently, I’m gathering inspiration and research for a web project centered around tourism in Maine, a state known for its rugged coastline, charming towns, and natural beauty. One of our projects required we put together some moodboards, font choices, and overall inspiration to reflect into the project, while doing so, it helped me expand my understanding and overall perspective to tackle making a cohesive and visually pleasing page.

A well-crafted website can not only share information but also evoke a feeling or experience. I’ve been exploring travel websites, image sharing websites, and minimalist layouts to understand how different elements come together to guide a visitor's eye and keep them engaged. But beyond visuals, good web design is deeply rooted in intention and usability. Whether the site promotes tourism in Maine or selling postage stamps, the goal is always the same: clear communication and a seamless user experience.

Here are five key elements that make a well-designed web page:

1. Strong Visual Hierarchy

A well-designed page organizes content so users naturally know where to look first. This is achieved through font size, color contrast, layout spacing, and placement of key elements like headings, images, and call-to-action buttons. A clear visual hierarchy makes the experience intuitive.

2. Responsive Design

Today’s audiences browse on all kinds of devices, from phones to widescreen monitors. A quality website must be responsive—adapting seamlessly to different screen sizes while keeping layout and content clean and accessible across several platforms.

3. Purposeful Typography

Fonts aren’t just for readability—they set the tone. Clean sans-serifs convey modernity, while serifs or script fonts might suggest elegance or tradition. Pairing two complementary fonts with clear hierarchy keeps things stylish and legible. Searching on free websites, or Adobe fonts can give you a whole world of different fonts, for this project I used keywords like, outdoors, earth, and woodsy.

4. Intuitive Navigation

Good navigation helps users find what they need without frustration. Whether it’s a sticky header, a collapsible mobile menu, or breadcrumb trails, clear navigation ensures a site feels easy to explore, not overwhelming. Keywords also help the site be found or for even the user/reader to navigate better, making different topics standout from one another.

5. Consistent Branding and Aesthetic

From color palette to photo style, every detail contributes to a brand’s identity. Consistency builds trust and polish. For a tourism site about Maine, this might mean a calming coastal palette, serif fonts that evoke heritage, and landscape photography that draws visitors in.

Copyright Importance-

 Why Copyright is Important to Designers: 4 Key Reasons

In the world of design, where originality and creativity are the foundation of success, copyright plays a critical role. It offers legal protection and professional security to creators, ensuring that their work is respected and valued. Here are four reasons why copyright is especially important to designers:

1. Protects Original Work
   Copyright grants designers legal ownership of their creations- whether it's a logo, layout, illustration, or product design. This protection ensures that others cannot legally copy, distribute, or profit from the work without permission.

2. Supports Fair Compensation
   When a design is copyrighted, it provides leverage for the designer to be properly paid for its use. This could be through licensing fees, royalties, or exclusive contracts, helping to ensure that creative professionals earn a fair income from their work.

3. Builds Professional Credibility
   Registering a copyright adds legitimacy to a designer’s portfolio. It communicates that the work is original, protected, and professionally handled- important for gaining client trust and maintaining a competitive edge.

4. Discourages Infringement and Misuse
   Knowing that a design is copyrighted acts as a deterrent for those who might otherwise steal or alter the work without consent. It empowers designers to take legal action if infringement occurs, reinforcing the value of creative ownership.

In short, copyright isn’t just a legal tool- it’s a form of respect for the time, skill, and vision that designers pour into their craft. It protects creativity and helps the design industry thrive with integrity.

Here are some sources to educate:

https://www.copyright.gov/engage/visual-artists/

https://penji.co/graphic-design-copyright/

https://www.hellobonsai.com/blog/design-copyright