First-Generation Personal Website

When planning a website, deciding what each page should contain is crucial.

The links between pages affect the folder structure and how their relative paths need to be written.

You also need a basic idea of the page content. At the very least, consider which parts might need JavaScript that you should prepare separately and insert later.

There is also the question of how many components need to be drawn in Illustrator and what reference material you will need to find.

When requesting a quote from a web-design vendor, though, you would usually prepare color mockups that look very close to the finished static pages. They make the plan easier to understand and discuss.

In my case, it was a personal site that I would use myself, with no third party involved. I did not need to draw a finished mockup just to show myself. If something did not look right while I was building it, making a change was easy enough.

With a WordPress site, the focus tends to be on functionality and a simpler style, so most of the page is white, with only a few colors as accents.

WordPress also comes with more constraints. Getting everything to look the way you want can require a lot of CSS, which defeats some of the convenience of using WordPress in the first place.

There was also very little room for me to change the JavaScript, so I was less inclined to plan the colors around those interactions.

A hand-coded website, on the other hand, gives you a great deal of flexibility and room to design. When I first planned this site, choosing the colors and theme actually took the most thought.

Which comes first: the colors or the theme? I chose the colors first.

Since I do not really have an instinct for color combinations, I usually start by looking for inspiration on Color Hunt.

The site has plenty of palettes contributed by other people. I usually pick around five that I like before deciding what overall theme I want for the website.

With those options in mind, I thought about the things I liked. For weather, that would be cloudy or rainy days. I also wanted some plants on the site.

So the final direction was basically “something related to rainy days,” along with images connected to the articles and little creatures or objects I liked. Something like that... I think?

We would see how it went. Yes, another decision made that way. Worst case, I could always redesign the site later! RRR!

Those colors alone looked a little plain, though. I brought them into Illustrator and used the HSB color model to adjust hue, saturation, and brightness, creating two additional sets of corresponding colors.

As long as I did not change the hue too much, adjusting saturation and brightness produced new combinations that still looked harmonious with the originals.

For someone as hopeless at color combinations as I am, this was a very useful procedure. I learned it from a Hahow web-design course. Honestly, that course taught me so much!

I actually started thinking about the logo a little earlier than the website.

When I was about to start streaming on Twitch, I felt it was time to present “Wakame” as a proper public-facing brand, which meant having an initial logo. I began designing it a little over a month before building the site.

Designing a website does not normally mean designing its logo too, but a logo’s colors are tied to the public image of a business, and that affects the site’s overall palette.

So when a client already has a particular logo, I would recommend starting with colors close to that logo when choosing the website palette.

Because this was a personal brand, I used the Chinese characters in “Wakame” as the starting point for the logo.

To keep it close to the website’s palette, I chose similar colors for the visual identity.

Naturally, I took the lazy route and used exactly the same colors.

As for the concept, wakame means the seaweed used in Japanese cooking. Although I originally chose the name because wakame green is the birthday color for January 31, I used the word itself as the starting point for the design.

I love miso soup, and wakame is seaweed, so I thought of Japanese tableware and a bowl of miso soup. Replacing parts of the characters with those shapes gave me the logo.

Was it really that casual? Yes.

I remember a friend looking at my logo for the first time and asking, “Are you sure people won’t think you sell Japanese food?”

I confidently replied, “Maybe I’ll open a Japanese restaurant as a side business someday. This is planning ahead!”

When I design around a particular object, I usually look online for an appealing image to adapt and redraw. If it is still too complicated, I sketch it with paper and pencil, scan it, and build the image in Illustrator.

Redrawing reference images let me bring them closer to my website’s style. I also saw it as a way to sidestep questions about whether those images could be used commercially.

Designed with HTML, CSS, and JavaScript

You might ask: does that really count as a feature?

Of course it does! It proves I have at least some coding ability. Just kidding.

More seriously, as I said earlier, going back to plain HTML, CSS, and JavaScript lets me create many of the effects I want with greater flexibility.

If I want to change a layout, I can simply type the code. I do not need to keep searching a manual to find the right setting for a feature.

On the other hand, this approach is very unfriendly to beginners, and the functionality you can build is limited if you cannot connect a back-end database.

But as I said, I am the site’s only administrator, and it is mainly a place to publish articles. It does not need anything terribly complicated. XD.

After studying web design for more than a year, I might as well use what I learned, right? Wink.

Making the Components and Illustrations Myself

There are plenty of stock-image sites offering material for commercial use. For icons, there is Flaticon; for larger images, there are Unsplash and Freepik. They are very convenient.

Large images are usually fine. For example, the opening images on my articles came from Unsplash images available for commercial use. But using free libraries for icons or small illustrations brought another problem.

What kind of problem?

The first is inconsistent line weight. If the icons I like come from sets with different stroke widths, placing them together on the same site can look extremely awkward.

When designing the site, I therefore found reference icons I liked, adjusted their style and line weight to match the site, and redrew them.

Not every social platform’s logo is square. Using the original logos as they were could also feel inconsistent, so after thinking it over, I decided redrawing them was a little better.

The other problem with outside image libraries is the difference in style.

This site leaned toward illustrations built from blocks of color. Dropping in a hand-drawn image or an ink painting would feel rather strange, wouldn’t it?

