Welcome to Heather's Blog
007 | Building my Website: Design and Content Organization

007 | Building my Website: Design and Content Organization

Welcome back or welcome in. This is my progression and accountability blog where I strive to show my 1% development in areas such as career growth, finance independence, budgeting, health, and family life. This month, as I still grow in other areas, I want to focus my blog on a personal achievement goal. I have been developing websites for a decade now and have never built a modern site from back to front and bottom to top. Last week I built a Next JS website and made it available on a new Vercel account. This week I plan to discuss the design and organize/develop my content and code base.

“Organizing is what you do before you do something, so that when you do it, it is not all mixed up.”  
                                – A. A. Milne

Design

Last week in Post #006, I shared these Mobile Design Previews:

Content and Organization

It is always a wonderful habit to see the content you want to display and organize it accordingly. I love doing this with paper and scissors and then laying it out on a large table as well. Since I am blogging my progress though let’s just walk through it. My website is a revamp of two other sites I created in the past. My goal is to create a place where people can come to vouch for my work before they hire me and a place to see what else I do if they want to work with me again.

Step one - we will break my content into sections.

Step two - I will bold the most important parts.

Then as we develop, I will do mobile-first, and as I scale up I will set breaking points and styles only when the white space becomes unbearable.

Step three for this week - we will see if Chat CPT has any good ideas.

  1. Who am I
  1. What I do
  2. Social bar
  3. My mission statement
  4. CTA (Call to action will be a contact button to an email service or email address)
  5. Short bio - focused on the work I want to do
  1. Testimonies: I collected these last year.
  1. 1-6
  2. CTA (Call to action will be a contact button to an email service or email address)
  1. Main portfolio: Recent projects in two categories that pay well - my focus on higher income earning projects
  1. Technology: Web and application design, mostly UI/UX
  2. Digital Scribing: Illustrating during live events to summarize content
  3. CTA: According to UX.pin: “Apple recommends 44 pixels square for touch targets.” This will apply to all links and buttons on the site.
  1. Resume: My career story: the goal here is to explain why I am so rounded as far as “well-rounded goes” I want two to three scrolls on the average mobile device only.
  2. When we do contract work what is our process and purpose
  1. Services
  2. Process
  3. Values
  1. Artistic Portfolio: with 3-10 examples of each medium or topic. I will disable sections with less than three items and we will set those as goals for this year and next.
  1. Murals
  2. Acrylic Painting
  3. Digital Illustration
  4. Watercolor
  5. Packaging
  6. Layout
  7. Travel Photography
  8. Photography series
  9. Vector design
  10. Pattern design
  1. Footer
  1. Links on this page
  2. Shop link
  3. Blog link
  4. CTA
  5. Social bar

Trying something New: Content and chatGPT

Let’s see what this AI has to say about my content chart above. Let’s just paste his/her response and dig in. Using AI is always a valid option when learning something new or exploring a process.

Chat CPT: “Your proposed order for the sections on your website looks well-thought-out, and it seems to follow a logical flow, emphasizing your identity, services, portfolio, and a call to action. Here are some considerations and suggestions:

(I will keep chatGPT ’s response in bold. Then I will add comments in regularly weighted text.)

1. Who am I: Consider keeping this section concise and engaging. Highlight key aspects that make you stand out, and make it visually appealing. My content idea: Hello. I’m Heather, a designer and creative for hire. Not only a UI/UX and Web designer, but my varied and in-depth talent stack makes me thrive in environments needing detail-oriented and creative problem-solving. With a dark background and a light photo of me to draw in the user's eye. I will bold my short intro and the rest will be a thin typography.

2. What I do: Clearly articulate your services and offerings. Make sure visitors can quickly understand the value you bring. I also had another section with more info in my prototype above. I may cut or shorten this to keep it more engaging and I will bold all the services I can provide with expertise.

3. Social bar: Placing the social bar early is a good choice. It allows visitors to connect with you on various platforms and adds a social proof element.

4. My mission statement: This is a good way to communicate your purpose and values. Keep it concise and impactful. “GOAL: Transforming Ideas into Reality: A Blend of Art and Design” I may update this to involve the word expertise. Something like “where art and design meet research and expertise.”

5. CTA (Call to action): Placing CTAs strategically throughout your website is essential. The placement after the mission statement is logical.

6. Short bio - focused on the work I want to do: Make it clear how your background aligns with your current focus. Highlight relevant experience and skills. Limiting this bio to 2-3 scrolls will be hard for sure, and I am grateful that is not today’s task.

7. Testimonies: Including testimonies is a great way to build trust. Ensure they are prominently displayed, and consider updating them regularly.

8. CTA: Another well-placed CTA. Making it easy for visitors to contact you is crucial.

9. Main portfolio: Starting with your main portfolio is a good move. It showcases your recent and higher-income projects, immediately demonstrating your capabilities.

10. Technology and Digital Scribing: Clearly outlining your expertise in these areas is important. Consider using visuals to showcase your work. I have 20 or so examples for this section

11. CTA: Reiterating the importance of making it easy for visitors to reach out. Including UX guidelines is a nice touch. Maybe make the button almost full width so no matter how people hold their device they can click it easily

12. Resume: Break down your career story into digestible sections. Ensure it's engaging and clearly communicates your journey.

13. When we do contract work - Services, Process, Values: Providing transparency on your process and values is excellent. It helps potential clients understand what to expect.

14. Artistic Portfolio: Organizing your artistic portfolio by medium is a good approach. Setting goals for the coming years is a positive way to show your commitment to growth.

15. Footer: Including links to your shop and blog in the footer is a good practice. It provides easy navigation for visitors.

16. CTA and Social bar: Repeating a CTA and social bar in the footer is a good way to ensure visitors have access to these elements regardless of where they are on the page.

Overall, your structure seems well-balanced, with a good mix of personal and professional information. It's essential to ensure that each section is visually appealing, easy to navigate, and provides the information your potential clients are looking for. Additionally, consider optimizing your website for mobile responsiveness to provide a seamless experience across devices.

Thanks chatGPT  - Not a bad start.

Wrap-up

In wrapping up this blog post, Last week I made substantial strides in building my Next.js website and getting it live on Vercel. This week I delved into the crucial aspects of design and content organization.

The meticulous planning might seem mundane. However, it is important to break down my content into meaningful sections, select my emphasis, and ensure a mobile-first approach to design. As I navigated through defining my identity, services, and portfolio, I sought the insights of ChatGPT, adding a dynamic layer to my content creation process.

The guidance provided by ChatGPT emphasizes the importance of concise and engaging sections, clear articulation of services, strategic placement of CTAs, and the significance of transparency in displaying my process and values. This feedback aligns with my goal of creating a visually appealing, easy-to-navigate website that instills trust and showcases my expertise.

As I move forward with the implementation of these insights, I am excited about the prospect of delivering a website that not only reflects my professional journey but also invites visitors to explore and connect. Stay tuned for more updates on this exhilarating journey of rebuilding and refining my online presence.

Heather