Welcome to Heather's Blog
006 | Building my Website: Design and Node.JS

006 | Building my Website: Design and Node.JS

Welcome to my new-ish blog, if you are new here, and welcome back to my readers traveling this journey with me. Today we are going to focus on one of my personal goals. I am a UI/UX designer and have been helping design and build websites and applications since 2012/2013. My style and skills have improved over the last decade for sure. But today I am starting a first for me. My goal for February/March is to have my homepage and blog up and tested on a VERCEL site.

Building out my own Next.JS website with Vercel

Now, in my corner, I have my lovely spouse who is a Sr. Developer. He will be available for me as I determine where to start and what to do next. But he refuses to do the work! Which is great because I want to know the entire process and share it with you. His first direction was to go to https://nextjs.org/ and give it a try until I “get stuck.”

Starting a Next JS Project for Non-Developers.

My time box: a two-year-old’s Nap... I already did the laundry and prepped dinner, so her nap is half-spent. It is around 2:25p as I pull up this website and let’s see how long this takes me.

  1. Checking my node and npm versions - which are already installed on my computer.
  1. Node: “node -v” 14.18.1 and NPM: “npm -v” 6.14.15. Wow, I am so behind.
  1. Updating Node JS
  1. Apparently, I must have Node version 18 or later, so now that it’s up to date I’m going to follow https://nextjs.org/docs/getting-started/installation to get my site live.

I won’t bore you with the details but this took me an hour just to get my node version up to date and follow the instructions. Even with me being slow as molasses, it is running locally and I will call that a win for this nap time block.  

Design

        I have created a wireframe/prototype on www.figma.com just to keep up my skills. I separated each section into a layer and will use these as components. I also laid out my site as a desktop preview and a mobile preview so I can program and design mobile responsive first.

Dictionary break:

  1. According to Miro.com, “A wireframe is a schematic or blueprint that is useful for helping you, your programmers and designers think and communicate about the structure of the software or website you're building.” - This can be anything from pen lines on a piece of paper to the mockup (hi-fidelity) examples below.
  2. According to TechTarget.com, “In programming and engineering disciplines, a component is an identifiable part of a larger program or construction. Usually, a component provides a particular function or group of related functions. In programming design, a system is divided into components that in turn are made up of modules.” - For me, These function as smaller problems I can solve. Each component will always appear together on a device.
  3. According to UXpin.com, “The mobile-first approach is a tenet of progressive enhancement. It is the ideology that mobile design, as the hardest, should be done first. Once the mobile design questions are answered, designing for other devices will be easier. What it boils down to is that, the smallest of the designs will have only the essential features, so right away you have designed the heart of your UX.” - so go small first and organize the hard things before scaling up.

**Goal Progress: In my blog post 001, I said I needed more resources for UI/UX design and I am still loving uxpin.com/studio/blog.**

Here are some previews of my mobile design:

Wrap-Up

“Tell me and I forget. Teach me and I rememeber. Involve me and I learn ”
                        - Benjamin Franklin

In conclusion, embarking on the journey of building my own website using Next.js and Vercel has been both exciting and challenging. With a little support, I've taken the initiative to navigate the development process on my own, ensuring a hands-on experience, and hopefully a lot of learning. While the initial steps, such as updating Node.js, may have taken longer than anticipated, the sense of accomplishment in running the site locally during a brief nap time is a notable win.

Follow Along in Post #007 for more on the design, wireframes, and other learning/progress.

Heather