So I redrew the components in Illustrator myself: the little child in a raincoat, the wind chime, the bushes, and even the illustration at the lower-right corner of each article.

It was a lot of work, but at least the whole site had a consistent style.

I inevitably use online images as references when designing or drawing. XDDD. I am not skilled enough yet to do everything without them, but I hope I can eventually draw straight in Illustrator without needing references.

Using Bootstrap 4.0 to Simplify the Code

Writing responsive layouts entirely with CSS and JavaScript can be a real chore. Certain features, such as this site’s fixed navigation bar, are especially troublesome to build from scratch.

Bootstrap is rather like a library of ready-made styles. Once it is included in a site, you can create complex layouts largely by writing HTML.

It lets you make an attractive, professional-looking website with HTML while leaving room for CSS customization. That is why I use Bootstrap as a foundation: it saves me from writing so many basic styles myself.

Of course, using someone else’s CSS means constantly checking the documentation to find the feature you need. You also have to understand Bootstrap’s basic grid system.

Still, compared with writing all the responsive CSS from scratch, I am perfectly happy to spend more time reading the manual. XDDDDD.

You might ask: wasn’t version 5.0 already out? Why was I still using 4.0?

Because I was too lazy to learn the new version. Sob. I would move on to it when I had the time and energy. Orz.

Adding Small Interactions with JavaScript

Because the site is mainly for articles, there is not much room for extra interaction inside an article page. Too much would interrupt the reading.

So I put the small interactive JavaScript features only on the home page and the Work category page.

I originally wanted to make SVG water ripples to go with the illustrations, but on reflection they did not seem to fit the site’s overall style, so I dropped the idea. Orz.

The first small interaction is the child watching the umbrella on the home page.

CodePen: The Child Reaching for the Umbrella

The basic idea is to keep an umbrella image next to the cursor. A child is displayed using different images depending on the cursor’s position, so the overall effect looks as though the child is watching the umbrella.

The second interaction uses category icons that change when you hover over them and change to another image when you click.

CodePen: Icons That Change on Hover and Click

Of course, I drew the icons myself too. The difference is that these began as hand-drawn designs. XDD.

CSS Effects

This site does not use much CSS animation. One effect I spent quite a while thinking about—and eventually found a reasonably good solution for—was the darkening effect when hovering over items on the Web Design and Drawing collection pages.

I spent a long time thinking about this animation. At first, I tried darkening the image with a filter, but the filter also affected the text on top, turning the white lettering gray.

Figuring out how to apply the filter without darkening the text took quite a bit of thought.

The eventual solution was to put the background and filter effect in each element’s ::before pseudo-element, then leave the text in an ordinary div. That avoided the problem.

It looked rather clever, but I only remembered the technique after going back through my web-course notes. Orz. I had never been particularly comfortable with pseudo-elements while learning them, so failing to think of this immediately was probably predictable.

I chose Cloudways for hosting and bought the domain through Gandi.

A personal brand website is relatively small compared with many other kinds of site, so price can be a priority when choosing hosting. For something with more functionality, such as online courses or a shopping cart, I would consider a higher-tier hosting plan.

At the time, I was taking another WordPress course that offered discounts for both Cloudways and Gandi, which is why I chose those two services.

Cloudways allowed multiple websites on the same server, which was useful for beginners who wanted more practice. Its administration interface was also relatively friendly and easy to get started with.

Gandi provided a mailbox tied to the domain, which was convenient as a work email address for my personal brand.

Should I add Google Analytics tracking code? Absolutely! Once I had learned how to use GA, I made sure the code was in every website I built.

Because this was simply an article site, I did not need conversion-tracking code. A shame, really. XD. It felt like having all these skills and nowhere to use them.

I was not running ads for the site—perhaps I might someday—but seeing which search terms brought it up in search engines was important.

Whenever I updated the site, I logged into Google Search Console to see which keywords it appeared for and whether there were topics I should write more about.

Google Analytics tracking was essential too. Besides page views, I could see where visitors came from, which devices they used, and what they did on each page. That helped me decide whether the website needed adjustments.

Sharp-eyed readers will notice that the screenshots show the website for my own personal brand, Wakame.

What better way to open my web-design portfolio than with this very first website? Probably. XD?

A personal brand site needs fewer features than a shopping site or online-course platform. Its front-end and back-end integration requirements are modest, so plain HTML, CSS, and a little JavaScript are enough.

That is why I did not build it with WordPress. I used HTML, CSS, and a little JavaScript instead, taking the opportunity to sharpen my basic coding skills.

Leaving aside the time spent gradually adding more content later, the initial process—from opening CodePen and designing the basic components and images to putting the site on a server—took about a week.

Filling in the articles afterward was what really took time. Orz. The overall structure was comparatively straightforward.

The main purpose of this site was to organize things I had learned and thought about, with room for everyday notes as well.

Rather than simply a blog, what I originally imagined was something like a portfolio plus a notebook.

After all that time studying web design, this personal brand website was the first one I actually put on a server and brought online.

I could not yet tell what impact the articles might have, but at the very least I had created a platform of my own where I could write my own things.

The HTML, CSS, and JavaScript involved were relatively simple, but getting from zero knowledge to building a site like this took about a year!

By the end, it felt less like launching a website and more like presenting a graduation project. XD.