Adobe Premier Pro - Tutorial fun!

Good evening, designer friends!

This week, I began exploring a new Adobe program: Adobe Premiere Pro. At first, I was a bit apprehensive about tackling this software, as I feared it would be overwhelming and complex. However, I’ve found myself having a lot of fun experimenting with the various tools and options it offers. Watching numerous tutorials has truly helped me grasp the range of features available to me.

I decided to jump into one of the projects from the tutorials that I thought would be both enjoyable and beneficial for learning practical effects. I chose the tutorial titled "Discover Blend Modes." It really helped me understand how to layer clips and see how they interact, especially with video 1 and video 2. I experimented with nearly every blend mode on my first video clip and then on the second one. I also adjusted the opacity of the blends and alternated between having one clip with a blend and another without it.

Not wanting to stop there, I found a website https://www.epidemicsound.com/music/featured/  where I can download various audio clips for free. There's a membership required, but I opted for a free trial to see what the site had to offer, and I was really impressed. I picked two audio clips that I thought would work well together. I manually adjusted the keyframes on the kids' laughter, tweaking the volume to ease in and out. Then I layered a second clip of bubbles underneath, keeping its volume low and doing a similar easing in and out effect. 

I even added the laughter clip again, following the same easing technique and layering it with the bubbles for a fade out effect. While it’s not perfect, and I realize I could improve on timing and layering, the important thing is that I learned from it. I think I am starting to get the hang of it!

Learning Adobe Premier Pro

So I just started learning Adobe Premiere Pro. I thought this was going to be difficult, but I am finding this is not as scary as I initially thought, and I think after watching a few tutorials, I am finally starting to get it! Yay!

In class, our first project assigned to us was to take an audio clip of "Who Let the Dogs Out" and create a video clip using that audio clip and edit it. I added some transitional effects and learned how to fit to frame. I tried to use images to tell a story and keep a consistent theme to create an overall cohesive look and fun. This was my first attempt at creating and editing a video in Adobe Premiere Pro. Cool stuff. I'm excited to learn more! So here it is.

Why is accessibly so Important?

1) Add Alt Text to Images,always include a short description of what the image shows so people using screen readers can understand what it is.

 2) Your text should stand out clearly from the background so everyone can read it easily(even people with vision issues).

3) Organize your content using heading tags like <h1>, <h2>, and so on. This helps screen readers and makes your content easier to follow.

4) Let People Navigate With a Keyboard,Not everyone uses a mouse, so your site should work just as well using only a keyboard (like with the tab key).

5) Label All Form Fields,Make sure every input or form box has a label so people know what they’re supposed to type in.

6) Add Captions and Transcripts, If you use videos or audio, add captions or a transcript so people who can’t hear still get the information.

7) Use Clear Link Text,Don’t say “click here.” Use link text that explains where the link goes, like “View our services” or “Read the full guide.”

8) Avoid Flashing or Blinking Stuff! Fast flashing content can be harmful to some users. It’s best to keep things calm and smooth( siezures suck!).

9 Use ARIA Tags When Needed, These help assistive tech better understand your site layout, especially if you’re using more complex designs.

10) Test Your Site for Accessibility,Try tools like WAVE or Google Lighthouse to check for issues,and if possible, ask real users for feedback.

Learning About Design 16

    We have been learning HTML and CSS, as well as how to use Dreamweaver to create websites, which is really exciting! However, I was initially confused about the difference between wireframes and sitemaps, as well as their roles in the design process. To clarify, I did some research. (I wish I had done this before submitting my creative brief, which included both concepts). 

In retrospect, wireframes and sitemaps are incredibly helpful for organization and overall time management. They make everything come together more smoothly and help create a cohesive and unified design that flows well.

That being said, from what I understand, wireframes and sitemaps are crucial tools in web design, each fulfilling a distinct yet complementary role. Below is an overview of their significance and distinctions:

Significance of Using a Wireframe

• Visual Guide: A wireframe serves as a basic visual representation that outlines the arrangement and structure of a web page.  

• Emphasis on User Experience: It enables designers and stakeholders to concentrate on user experience, navigation flow, and content location prior to the commencement of graphic design or coding.  

• Minimizes Revisions: Identifying layout or functionality issues at the wireframing stage conserves both time and costs during the development process.  

• Means of Communication: Wireframes effectively convey design concepts to developers, clients, and team members.  

Importance of Using a Sitemap

• Structural Overview: A sitemap displays the overall structure of the website, demonstrating how pages are organized and interlinked.   

• Enhances Navigation: It aids in devising logical navigation pathways, ensuring users can effortlessly locate what they need.  

• SEO Advantages: For active websites, sitemaps facilitate better crawling and indexing by search engines.  

• Content Organization: Assists in identifying necessary content and its appropriate placement.

I made this in Adobe Illustrator as a little cheat sheet. Perhaps this will help you :)

Understanding UI and UX Design

Understanding UI and UX Design

UI (User Interface) Design refers to the visual elements of a website or application, including layout, colors, buttons, typography, and the overall look and feel. It’s all about aesthetics and how things appear to users.  

On the other hand, UX (User Experience) Design revolves around the entire experience someone has while interacting with your site or app. This encompasses usability, accessibility, performance, structure, and emotional impact. Essentially, it’s about how everything functions and feels.   

In short:  

• UI = Appearance  
• UX = Functionality and Experience  

10 Tips for Creating an Exceptional User Experience (UX) on Your Site:

