[Portfolio] soul log

soul log was an interesting project for me. It demanded a childish feel, but I didn’t want to use Comic Sans throughout the design. I wanted it to be modern yet fun at the same time. I wanted the design to be usable, to have flourishes throughout the design, and to lay a heavy focus on the content.

The design used many design techniques, required a bit of Photoshopping, and made me think quite a bit on some parts. It was a great project, and I was happy to launch into it.

Any inspiration?

Actually, this time around, there wasn’t that much inspiration involved, unlike previous websites where there have been a heavy bias on certain techniques. This website has heavy biases on the ripped notebook paper / handwritten feel, but there wasn’t a certain website I designed it based on.

It was important during the designing of the website that I heavily leaned toward legibility, content, yet a childish play on school life. It was a literature blog written by a twelve year old (me) and I wanted it to have that look. That look.

Technical flourishes? Plenty.

The designing of the website included a ripped paper background, always stuck to the left. I originally planned on a fixed background, but some older machines would render those slowly, and it also didn’t have enough feel of scrolling down, so I opted to have it repeat.

One problem is that the background is 100px wide and can’t be overlapped. Any overlapping makes words to the left illegible. Therefore, I had to devise a way so that once screen size was reduced to a certain level, it would scroll so that words wouldn’t be overlapped.

To do that, I float: righted the container inside a larger container. The inner container was 850px wide, and the outer one was 950px wide. This way, when squished, it would leave 100px for the image.

The search box also displays some text but hides when you click to begin a search. There are also more other small features that make the code outstanding, such as commented code for confusing areas, separating general areas of code, and others.

Is this your first WordPress theme?

No, actually, it’s not. My first one was Brandon Wang, version 4 which required a blog area. That one I would say counted as half a theme, because all I did was adapt the blog to the rest of the website.

Interesting header…

I made the header with Adobe Photoshop. There was a royalty-free stock image over at stock.xchng. For the side, I took a bit of the bottom and cut a little strip of it. From there, I patched both ends up so that they fit together.

That was probably the most interesting part. The other interesting part was the text “soul log”. That is hand-drawn by me. I experimented with many designs before settling on that design because of its playfulness.

This approves with all the standards, right?

Of course… hopefully. I have made every measure to make sure that the website designs are XHTML and CSS valid. However, due to user’s own input as well as mistakes, no designers can guarantee this.

If you ever meet a designer, please don’t criticize them on their valid-ness. I have seen many websites who have errors although they proclaim to be invalid. This is most likely caused by third-party code such as status messages, Javascript, and others.

So what’s next?

I don’t know at all. This is to me a great design, and I love it. It took me around seven hours or less to complete. I built it off of existing frameworks to speed up processes, but overall it really in my opinion was a great theme.

Let me know if you have any questions.