ADRIATASTIC! 6th Revamp

adriatasticv6_mobile

ADRIATASTIC! Mobile Version (Responsive Design)

Yesterday (it’s past midnight already), I was able to do a major revamp on my personal blog/site. I still have yet to do a whole lot more work in this one,1 but overall, I think that I’ve done a decent job. I wanted to give it a fresher, calming look as the old gray one looked rather cluttered. Maybe for some people that the design of this new theme is a little less “sophisticated” than the first one, however many of the well-designed sites that I’ve seen so far have gone a whole lot cleaner and simpler looking than the ones in the past. Besides, the colors schemes are pleasing to the eye anyway, and the text are readable, so that should count the most. Plus this is for a personal project anyway. Of course if this were a professional project done for someone else, I would have done what the owner of the site would want in their design. For this one, this is all me.

I haven’t done website reviews since forever, so I want to do a little breakdown on what I’ve done with the new theme. This includes the tools I used, the sources I’ve used, and everything else. Maybe it would help every aspiring designer find their ideas and inspiration should they ever want to create their own blogs or make a major revamp on their existing blogs. Regardless, I’m still a complete noob with the WordPress template system even though I have been using WP since the early-mid 2000s. In addition, many of the professional web designers and developers have been developing their own WP themes based on pre-made layouts and simply tweaked them using their own designs. At the moment, the image that you are seeing on the left right now is actually how my blog looks like when viewed through a smartphone. In this case, it’s my HTC One X Android 4.1 phone. We’ll have to seriously thank the responsive web design method for making this theme responsive to any resolution and any device.

The Tools

  • Adobe Photoshop CS2
  • Artisteer 4
  • Notepad++
  • WordPress
  • Google Fonts

I’m a straight-out old school aspiring developer who is pretty much penniless right now and still have to use the old CS2 version of Adobe Photoshop to create and manipulate a few graphics used for the theme. Artisteer 4 now has more features, more layout choices, more leeway to enter custom HTML or CSS without using the pre-built features, and of course, supports responsive web design while keeping the generated code adhering to standards. I seriously need this program simply because of my lack of expertise with the WP templating system but I’m now able to add in my own custom specifications without using the site’s pre-built features. I use Notepad++ in case I need of doing minor changes and alterations that Artisteer doesn’t have, and the awesome thing about Artisteer 4 is that they include Google Fonts automatically. With all that, export it as a WP template and good to go.

There’s still a lot of (professional) designers who look down on WYSIWYG programs, especially with Artisteer, but I believe that Artisteer can be an effective software for every designer if they are used wisely and correctly.

Typography

I think nowadays, one of the newest “trends” that are now applicable and focused more often in today’s design trends are none other than typography. Thanks to CSS3 for making any font usable in websites and no longer stick to the “default fonts” (Arial, Times New Roman, Verdana, etc.), we can make our designs and themes more beautiful without the over-usage and the overload of images. The only images I used in this theme are the background image and the Skipop dingbat font of the little girl next to the title. The rest are simply pure CSS32 and fonts. The title header of the site and the subheader underneath and the menu items are all pure fonts with CSS3 effects, such as the white shadow. The menu is also made by CSS3.

Responsive Web Design

Artisteer 4 now has an option on making your site responsive, so it saves you time from creating another alternative design/theme specifically for mobile devices. It’s a really awesome feature to add to accommodate all users and all devices.

And that’s it about my new blog theme. Now I can start building more themes for my other sites and hopefully as freebies one day.

Digg ThisShare via email
Submit to redditSubmit to StumbleUponShare on Tumblr3 but overall, I think that I've done" data-image="http://adrimarie.us/wp-content/uploads/2013/06/adriatasticv6_mobile-168x300.jpg" data-button="none"> Share
  1. more towards the content and the layout of the widgets []
  2. through Artisteer 4 []
  3. more towards the content and the layout of the widgets []

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url=""> <img src="" alt="" class="" width="" height="">

http://adrimarie.us/stuff/adri_smilies/icon_smile.gif 
http://adrimarie.us/stuff/adri_smilies/icon_sad.gif 
http://adrimarie.us/stuff/adri_smilies/icon_biggrin.gif 
http://adrimarie.us/stuff/adri_smilies/icon_confused.gif 
http://adrimarie.us/stuff/adri_smilies/icon_cool.gif 
http://adrimarie.us/stuff/adri_smilies/icon_cry.gif 
http://adrimarie.us/stuff/adri_smilies/icon_eek.gif 
http://adrimarie.us/stuff/adri_smilies/icon_evil.gif 
http://adrimarie.us/stuff/adri_smilies/icon_exclaim.gif 
http://adrimarie.us/stuff/adri_smilies/icon_halo.gif 
http://adrimarie.us/stuff/adri_smilies/icon_heart.gif 
http://adrimarie.us/stuff/adri_smilies/icon_kiss.gif 
http://adrimarie.us/stuff/adri_smilies/icon_mad.gif 
http://adrimarie.us/stuff/adri_smilies/icon_money.gif 
http://adrimarie.us/stuff/adri_smilies/icon_mrgreen.gif 
http://adrimarie.us/stuff/adri_smilies/icon_neutral.gif 
http://adrimarie.us/stuff/adri_smilies/icon_question.gif 
http://adrimarie.us/stuff/adri_smilies/icon_razz.gif 
http://adrimarie.us/stuff/adri_smilies/icon_redface.gif 
http://adrimarie.us/stuff/adri_smilies/icon_rolleyes.gif 
http://adrimarie.us/stuff/adri_smilies/icon_surprised.gif 
http://adrimarie.us/stuff/adri_smilies/icon_twisted.gif 
http://adrimarie.us/stuff/adri_smilies/icon_vangry.gif 
http://adrimarie.us/stuff/adri_smilies/icon_wink.gif