A guest post by Amanda Aitken from Better Than Chocolate Web Design
Let’s kick this off with an unequivocal truth: creative people rule.
Yep - there are a lot of VERY good things about being a creative person. We have boundless imagination, we’re always coming up with cool ideas, and let’s be honest – we’re pretty fun to be around!
But despite all the warm and fuzzy stuff, creativity has its challenges. And the #1 not-so-great thing has to do with frustration: the frustration of having an amazing vision you don’t know how to execute in a particular medium. Often because of a pesky technical hurdle that rudely insists on getting in the way.
One such hurdle, my friends, is web design – and specifically, coding. Picture this: you’re at your favorite cafe (the one that serves the amazing Turkish Delight), scrawling in a notebook. The topic of your private brainstorm session? That blog you’ve been yearning to start. The one about lollipops, that you envision being all decked out in the perfect shades of transluscent blue, orange, and pink.
You know exactly how you want it to look. You’ve daydreamed it a million times. And when you think about how it would be laid out, about the different layers of texture it would have, and about the curly-yet-modern font you’ll use for your post titles, you feel your heart go pitter-patter.
But an insistent question keeps crowding its way into your mind: “How the heck am I going to bring my vision to life without knowing how to code?”
So you think about hiring a web designer/developer, but you’re a little unsure. After all – when you’re a creative person, you see things so clearly in your mind’s eye – and what are the chances a designer would ever be able to fully grasp (and execute!) the wonderfulness of your idea?
Plus, you’ve got this nagging feeling tugging at your divinely creative brain: deep down, you really just want to DIY!
If only you knew how to turn your vision into a website. If only you had the tools to make it happen. It couldn’t be THAT hard, could it?
Well, I do suggest you learn to code (my online course, The Girl’s Guide to Web Design, will help you out in that department), but who’s up for a little instant gratification in the meantime?
If you’re raising your hand right now, you’ll be happy to know there are some tricks that you can use this very instant to create a site that will make your soul smile. Master these techniques now, and you’ll be poised to do truly great things once you’ve wrapped your head around the whole coding issue.
So without further ado, here are my top 4 quickie tips to help artsy gals get a gorgeous site - no web designer required!
quickie tip #1: acquaint yourself with Pixlr
Aside from not knowing how to code HTML and CSS, one of the biggest roadblocks associated with web design is that whole “but I don’t have Photoshop” thing.
Here’s a workaround you’re going to love: Pixlr! It’s a surprisingly powerful, FREE online image editing utility that works very much like Photoshop does.
All you do is go to http://pixlr.com and choose the “open photo editor” option. You can either create an image from scratch or open up files you have saved on your computer. Try out the impressive suite of editing tools, add text (in any font you have installed), and sample all the fun effects. There are plenty of Pixlr tutorials available online, so go ahead and have fun playing.
quickie tip #2: conjure up some header image magic
A good place to start on your Pixlr exploration is to create a stunning header image – also known as a “banner” – for your blog or site. Your header image is the biggest piece of the visual puzzle when it comes to your web presence, and often, replacing a ho-hum header with a true, made-by-you work of art is all you have to do to fall in love with your site all over again.
Check out my can’t-miss tip for creating stunning header images, and then add your creation to your site. Now, doesn’t that feel good? :)
quickie tip #3: suss out your stylesheet
Your stylesheet is the file that holds the CSS code for your site. CSS is responsible for controlling your “look and feel” – from the amount of space and padding around certain design elements to the color of your fonts. So you’ll want to know where yours is – in preparation for your future design triumphs, of course!
The location of your stylesheet will vary depending on what platform you’re using for your blog or site, but here’s a quick breakdown of the most common places to look.
If your site or blog is…
Self-hosted WordPress (NOT wordpress.com): Some themes (especially premium themes like Thesis), allow you direct access to your stylesheet. To edit the stylesheet for non-premium themes, you’ll usually have to access your stylesheet via FTP (my favorite free FTP software is Filezilla). Then you can make changes to it and re-upload it to your web server.
Wordpress.com: You’ll need to have purchased the Custom CSS Upgrade from wordpress.com to be able to edit the stylesheet for your theme.
Blogger: Navigate to your “Template” and look for this bit of code: <style type=”text/css”>
Everything from the start of that line of code down to (and including) </style> is your “stylesheet”. When you’re a little more seasoned, you can make changes and addition to the code found in this area when you want to change the look of your site.
Squarespace: Inside the Style Editor, find the “Custom CSS” tab. That’s where you’ll change existing style rules and add your own.
Tumblr: Here are some instructions for how to find your stylesheet if you have a Tumblr blog.
quickie tip #4: master the art of background images
Background images give you serious bang for your buck. Once you learn how to apply them to different design elements on your site using CSS, you can jazz things up like you wouldn’t believe. In fact, most of your favorite websites probably look so good largely due to a creative use of background images!
For your nascent coding days, however, we’ll focus on adding a large background image to the “body” of your site – kind of like the sweet mint green pattern in the background of this site I designed:
...or the graph paper background on another site I whipped up for a client:
To get a similar effect on your own blog or site, all you need is a) a background image and b) a simple bit of CSS code.
You can use your newfound Pixlr skills to make the background image (it should be about 1500 pixels wide by 1000 pixels wide), or you can source one for free from my favorite spot for amazing, unique digital art and photography: Deviantart! Just be sure you have permission to use the image (check the information under the image to find out if you need to give credit to the artist or photographer).
When you’ve got your background image ready to go, you’ll need to host it on your web server (AKA your web hosting space). Most web hosts have a “file manager” that allow you to upload files pretty easily. If in doubt, call your web host’s technical support line and ask for a little hand-holding on this.
Next, make note of the URL for the background image you just hosted. Depending on what folder you put it in on your web server, the URL (otherwise known as a “file path”) will be something like http://yoursite.com/yourimage.jpg or http://yoursite.com/yourfolder/yourimage.gif.
Then, put this code in your stylesheet:
body {background-image: url('/http://yoursite.com/yourfolder/yourimage.gif');}
…and replace the part in green with the URL for the background image you hosted with your web server.
Finally, save your stylesheet, refresh your site, and admire your handiwork!
quickie tip #4: make yourself a favicon
What’s a favicon, you ask? Why, it’s the adorable little square-shaped icon that you see immediately to the left of the website address at the top of your browser!
Here are some examples that I think are extra-lovely:
Your favicon is like the cherry on top of a lovingly-tweaked site. And making one is easy! Just follow these steps:
1. Create a new image in Pixlr with a size of 64 pixels by 64 pixels (later, we’ll shrink it down to 16 pixels by 16 pixels).
2. Decide what you want to put in your favicon. Remember, not everything is legible at such a tiny size. Good options: a single letter (or possibly two), a miniature photo of your face, or a simple shape.
3. Draw or type the items you want in your favicon, using the colors that strike your fancy.
4. Reduce the size of your image to 16x16 and save the image as a .png.
5. Go to http://www.convertico.com/, upload the image, and click CONVERT. You’ll be given a download link for your icon (save it to your computer).
6. Place it on your site. Different site and blogging platforms have different methods of doing this, so give it a Google to find instructions.
7. Enjoy the look of your ultra-cute favicon!
I hope these ideas whet your appetite for the stuff that dreams are made of: a site or blog that’s totally, utterly YOU. If you use these ideas to tide yourself over while you’re busy learning to code, you’ll be that much closer to a web presence that sings.
Speaking of which, I want to help one of you get exactly that. I’m giving away a free spot in The Girl’s Guide to Web Design, which kicks off on September 26, to a lucky Heartmade reader!
The winner will join a bunch of super creative ladies who are learning to ditch their fear of code, unleash their inner designer and create an awe-inspiring WordPress blog or site. And the best part: it’s all going to be completely non-intimidating - with a solid dose of fun thrown in!
Here’s what to do for your chance to nab the free spot in the course:
1. Sign up to the Girl’s Guide to Web Design newsletter.
3. Send out two tweets: 1) a tweet that tells us about your uniquely beautiful vision for your blog or site and 2) one of
the pre-written tweets below (make sure you include the @GG2WD part so that we can keep track of your entries).
Pre-written tweets for you to choose from:
Finally, a coding course for creative chicks! Learning web design never looked so non-intimidating: http://girlsguidetowebdesign.com @GG2WD
Ditch your fear of code, unleash your inner designer and create an awe-inspiring blog or site with @GG2WD! Visit http://girlsguidetowebdesign.com
Just stumbled across @GG2WD – an 8-week online course that teaches you to design a gorgeous site or blog! http://girlsguidetowebdesign.com #GG2WD
For every pair of tweets you send out, you’ll get one entry into the giveaway draw.
But wait – there’s more! A second winner will get a 30-minute Website Therapy session with me. If you’re feeling lost and confused about your site or blog and need someone to lend an ear and just make you feel BETTER about this whole “online” thing, then Website Therapy might be exactly what you need. :)
the fine print
Entries must be in by Friday, September 23 at midnight. We’ll randomly select the winners over the weekend and notify them immediately.
Good luck, Heartmaders! Your future blog or site is waiting! :)
xo,
Amanda Aitken
Amanda is the founder of Better Than Chocolate Web Design, an unconventional web studio based on a kooky idea she had a few years ago. She's truly passionate about giving creative women (the kind who know deep down they have a great eye and a knack for all things visual) the knowledge and tools they need to bring their genius ideas to life on a computer screen. If you want to know more about Amanda follow her tweets a @amandaaitken.
