Over the past weekend, many of you have seen quite a few changes on this site. I can say I’m 100% done redesigning, but there are a few pages and stuff that I need to fill in. However, I’m proud to present to you, the new look and direction for myself.
I’ve always wanted to just blog without any restrictions or worrying about being grammatically correct or having visuals. I wanted to blog about my day, blog about something I’ve seen or experienced, or talk about a topic that came up in my life. However, at the same time, I also wanted to really have a nice looking blog that can show off tutorials, resources, inspiration in a very simple and minimalistic style so that others can have another reason to visit my site. When I first began blogging, I thought going minimalistic was my style. However, it was quite odd for me to always write down the sites that are very heavily designed with lots of graphics and unique layouts to use as inspiration.
So how can I accomplish both?
Sometimes, the solution to a problem, is to just simply go both ways. I could not find any balance between my two state of minds. As a result, I’ve designed a certain look for my personal blog, and I’ve designed a certain look for the design section of my site. Normally, I’m not a big fan of doing that, but I’ve made the decision to stick with it and do it. Who cares what people think. I’m paying for my site’s domain, my host, my living…I can do whatever I want right?
So that’s the premise to my new outlook on my site. Personal, yet a source of knowledge to other designers alike.
For those thinking of redesigning, it’s actually more thoughtful than you may think. It’s not a matter of just making a new layout and then just coding. You have plenty of things to worry about. What about your old posts? What about your viewers? How about all those images that you’ve cropped just for the old layout? How are you going to organize all the plugins in your layout? How are you going to code it without making a mess?
With those questions in mind, you’re restricted in redesigning your site. That’s why when I started to redesign, I took screenshots of my old blog and used the old content to mockup a similar design, but as you can see I did a little change. I know I wouldn’t be up to re-cropping images, so I definitely had to find some way to keep my image sizes, but make my design more interesting. And so I went with drop shadows and a background to distinguish between posts and also the sidebar. To further add to that focus, I even darkened the shadows of the post when you hover over them.
As for navigation, I went for a more expanded view. I’d figure, if people want to see tutorials, they should just click on tutorials, the same with everything else. The major things you’ll see on this blog are Tutorials, Resources, and Inspiration (and also my journal). So there isn’t really a need for a dropdown showing all the categories that are in this site. If users are looking for anything particular, that’s what search bar is. I want to stick to a true minimalistic design and a laid back user experience. Again, if people are looking for photoshop tutorials, then they can just search for it and find it easy.
Another obstacle in the road is the development and functionality. How is this blog going to function, are there going to be new things implemented? The more features there are, the more development, research, and experiments (including the problems that will appear) there will be. I certainly didn’t want to over extend a simple blog. Of course, I see those other blogs out there with crazy jQuery effects, and sliders. To me, those are things I can certainly add in the future, but it’s not needed. Again, I opted for a simple look and functioning blog.
However, the only change in development that I’ve used was the change in wordpress frameworks. Prior to this design, I’ve used the Themeshaper’s Thematic Framework. Great framework, very flexible, great support and purely nothing wrong with it. I’ve even used it to design Vtension’s site as well and it’s still holding up (besides some minor fixes that I need to apply to it). So why did I change?
When designing or developing, it’s always best to design with a tool that you can use comfortably. Why use Joomla if you can do WordPress? Why use Illustrator if you can use Photoshop? There isn’t really a rule to what you can use to design or develop something. If you’re familiar with something, use that. Don’t spend the extra time to learn something new just because you hear good things about it. (Exclude the fact that sometimes you do have to learn something new if it’s directed in a job to do something in Joomla or use a specific tool, etc..)
So I used my own wordpress framework temporarily named CLE Framework. It’s basically a blank wordpress template with my preferred way of layout, divs, id and class names, and certain functions I like such as dynamic body classes. By using my own framework, I was able to quickly code my layout design in a short period of time without having to do research or running into foreign problems that may exist with another framework.
So how can I implement my design and see how it looks? I had in my mind to just do it on a subdomain, and hope everything looks nice when I activate the theme. However, I thought to myself, there must be a way for me to code my design using my existing content, so that I can see how it looks and adjust certain changes so that my content will fit without it looking messed up.
I’ve come across a plug-in called Theme Switch and it does just that. It allows you to switch themes in an instant and one of the best part of it is…you have the control of who sees it. And so, I made it so that the admin can only see a certain theme, and I was able to see the new theme and code it using my existing content. This saves a lot of time and trouble as I can fix a lot of things to match my content.
By doing this, I’ve found out a huge problem when it came to a certain page template….the Single Post Template. On my old layout, it was designed to contain a bigger image than the thumbnail, which happens to be a 80px difference, which means, the picture was extending way too far out of the Post containing div, and also even crossed over to the sidebar section. So I needed a fix for this, and remember, I didn’t want to re-crop pictures. So luckily the dynamic body classes came to help and I’ve designed the single posts page to have a different look, and function.
As you can see, the post body is bigger to contain the big images, and on the right you’ll have a list of options such as to Share the Post, or see Related Posts. This adds some easy to use navigation and user experience for those viewers that like to share the entry to their friends/followers and also browse for more topics that are related. (By the way, I’m using YARPP to display the Related Posts. Great Plugin and very customizable)
After I got the site to be about 90% done, I decided to let it live. The more I coded the more I just said, “Let’s just do it”. Again, my blog, my site, it’s time to just show it and let it live. If there are mistakes, there are mistakes. (I’m sure Internet Explorer has some major flaws, but I don’t use that browser, and you shouldn’t either). And there you have it. My process to redesigning my site to make it look different yet fit with my old layout. As you can see, I also designed the journal portion to be way different, and it has a different feel to it, which is what I’m aiming for.
Thanks for everyone that’s been patient with me, and thanks to those that motivate me to do this. Special thanks to Vtension for her advice on my designs and as inspiration for me to do this, and as always a great designer herself. I hope everyone enjoy the new outlook and direction, and if there are any feedbacks, suggestions, bugs, errors, feel free to let me know.
If you want to contribute a tutorial, resource, or some inspirational links, just send them through, and we'll get them featured!
Hey, nice entry on Soshified, I agree the site is very unique and I love the design, It kind of has a n’sync no strings attached feel to it, like the girls are just dolls. And I really really like the new journal theme. Very soothing and colorful at the same time. Keep up the good work.