Week One: Jan 1st - Jan 4th

Here’s everything I worked on and learned this week!

Building a Webpage

While this wasn’t entirely just from the last week, I built a website from scatch using Astro! So far, I have a home page, a basic about page, and the starts of a contact me and blog page. I am most proud of my home page as I learned about how to utilize CSS to layer a background image behind two <div> elements and how to use Astro components for the header and footer.

What Did I Learn?

1. Text Overlay on Image
2. Astro Components

What Do I Still Need to Learn?

I definitely still need to learn more about how to effectively refactor code, especially when considering the duplication I have in my site stylings. I also need to learn how to resize elements with the page size. When resizing the page, there are some elements that will overlap decreasing readability and accessibility.

Storyboarding with Figma

Over the course of the week, I worked through most of “Figma Tutorials for Instructional Designers” on Devlin Peck’s Youtube Channel. In the tutorial, Sabrina Gonzales guides the viewer through basic Figma tools, how to make style guides, wireframes, visual mockups, and how to use Figma as a prototyping tool. Although, I have yet to finish the last video.

This week, I focused on creating a text storyboard for my E-Learning Course and got about 25% through as a I created my own template and looked through many examples of what I should input. I also created a few wireframes and 1 visual mockup as I familiarized myself more with Figma.

What Did I Learn?

1. The Design stage in ADDIE takes a long time.

In the tutorial, I watched as Sabrina was extremely specific with element spacing and colors in the style guide and wireframes, which I was something that I did not expect. I expected it to be a rough draft with elements, colors, and graphics to be decided later on in the production stage. She also took the time to iterate on several of her designs.

2. I need to more particular about what I am including in my storyboard, wireframes, and mockups.

I’m sure that this will help me later in the development stage once I begin working in Articulate Storyline, but I just need to be more clear about communicating the design I want. Even if I am the only one to see it, I’m sure it will be more efficient to the work on the front end, instead of trying to figure it out later.

What Do I Still Need to Learn or Do?

1. Figma shortcuts
2. Finish writing the content for the ELearning Course

What’s Next?

The priority list for the week:

1. Add Content to Portfolio
2. Add Content to Resource Hub
3. Style About, Contact Me, Blog, and Portfolio Pages
4. Make Pages Responsive
5. Code Refactoring

For later:

1. Add Photos to Blog post
2. Add links to Astro, Devlin Peck’s tutorial to post
3. Figma Shortcuts