New Paulymath.com Blog Redesign Launched
A couple of days ago I finally got the new Paulymath.com blog redesign launched. Since I know some of you read my Blog via an RSS reader you may not have seen the new design.
In this post I want to talk about the process I went through to get this re-design done from concept to fruition.
The Concept
The inspiration for my new design came from many different sources. As a first step, I sat down and brainstormed the elements that I wanted to include in my new design and here’s a few things I came up with:
Clean and Organized Layout
I wanted to have the ability to place elements in specific spots in the layout and split test for effectiveness. This means that the theme would have to be created / coded in such a way so as to allow me to make changes by having access to the theme designer on an hourly basis.
Fun and Friendly Mascot / Header Design
I wanted a very fun and friendly mascot design that would instantly set the tone for people who arrive on my site. My previous mascot design had me sitting at my desk at home, with my bookshelves full of books behind me and my dog Kobe sitting at my side.
In this design I wanted to take things outdoors to create a different, more relaxed mood which I think will totally connect with my target market. Also, I wanted to incorporate my new puppy Zoe into the design since she was missing from the old one.
Featured Posts
With this theme I also wanted the ability to be able to highlight some of my featured content essentially keeping it “above the fold” instead of it automatically being pushed down as new blog posts are posted.
Scannable Blog Post Excerpts
Since Paulymath.com is a multi-topic Blog, I wanted to give my readers the option of being able to quickly scan through my latest posts to see which ones they’re interested in without having to scroll through pages an pages of posts that might not resonate with them.
More Colorful Color Scheme
My previous Blog design was a very high-contrast design which I really liked but as many of you will remember, it was very RED. Everything about it was red. I like red as a color, but after staring at it for so many years I wanted something that incorporated more colors.
Part of the thinking that went into my mascot / header design was that I wanted to incorporate every basic color into the design in a natural way. That way I could pull any color from the header into my actual theme design and it would still match.
The Process
The process of creating this new theme was split up into three main parts. The mascot design, the theme design, and the theme coding.
The Mascot Design
For the mascot design, I once again hired Lucas Savelli from ArtGen.us. I consider Lucas to be one of the top mascot artists in the world, which is why I hired him again on this project.
In a future post, I am going to detail the design process I went through with Lucas and you’ll see how he was able to turn some chicken-scratch sketches I did as a concept into the amazing piece of art-work he completed.
The Theme Design
Once I had the mascot design under way and being worked on by Lucas, I started working on my theme design. I started off by creating a Photoshop file with screen capture clippings from all kinds of different blog designs I found on the Internet.
I essentially knew how I wanted my theme to function and the elements which I wanted in the theme, and I went looking for the best way to incorporate each element.
For example, I knew I wanted a featured post slider at the top of my theme, so I went looking at a whole bunch of blog designs with all different kinds of featured content sliders and I cut and pasted them into my Photoshop file.
I then went looking for the best way to incorporate my banner advertising, and my search box, and my social media buttons, footer etc.
Of course I used my previous theme as a baseline and only changed that which I felt needed changing.
After hours of surfing, cutting and pasting, I had something that looked like a ransom note in Photoshop. A whole bunch of dis-jointed pieces from hundreds of different Blog designs all overlaid on top of my previous blog design.
Once I had this messy, ransom note looking theme concept mock-up I went looking for a theme designer who could take all the elements and make them look good and cohesive as part of one theme.
It was late on a Thursday night that I had the mock-up done, and I wanted to keep the momentum on the project going so I hired an outsource worker in India at around 2am in the morning to start working on my theme design while I slept. My late night is their daytime so it worked perfectly.
I sent him the project file I had come up with so far, explained the color scheme I wanted and how I wanted the layout done. Once everything was passed on to him I went to sleep.
In the morning I woke up to see the first draft of the design.
Even though the initial design elements were starting to be in place, I saw that the color scheme was nothing like what I asked for and frankly it looked horrible. The colors he used resembled a green and purple eggplant. I couldn’t figure out why on earth he would use purple and green in the design when I specifically told him the colors I wanted.
I had the designer send me the work file so that I could work on it myself while his work day was finished, and the idea was that I was going to pass the file back to him the next day to keep working on it.
I mainly just wanted to go in and change some of the colors on the layers so that I could see what my site would look like with the colors I liked.
When he sent me the file though, I was rather shocked to see that the layout design wasn’t created and split up into layers from scratch. The designer had simply taken my instructions and what I wanted in a theme design and had screen captured someone else’s site that closely resembled some of the elements that I wanted.
I had specifically instructed him to create the theme from scratch and not to copy anyone else out there. If I wanted someone to just copy/paste someone else’s theme I could have done that myself. The whole point of hiring a professional designer was that I wanted an original theme, unlike anyone else’s and designed from the ground up with every layer properly separated in Photoshop for easy CSS / WordPress Theme coding later on.
This person clearly had a different idea in his mind so I paid him for the hours he worked on the theme, and terminated his contract right away. This is something I learned from John Reese’s Outsource Force course. He talks about the importance of hiring fast, testing people quickly, and firing even faster. If done properly, outsourcing is an amazing way to get things done, but you have to be really careful because there are a lot of lazy people out there who do not follow what I would consider sound business practices.
A bit frustrated with the situation I decided to work on the design myself for a while, as I also waited for new job applicants to apply for my theme re-design posting.
After about four or five hours of working on the theme though, I actually realized that it wasn’t that hard for me to design the theme myself. I already had all the elements figured out – meaning no thinking was required – so it was just pure design work that was needed.
I’ve done graphics design on and off for the last 15 years and am very familiar with Photoshop so it wasn’t that hard for me to do the design myself. I decided to just finish it on my own.
The Theme Coding
For the theme coding I knew I couldn’t do this myself so I would need to find a reliable theme coder. This time I spent a lot more time checking out the qualifications of the person who I was going to hire.
I decided to hire a WordPress theme designer from India named Hitesh, but this time I went with a person on the top end of the hourly rate scale instead of the bottom end. His hourly rates were +$20/h but I wanted someone who was good and who knew exactly what I wanted and who was familiar with WordPress theme design. Hitesh fit the qualifications so I decided to give him a try.
Once I had my Photoshop theme design fine completed I sent it off to Hitesh for slicing and CSS coding. Hitesh originally estimated about 15hours of work for the theme design conversion work, and in the end we ended up somewhere closer to about 25 hours but most of that was due to changes that I made to the initial design once it was already started.
Overall I’m very happy with the work that Hitesh did on the theme, and I will very likely use him again shortly for some WordPress plugins I’ve been thinking of developing.
Completion
The hardest part about getting a project like this completed is the last 10%. Meaning, the theme coding was 90% done weeks ago but we were working out the details of the final 10% in the last two weeks.
The same thing with the mascot design. Most of it was done weeks ago, but there were a lot of small details that I had to work out with Lucas. I was way more picky this time with my mascot design because there were many more elements in this design and I knew exactly what I wanted and how I wanted it to look. Sometimes it’s not easy to imagine what something is going to look like until it is actually done and only then do you realize that changes need to be made.
Ultimately I wanted to get the theme launched and done, so even though there are still a bunch of small glitches and fixes I need to make in the coming weeks the theme is about 98% of the way that I want it so I figured it would be best to get it launched.
I will be writing a more detailed post specifically for the mascot redesign process, as I want to show you guys how Lucas was able to create what you see today from the crappy little chicken-scratch design I did. When you see my original design concept you’ll laugh because it’s so crappy.
Feedback?
So what do you guys think of the new design?
There are still some tweaks I need to make such as creating more appropriate thumbnails for each of the blog posts on the home page so they don’t look so much like banner ads, but I’d love to hear your feedback based on what you see so far.
Comments:
Leave a Reply
Search
Lijit SearchServices
Fitness
Warhammer 40k
Blog Sponsors
Top Commentators
Categories
- Affiliate Marketing (40)
- Announcements (28)
- Better Blog Tips (7)
- Blog (403)
- Blogging (74)
- Contests and Competitions (27)
- Featured (28)
- Fitness Articles (7)
- Fun & Relaxation (15)
- Health & Fitness (17)
- Healthy Recipes (11)
- Intention & Manifestation (47)
- Intuition (10)
- Make Money Online (145)
- Maqui Berry (1)
- meditation (4)
- Mindset (38)
- p90x (60)
- Personal Development (159)
- Progress (31)
- Progress Reports (20)
- Psychic Development (5)
- Psychic Protection (2)
- Reiki (1)
- Reviews (28)
- Spirit Guides (3)
- Spirituality (8)
- the paulymath show (4)
- Videos (5)
- Warhammer 40k (2)
- Wealth & Money (82)
Paul Piotrowski is a highly ambitious and passionate self-improvement fanatic who has spent over 13 years relentlessly pursuing and studying personal development wisdom in almost every area of life. His highly intuitive drive to seek wisdom and truth in life has led him through very diverse areas of experience ranging from entrepreneurship and business, natural [...]
Copyright 2007-2010 Paulymath.com - All Rights Reserved - [ Home | Disclaimer | Privacy Policy ]
good job!
best wishes
Did you end up seeing Dr. Vitale in Poland?
I didn’t yet
Joe is to big for me
first I must clean myself
sorry for English
btw. I read about you in joe’s book “expect miracles”
good job, realy
you are an angel
God bless you
stay in peace
Hi Paul,
Your new design looks great!
Love the header. Very engaging.
Brad Paul´s last blog ..FREE Self Improvement Resources Guru Habitscom
Thanks Brad. Lucas is an amazing artist. Wait until you see my post where I show you the chicken – scratch drawing I drew for him as a starting point. You’ll laugh.
Paul, that will be interesting to see.
That will be interesting to see Paul. I’ve heard his name for few times and really curious how good he is. Care to post on this blog about him?
Regards,
Gary
Absolutely love it! and I’m sure other readers will like it as well. The puppies look great and the scene is gorgeous, from the campfire to the waterfall. Impeccable work!
Glad you like it. I totally love it too. I was so excited to see this project come to fruition at each step.
Thanks for this info Paul. I will shortly be in the situation of hiring a WP coder. What is your impression of Phillipino coders?
Same as any other. As I mentioned in the article – Hire Fast, Test, and Fire Even Faster.
Seriously, you need to create a very specific and detailed plan of instructions of what you want accomplished and then hire someone who is capable of doing the work properly. The right workers will be great and you’ll love working with them, but you should be prepared to encounter a few crappy coders until you find the right one.
Give them a $20 task and see how they do. Don’t start with a $1,000 project.
I hate to say it, but this is the first time I am on your blog in a loooong time and don’t remember what the old design looked like.
But, I can tell you that it is very clean and I love the header
Carl´s last blog ..Are you Subscribed to ClickNewz Yet
It’s ok Carl. Not important. The new one is better.
thank you
for email about social media
i love you
please forgive me
I looks nice and fun. Why PM on the t-shirt and not PP?
Evan´s last blog ..Time to Move
PM = Paulymath. I may remove the text anyways though… still thinking about it.
Love the new cartoon design in the header.
Some things which need addressed:
Header
* You need to move some of the pages listed in the nav menu. Due to the number of pages listed they are breaking to the next line. I would suggest moving pages like testimonials, archives and recommended to the sidebar under a heading of ‘info’ or something like that.
* I’d personally remove the ‘Make Money Online with Paulymath.com’ from the header and move the cartoon image to the top so that the nav divides the cartoon and the content. Though others may like the way it is just now
Sidebar
* You should reduce the size of the blog sponsors box until you sell all of the advertising spots. Currently there’s a lot of white space in one of the most viewed areas of your site.
* The top posts widget should be aligned to the center of the box with a margin placed at the top. Currently the widget overlaps the box.
Footer
* I’d replace the mybloglog widget with a facebook fan page widget. Mybloglog isn’t used much anymore whilst Facebook is being used by pretty much everybody who uses the web.
Kevin
Kevin Muldoon´s last blog ..Chris Pearson VS Matt Mullenweg
Great tips Kevin. I’m going to need to look at the site with different browsers. I don’t see what you’re seeing with the menu bar. On my screen the menu doesn’t break to the next line. Are you viewing the site with the “Zoom” function enabled in your browser? Which browser are you using?
Blog sponsors box has whitespace? 7 out of 8 spots are filled. Are you by any chance seeing the word “OIOPublisher” in there?
Good call on the MyBlogLog Widget.
I’m seeing the same issues re the menu bar & blog sponsors box that Kevin mentioned (using Safari). I’m only seeing 2 sponsor ads in the box.
cheers
Yes I tested in Safari and saw the the same problems. It’s on my list of things to fix.
Thanks!
-Paul
looks Good Paul
Rich artichoker´s last blog ..How to Buy the Right shoe for you
I like the idea of a clean design, and overall it has a clean and organized layout. But in my opinion your site is still quite busy and could be cleaner. As someone above mentioned, it does not render quite right in some browsers.
I like the social media links, I think those are very important to have in visible locations ( you gave them excellent real estate at the top right corner ).
My last criticism would be the mascot/header. It is extremely busy – there are frogs, dogs, mashmallows, trees, waterfalls, books, mountains, cellphones and a laptop. Why so much stuff? I would prefer a simple clean logo rather than a painting.
Just my opinion.
I like the new design looks good.
Stocks on Wall Street´s last blog ..Goldman Sachs- The True Winners in the SEC Case
Hi Paul,
I really like the new design. I’ve been following this blog for quite a while now and I must say that your site really improved a lot.
Kind regards,
Gary
Tough deal on the first Indian you hired to do your work for you, but at least you showed good character by paying him for the work hours that he had done. I know I’ve seen some people not pay after the work was not done to the person’s liking, taking advantage of the country gaps, and that’s just messed up.
As far as the theme, it looks very good, the only thing that bother’s me is the fact that the navigation menu is above the banner. To me, it almost makes the navigation menu appear blind to me. I guess it is because I am use to the navigation menu being below the banner on most blogs. But thats just me…
Till then,
Jean
used tires´s last blog ..Places to buy used tires
I’ll keep that in mind. I might actually put the menu at the bottom
I was debating which way to do it…we’ll see…
Menu has been moved to the bottom. It looks way better.
-Paul
Ohhh sweet move Paul, looks like I had an influence on something
woohooo
Till then,
Jean
Great new design, I like it a lot. I also like the art at the top. Its very nicely done.
The thing I noticed most wasthe load time…it takes a lot longer to load and well…If I have to wait too long, I wont bother staying usually.
girlstartup´s last blog ..Blog Direction
I’m still going to work on load time. I don’t believe it is the design that’s slower, but rather some of the scripts I may be running, such as for the ads etc. I’ll be working on that soon.
Sorry man but I hate it. I really hate blog designs such as John Chow’s where you can’t immediately start reading the latest post without having to click further. I also think the top header is too big and a waste of space, and the right sidebar too wide which takes up even more space.
And, to be honest, I really don’t like the quality design of the header either. I mean, it’s decent, but it seriously does look rather awkward to me. The books, laptop, and phones look good, but the rest just looks strange to me.
Your social media buttons are nice, but I really hate the front page and think that the header and sidebar take up too much room.
My main criticism mostly lies in the front page… I just really really really hate that magazine/summary style. Make your home/index page what you currently have at /blog and relieve my stress. I’m working on fixing my comment button so you fix this. It’s only fair.
Yeah, I know you hate magazine style Blog designs. However, there is a purpose to them and honestly all you have to do is just bookmark “http://www.paulymath.com/blog” instead of “http://www.paulymath.com” and you still get instant access to my latest Blog posts just like before without having to click on each post.
The purpose of having a magazine style design is for people to be able to quickly see the latest posts at a glance and click on the ones that interest them to read further. On a multi-topic Blog like this one I think that will provide a lot of value once people get used to the initial change in design. Like I said above, you still have the option of seeing my latest Blog posts in full just by bookmarking my “/blog” page – and it only takes 2 seconds to update that bookmark. Of course if your read my site via RSS reader that’s not an issue, but I know in your case you prefer to read from the site itself.
Also, even though I know you don’t like the magazine style design and the Blog being a “/blog” menu tab, there is a reason why the top Blogs on the Internet utilize them (JohnChow.com, ProBlogger.net, StevePavlina.com etc.) They offer people 2 choices – (1) See the latest Blog posts at a glance on the home page, or (2) See the full Blog post in traditional Blog format on the /Blog page. It allows the reader to choose which they prefer.
The wide sidebar is the same as it was in my previous design. I think it only seems wide to you because you’re used to your 3 column design with the 2 narrow sidebars on the LEFT / RIGHT, whereas my design is a 2 column design. I don’t think my sidebar takes up any more room than your right and left sidebars combined… maybe a few pixels, but not much.
As far as the header is concerned, I think it kicks ass. I think Lucas did a really good job on it. I don’t think it’s too big at all… your top header takes up just as much space, except on yours you plastered a big giant banner up top. Instead of having a big giant banner up top promoting someone else’s brand, I chose instead to utilize the real estate for my header. Nothing wrong with having a banner there, it’s just not what I wanted for my design.
Just for the record, you think your TylerCruz.com design is the best out there and is pretty much perfect, right?
It’s funny how we’re all biased towards our own designs, and we think everyone else’s designs are inferior.
Think of it this way though — if I made my site design just like yours with the 3 columns, banner near the top etc, you’d be bloody pissed saying that I copied your design. You were already pointing out that my mascot was wearing blue jeans and a red shirt just like yours, even though my mascot has always worn blue jeans and a red shirt even in the previous design.
Face it, as a fellow blogger you’ll never be happy with my design or John Chows or anyone else’s, because if the design is different from yours you don’t like it because it’s different, but if the design was identical to yours you’d be screaming that we copied you.
Love the redesign. I think the new layout really works well.
Thanks. I like it too.
Impressive. Kudos to your designer. He must have been working this seriously. More importantly, usability is much easier and less cluttered now.