1. Keep it Simple and Intuitive  

    A straightforward navigation structure, minimal clutter, and clear layouts help users find what they need quickly.  

2. Focus on Mobile Design

    Ensure your website is responsive and works smoothly on smartphones and tablets.  

3. Prioritize Loading Speed

   Optimize images, trim down code, and choose a fast host to ensure quick loading times.  

4. Clear Calls to Action (CTAs)  

   Use direct phrases that guide users on what to do next (like “Buy Now,” “Sign Up,” or “Learn More”).  

5. Consistent Design Language

   Use uniform fonts, colors, and button styles to avoid confusion and create a sense of cohesiveness.  

6. Readable Text  

    Opt for easy-to-read fonts, maintain good color contrast, and break up lengthy paragraphs with headings and visuals.  

7. Facilitate Easy Navigation  

   Consider sticky menus, breadcrumbs, and an organized hierarchy to help users stay oriented.  

8. Use Feedback and Visual Cues

   Make buttons responsive on hover, show validation errors in forms, and ensure interactive elements feel alive.  

9. Ensure Accessibility

   Make your site compatible with screen readers, add alt text, use ARIA labels, and comply with WCAG standards.  

NOTE: ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that help screen readers and other assistive technologies understand and interact with web content, especially when using advanced UI elements like sliders, dropdowns, modals, or dynamic content.

Common ARIA Attributes:

aria-label – Gives an invisible label to an element.

aria-hidden="true" – Hides elements from screen readers.

aria-expanded="true/false" – Indicates if an element like a dropdown or accordion is open or closed.

aria-live="polite" – Announces updates to a region of the page (e.g., form errors, notifications).

Example:

<button aria-label="Close Menu">X</button>

Even if the button just shows "X", screen readers will read “Close Menu,” improving accessibility.

 

10. Regular Testing and Iteration

    Conduct A/B testing, analyze heatmaps, gather user feedback, and dive into analytics to figure out what works and continually improve.

What is SEO?

What is SEO?

SEO, or Search Engine Optimization, is the process of improving your website and its content to increase its visibility and ranking on search engine results pages (SERPs), particularly on Google. The goal is to drive non paid or organic traffic to your site by making it easier for search engines to understand and recommend your content to people searching for relevant keywords.

Why is SEO Important?

• Increases Visibility & Traffic:Higher rankings lead to more users clicking on your link. 
• Builds Credibility & Trust: Websites that rank well are often viewed as more reliable.  
• Cost Effective: Unlike paid ads, organic traffic comes at no cost.  
•  Enhances User Experience: Good SEO practices improve your website's usability.  
•  Provides a Competitive Edge: Ranking higher than rivals allows you to grab a larger market share.  
•  Supports Other Marketing Efforts: Effective SEO strengthens the success of content marketing, social media, and more.  
•  Drives Long Term Results: Unlike paid ads, the benefits of SEO accumulate over time and leave a lasting impact.

10 Essential Tips to Ensure Your Site is Properly Indexed:

1. Submit Your Site to Google Search Console:This tool helps Google discover, crawl, and index your website, while allowing you to track its performance.  

2. Create & Submit an XML Sitemap: A sitemap helps search engines find and index all pages on your site efficiently.  

3. Use a Robots.txt File Wisely: This file tells search engines which pages to crawl and which to leave out.  

4. Ensure Your Site is Mobile Friendly: With Google’s focus on mobile first indexing, a responsive design is crucial.  

5. Improve Site Loading Speed: Fast loading websites enhance user experience and SEO rankings.  

6. Utilize Structured Data (Schema Markup): This helps with indexing and may enable rich snippets (like star ratings and FAQs).  

7. Create High Quality, Relevant Content: Regularly publish valuable content that targets the keywords your audience is searching for.  

8. Optimize On Page Elements: Include relevant keywords in:

•    Title tags
•     Meta descriptions
•     Headings (H1, H2, etc.)
•    URLs
•    Alt text for images  

9. Build Internal Links: This helps search engines crawl your site better and improves user navigation.  

10. Earn Backlinks from Reputable Sources:High quality external links signal authority and trustworthiness to search engines.  

11. Fix Broken Links and 404 Errors:Removing broken links improves crawlability and user experience.  

12. Use Canonical Tags to Avoid Duplicate Content: This helps search engines identify the original version of a page.  

13. Keep Your Content Updated: Fresh, relevant content encourages search engines to revisit and index your site more frequently.

creative challenge 37

Good evening, design friends!

This week, I decided to ask my newfound friend, ChatGPT, for a creative challenge to boost my creativity. I laughed when I read the suggestion; it was a great idea! The challenge was to take two random concepts and create a mashup. Honestly, I would love to revisit this idea and take it to the next level, updating this blog with what I can come up with. Hehehe!

For now, I chose to reimagine Little Red Riding Hood in a cityscape. I found an old photo of myself dressed as Red Riding Hood, removed the background, and then had ChatGPT generate a cityscape background. I merged the two images after editing out the background from my photo in Adobe Photoshop and added a gradient. 

Next, I brought the merged image into Adobe Lightroom to adjust the levels, aiming to keep the scene realistic while adding a slight gradient to make it appear as though the light source was coming from the moon. Initially, my lighting was too bright for the scene I wanted to create. I also added a bit of blue lighting to enhance the atmosphere and completed the look of Little Red Riding Hood in the city.

I was considering doing a mask for the hood to make it a striking red. What do you think?