Posts Tagged ‘design’
December 3rd, 2009
Everyone these days knows that creating any user interface should start with a mockup. Whether it’s something drawn on a piece of paper or almost designed in Photoshop. When speaking about application UI, software like Borland Delphi or Microsoft Visual Basic would be just fine, especially if you need to create some simple click events. The web though is slightly different, and creating mockups with online web applications is way cooler (and faster too) than VB.
Take a look at Mockflow. It’s driven by Adobe Flash, the interface is sweet, but meh.. You have to pay if you’d like to use it for more than 4 slides. And here’s an alternative that comes to rescue – Mockingbird! Totally awesome, free of charge, javascript driven, no limitations. Here’s something I managed to do based on my previous post. It took me about 1 minute and 50 seconds, sweet huh?
By the way there’s also an option to share you mockup. Both in Mockflow and Mockingbird, so you wouldn’t have to print screen your slides like I did ;)
October 21st, 2009
Browsing the Internet, reading Twitter streams, RSS feeds… I see billions of websites everyday (kidding) and there’s lots of stuff out there that inspires me everyday, so I’ve decided to run a new series called “Inspired” where I’ll post the most interesting stuff I come across (monthly, weekly, yearly, I don’t know yet, maybe I’ll close this down the very next day ;)
This is my first post in this series and I called it Web Design Showcase for October 2009. Since we’re talking about web design and design in general, I’ll keep this running in a gallery format, perhaps with a few comments for each entry (but not necessarily). I would also appreciate if you (the readers) would post a few links of something nice that you came across during the last few weeks, months, and perhaps you’ll make an entry for my next episode. But please, no offence, this is not a CSS gallery or anything, it’s stuff that I pick depending on personal tastes.
If you would like to visit any of the above websites just Google their names – they should come up eventually. I wouldn’t like to stuff the post with useless links and adverts ;) And yeah, the gallery looks terrific on Lightbox! Poor people that go blind searching for the “next” and “previous” buttons on Thickbox ;)
August 7th, 2009
My brand new creation: The Foller.me Theme for WordPress and I ain’t releasing it public ;)
August 4th, 2009
This is my first “Powered by Delicious” post, but I plan on writing similar posts at least once a month or so, depending how many links I bookmark. Here’s a list of some of my latest delicious bookmarks, with goodies on web design, coding, html5, photoshop, javascript and a bunch of other stuff.
March 2nd, 2009
Greets. If you never did a WordPress theme before, then this post is for you. As you may already know, I released my very first wordpress theme a couple of weeks ago and it’s the one you’re looking at right now (unless you’re reading this from last year’s archive). I can’t say it was very easy developing it, but I noted down some tips that would make the process quicker for you whenever you decide to create one yourself.
From Concept to WordPress Theme
- Get yourself some paper and a pencil and start sketching. You may skip this, but you’ll regret it!.. Unless you’re a photoshop genius, master of disaster, creator of a devil..
- Imagine your theme while you sketch – not about the look, but about how it will work. You must keep in mind the menu, posts, posts headers, meta, content. You may also try to imagine the sidebar along with some widgets and don’t forget about the footer – don’t make it too complicated (and yes, you should include a “wordpress driven” link – it rocks!).
- Think about your future theme. If your posts and pages and main post-roll look alike, you are ready to draw your sketches on computer (photoshop or whatever). If they don’t then I suggest you sketch your other pages on paper. If your main page is done it shouldn’t take much time.
- Ready? So your theme’s on computer now and you’re ready to slice it…? No, you’re not. You wouldn’t want your mates to tell ya “it’s okay, but it could have been better” right? Feedback! Feedback! More and more feedback! Upload your drawing somewhere and post it around asking for comments, likes and dislikes. Don’t listen to everybody though, only those who you agree with (there are tonnes of pseudo-designers out there who’d like to spoil your work). Make changes, ask for more. Make sure you don’t get into an infinite loop, two or three times is quite enough.
- Coding time! This is the step where you want to slice your theme into one (or two) XHTML file (don’t forget about the CSS stylesheet). Don’t mix this up with wordpressizing. This is the time where you can make some final minor changes. Now, put on your sunglasses and get ready to rumble! 8)
- WordPress. Wha?! Okay, take off your sunglasses, I was joking… I hope you’ve got a local webserver up and running with a copy of wordpress installed with the default theme. If you don’t, stop right here. Go get some XAMPP Web Servers package for Windows or install Apache, PHP and MySQL on Linux, then setup WordPress on your machine, cause working with a remote server through FTP WILL be a pain in the ass. Done? Fine, make a copy of the Default wordpress theme into a new directory and start editing it file by file: style.css, header.php, index.php, sidebar.php, footer.php, post.php, comments.php, page.php, … That’s the order I like. Hope you got my idea…
- So you didn’t get my idea…? Remember the XHTML file you have? Split it up into four parts: the header, the footer, the sidebar and the content and fill in your wordpress files. Remember that you have to use the WordPress Template Tags, so keep your WordPress Codex nearby.
- Polish. Widgetize. Promote.
The last step is all about debugging. Install some plugins, see how they work (or don’t), make corrections – that’s called polishing. Mine were almost all in the CSS stylesheet, mainly for youtube videos, image alignment, etc. Once your theme is complete, show off! Write about it, tell your friends, post into galleries, submit on CSS galleries (if you think it’s good enough). I’m not saying that you should make the theme available for free download (I didn’t! Yet..), no, just post screenshots or live previews. Get more and more feedback comments that generate new ideas. You’ll be ready for version 2 development in no time. Once version 2 is up and running, you can publicize your first theme, making your second one exclusive!
