Welcome to Heather's Blog
010 | NEXT.JS website: Adding Read More Collapese, Fonts, and Making an Architecture Informational Map

‘010 | NEXT.JS website: Adding Read More Collapese, Fonts, and Making an Architecture Informational Map

Welcome back! Please take a second and glance over posts 5-9 to see this whole process. Over the last four weeks, I have spent 18.75 hours on my new personal business website.

As mentioned previously, I'm a UI/UX designer with a journey that extends back to 2012. While I've dipped my toes into coding with JS, HTML, JSON, CSS, and SaSS, I've never undertaken the challenge of creating a complex website from the ground up.

This website needs to serve as a transitional place for current clients to see an update on my services and work. It also needs to service new clients as they see why they should hire me and what I can do. Finally, it will showcase my recent works, provide me with a blog outlet, and allow me to have a store without paying $300-600 annually for Square to share my Printify shop.

What I Think About the Journey So Far

I am grateful to Sr. Software engineer DIJS who has encouraged me and given me links and posts to read as I learn this top-to-bottom process. So far I have only gotten stuck a few times and I have learned so much. Thankfully this will always give me a sense of thankfulness for the developers I guide as a UX and UI Designer.

 What is Left on My To-Do List

This week I really hope to finish the website.

  1. Add button for Resume Expansion [20 minutes]
  2. Reorder section based on what will bring in the most steady income. [35 minutes]
  3. Load more or horizontal scroll on the Digital Scribe section [10 minutes]
  4. My blog posts are loading out of order [30 minutes]
  5. Add/Plan video for some types of projects: Write the video content under the digital scribe areas for now [10 minutes]
  6. Add travel photography to the portfolio (source, save, size, and label) [1 hour]
  7. Add new fonts [10 min]
  8. Home button - maybe my signature [20 min]
  9. Build an Information Architecture Map [30 min]
  10. Add a contact/connect page [30 min]
  11. Redesign and brighten the transition to my Business Section [30 min]
  12. Animation and Hover throughout the new website
  13. Send to my actual Domain
  14. Design store page with Richard’s input
  15. Check links within blogs referencing other posts
  16. Get more feedback.

Read More

The Why

So let’s put this in terms of real estate. If you picture your website design as a layout where each piece has a percentage of the view, this percentage is the real estate. A user will most likely stay on your web page 45-55 Seconds. In that time, I need to grab their attention.

But, if I am not sure why a prospective client wants to come to my website, I want to provide a general overview within 30-45 seconds and allow them to delve into the areas that interest them the most.

Therefore, My initial design has a header/hero followed by a bit about me, my main portfolio, and my career/resume later down the page. That is fine except with my first user test 1 minute was not enough to skim the final portfolios. I want to collapse and merge excess content so the viewer can gloss over nonapplicable text and only read more if they really want to - hince the button.

The how

I created a component Named ReadMore and learned about JavaScript useState to create a toggle function. Then when the button is clicked I had it toggle true and false and change the text in the button. At first, this was a huge success. Then I need to learn about inline if statements to change both the text in the button and the style of my resume component.

Then in my CSS file, I added two classes, open and closed, to remove the height and opacity from my further reading. This could be done with display none, but then I will not be able to animate the section later. Therefore, one call has an unset height and 100% opacity and the other has a height and opacity of zero.

Reorder Sections

After watching and listening to my first test user. I have decided to reorder the home page based on what will bring in the most steady income while removing or collapsing more sections that are hogging the prime user's attention/real estate.

How

I will first make components of sections so I can easily change the order to A/B test users and apply their feedback more efficiently. I did this for the Technology and Scribe portfolios first and have added the load more buttons to both of these sections. I think they look great, and I am feeling more comfortable for sure! Then I will make my business infor and the smaller portfolio components, flip their order, and then add a read more to my text content as needed.  

Sorting my Posts from Newest to Oldest

After getting a little help from my spouse, I recommend reading this to learn more about how to sort in Javascript. At first, the blog post listed oldest to newest, but I want my reader to see the most current posts first. So instead of dateSort(a,b) I just switched them, and now it’s (b, a) and working like a dream.

Adding New Fonts

The Why

Between my logo, signature, and an accent font... my website will have more personality. I want to showcase that I am fun-loving, creative, and organic.

The How

Using Adobe Fonts, I picked two fonts, an easily readable body/main font and a readable but more fun accent font. Then I created a web kit in Adobe fonts and followed these instructions to add it to my web project.

The Signature

To finalize this personality introduction, I will put my PNG signature as a home button in the Navigation component.

Build an Information Architecture Map Now

The Why

In 2 years I would like to reenter the corporate workspace with my skills honed and up to speed. I noticed that it had been over a year since I made a map of pages, flows, and buttons. As I took a step back from this project I followed an article to make sure I didn’t forget any steps and I used draw.io to make this image.

This is a very rough image or blueprint, but it taught me that I want a contact page for users who don’t have an email client on their device.

The Wrap Up

Wow, I hit the 23 1/2 hours Mark this week and I am still not quite done. The site is looking great and has no crazy bugs. Everything functions and the flow is quite easy to navigate and smooth. As you can see from the post, I have 6 more tasks until I can mark this project as done. Here they are again:

  1. Redesign and brighten the transition to my Business Section [30 min]
  2. Animation and Hover throughout the site
  3. Send to my actual Domain
  4. Design store page with Richard’s input
  5. Check links within blogs referencing other posts
  6. Get more feedback.

My Biggest issue is, I feel my blog is lackluster and boring! So let’s make that task number 7 for next week.

On a personal note, Meal prep is going well, I am having a hard time devoting time to budgeting, and we are going to have guests this week plus our foundation will be getting large holes and our floor must come up. So with this, I am going to take a moment and remind us all, that 1% improvement is the goal, but give yourself grace. That 1% doesn’t need to be in all areas at all times. I have a healthy happy kid, we saved up for our foundation repair, I lost 2 lbs! and the weather is starting to feel like spring.

Heather