Tools of the Trade

by Amanda on January 26, 2011 · 6 comments

in Biznez,Design,Development

Also known as: the software/hardware I use to make violetminded Design go. Tara Gentile totally inspired me to do this, so you should go and read her list of tools, too.

Contrary to popular belief, investment in Macbook Pro or equivalent Apple hardware does not a designer make. So, y’know, keep in mind that I’m a PC-based designer. Why? Background in computer science, lovelies.

Web Development & Graphics

Adobe Creative Suite 4: hell of an investment for web designers and developers. But, instead of me having to purchase solutions separately (or use less-than-lovely freeware), the bundle is the way to go. I use Dreamweaver for all of my WordPress development; Photoshop for everything from typography projects to website mockups; and InDesign for all of my print designs. Be cautioned, though. This is a hefty investment.

Time Management

Freckle: it’s a great way for me to keep track of how I’m spending my hours working on client projects. By tagging and categorizing work and projects, I’m always on the up-and-up of where my hours are going. If I’m hired on an hourly basis (for Upkeep), I can export reports to send off to clients to show them where all the hours went.

Invoicing & Bookkeeping

Freshbooks*: international friendly with its support for Canadian businesses. They even wrote in support for the new HST tax laws that came into effect last July for British Columbia. With Freshbooks, you can automate your invoices, keep track of inventory, assign projects to team members, input expenses for bookkeeping, and even automate late-payment reminders for clients/customers. Honestly, this piece of awesome just keeps getting better.

File Management

Dropbox*: How do I love thee, let me count the ways. I pay $9.99 a month for 50GB of space that syncs with each of my computers. It allows me to access client files no matter where I am. It’s automatically backed up by their servers, instead of me having to schedule manual backups for each computer. And, on top of that, Dropbox allows me to share folders with clients so we can collaborate without having to use email.

Writing

I have several programs that I use for writing. If I’m writing for the web, I prefer to use QuietWrite (similar to Mac-friendly Ommwriter). If I’m writing fiction, I prefer Q10 (there’s something satisfying about my keyboard emitting typewriter noises in the app).

Twitter

There’s this groovy little studio that hangs out around here in Vancouver that made an equally groovy application for Twitter. It’s called HootSuite. It’s a powerful web-based app that allows you to follow conversations in threads, update multiple accounts at once (including Facebook), and schedule your tweets.

Communication

Client contact is almost exclusively done using Skype. I’ve got a couple of Skype accounts to make sure that I keep my business and private lives separate.

For instant messaging, I use Raptr. Wait, stay with me now. Raptr is a service for gamers that helps us link up all of our gaming accounts and share the games we’re playing with our friends. It turned out that the IM program is insanely handy for chatting with MSN, AIM, GTalk, and Yahoo accounts. Not for everyone, of course, but it suits me fine. Another suggestion is to try out Digsby, if you’ve got a lot of contacts from a lot of IM providers.

For keeping in touch on the go, I’ve got an iPhone 3G. Mostly, it’s used for checking email, Twitter, and texts; occasionally, I’ll bust out a game to play but isn’t that why I have a Nintendo DS? It’s a decent little smartphone (leaps and bounds better than my old BlackBerry Curve). I’ll be happy when the 4G is fixed so I can invest in one o’ those.

Wireframes

Balsamiq Wireframes: this is a brand new application for me. I only invested it in a couple of weeks ago but since then, I’ve enjoy every moment of it. Balsamiq makes wireframing less irritating. Instead of me having to fiddle with Photoshop to make wireframes, I can use Balsamiq’s built-in graphics. When I’m done, I can export the entirety of my wireframe project into a single PDF to send off to a client. For $79, it’s a damn good deal.

Recording Skype Calls

Pamela Call Recorder: useful for when I need to record calls I make on Skype. It’s PC friendly and only costs $29.99 to get the full version.

Email Marketing

Mailchimp may be the new kid on the block but it’s a damn fine platform. I use this for all of my email marketing and RSS subscriptions for both Nerdy Vernacular and violetminded Design. Its pricing is more than reasonable; you can either pay-as-you-go or pay monthly, depending on how large your list is and how often you’re sending. Or, if you’re just getting started, you can use their free plan, which is still pretty robust.

My laptop

HP Pavillion DV6-2138CA: although it has a very limited graphic chipset, this is an excellent system. The only problem I’ve had is with the damn battery but upgrading to the 12-Cell is a way to fix that right off the bat. Hell, I’ve even used this system to play StarCraft 2 from start to finish.

What about you?

What do you use to make your business/life go? Tell me in the comments!

{ 6 comments }

I’ve been debating whether or not to write this post for ages rather than just putting it in the FAQ. What I seem to be getting from people lately is this: if the design is minimalist, then it didn’t take very long to craft it. Therefore, minimalist web design must be the cheapest option, right?

Wrong.

I can’t begin to stress to you how very, very wrong this assumption is. So, instead of just throwing minimalist design examples at you and screaming, “SEE?! WE MAKE THIS SHIT BEAUTIFUL!”… I’m going to explain the principles behind my design methodology of choice.

Happy Shiny Design Principles

The first step to understanding why minimalist (and any other kind of design methodology) doesn’t come cheap, is to understand the process behind it. Unless you live and breathe web design every single day of your life like I do, there’s no reason for you to believe that designing for the web is anything other than, “Make it pretty, Scotty.” Before I started to grasp the implications of design, I was in the same boat: aesthetic was the most important thing to consider. If it’s not lovely, what’s the point?

Aesthetic is important. Without a well-crafted aesthetic, you’ve got a muddled, ugmo site that no one will want to come to. In order to create that aesthetic, there has to be an intrinsic understanding of the person or business running the site as well application of actual design principles. You can throw it into Photoshop all you want but if there’s no rationale to back it up, it isn’t going to stand up to criticism.

Design principles guide design decisions; the big and the small. Even those of us that design by intuition (yep, I do that too) should be able to pick our decisions apart and trace them back to a principle of some sort. But what about minimalist web design? It doesn’t have an excess of illustration. The colour palette is simple. Even the design elements look understated.

Exactly.

In order to achieve harmony within a web design, there’s a lot to consider before leaping in and saying, “zomg it’s pretty nao! LOVE IT, OKAY?!”

Balance

Traditionally, balance is in the form of symmetry (formal balance) and asymmetry (informal balance). Formal balance is just as it sounds: the elements within the design have equal visual balance both horizontally and vertically. Informal balance can be achieved through contrast, colour, texture, and shape.

Notice how in the example (courtesy of The Bio Agency), there is informal balance. The large object is offset by smaller objects.

Unity

Unity is all about how the design elements jive with one another. As Curt Zieglar wrote in his article, Less is More:  The Fundamentals of Minimalist Design, “Items that stand out to grab attention on the page need to stand out because you want them to, not because they don’t mesh with the other items on the page.”

With minimalist designs, if just one element is out of place, the whole design can become completely muddled. Which brings us to our next principle: visual hierarchy.

Visual Hierarchy

This fits into the whole discussion of unity and making the design elements jive with one another. With visual hierarchy, the eye should move naturally from one element to the next.

Jan Tschichold (image courtesy of MoMa) was a master of visual hierarchy. As the eye passes over the graphic, it knows exactly where to go next based on typographic weight, size, and colour. That’s visual hierarchy hard at work!

Whitespace

It is a glorious thing, whitespace. It helps designs breathe; it helps spaces feel open and alive. In architecture, whitespace is known as negative space. Negative space is the space between elements. It’s also where the party happens. Without negative space, we’d be unhappy and cramped all the time. Ever wonder why the “open concept kitchen” is such a hit? Oh yeah, you can bet it’s negative space.

Whitespace is arguably the most important principle when designing a website and it’s especially true when going to town, minimalist style. Without enough white space, the design will seem crowded and uncomfortable. Before CSS, we designed with little consider for whitespace. The result was, well, the 90′s-style website.

A List Apart (one of my fav resources on web design) says it far better than I can.

Right, then

As you can see, there’s a lot that goes into a design, be it minimalist or otherwise. There’s research upon research. There’s careful consideration of design principles. Don’t forget about usability and cross-browser compatibility. There’s a lot of intuition thrown in there. There’s collaboration and feedback. It’s iterative. It’s organic and rigidly scientific at the same time.

Web design is hard work, folks, but it’s all kinds of rewarding, especially when everything comes together to (almost magically) create a beautiful, imaginative, and highly usable web presence.

{ 2 comments }

It wasn’t long ago that I was faced with the interesting task of debugging a Thesis site that just would not load the home page in a timely (if ever) manner. The thumbnails wouldn’t load. The teaser images weren’t co-operating. Even the hosting company had no idea what to say about the situation.

Thankfully, the solution is simple, if somewhat unintuitive.

Get your PHP configuration with phpinfo

phpinfo.php is this powerful little tool that you throw together in a text editor. This file will display all of your PHP settings in one place, instead of you having to contact your host (or futz with your web server).

Create a new file with Notepad (or another text editor) and paste in the following text.

<?php phpinfo(); ?>

Save your new file as phpinfo.php and upload it to the root directory of your FTP (usually within public_html). You can view the file by typing in: http://yoursite.com/phpinfo.php

The settings we’re looking for is a pair of boolean switches by the names of allow_url_fopen and allow_url_include. These settings need to be set to off. Under no circumstances does allow_url_include need to be switched on as it presents a host of security issues.

Chances are that allow_url_fopen is set to on and allow_url_include is set to off.

Flip that switch

Locate the php.ini file on your FTP. If you have access to it, download it to a folder on your computer and open it in a text editor. If you don’t have access to it, you’ll have to create one from scratch.

Either locate or create the following line:

allow_url_fopen = off

If you’ve located the line, make sure you change the value from on to off.

Depending on which version of PHP you’re using (check the top of your phpinfo.php file in your browser), you’ll have to save the file as follows:

  • PHP 5 and above: php5.ini
  • Below PHP5: php.ini

Upload the .ini to the root directory (in public_html).

When you refresh your blog’s home page, the teaser images will be fixed!

Questions? Email me!

{ 0 comments }

Choosing a Web Designer is Hard

by Amanda on November 22, 2010 · 3 comments

in Design

With the seemingly endless array of options available for those in need of a web designer, it’s no wonder that people get downright baffled when it comes time to choose. When I first started out, I found the plethora of options to be daunting (and a bit disheartening). But what sets one web designer apart from another doesn’t come down to what kind of options they offer or even how shiny their portfolio is (okay, the last one is slightly more important).

There are a number of things to keep in mind when choosing a web designer that don’t even get into the technicalities of web design itself. If you don’t mesh with your potential designer, things will flop and foible all over the place.

What are your expectations?

Before going off and asking the first web designer you meet what their rates are, you have to be honest with yourself in terms of what your expectations are. Have you already established a budget for your project? If so, what are you expecting to get with it? If not, what kinds of things are you expecting will be covered by the web designer’s project quote. Are you looking for more than just web design? Are you looking for social media coaching? Copywriting? Someone to hold you during the long, cold winter nights?

Well, the last one is probably off limits but the rest of these items are all things you need to consider before going forward. Once you manage your own expectations, it will be much easier to manage the expectations of others.

Do your personalities mesh?

This isn’t frouffy mumbo-jumbo. This is the most important question of all. Hiring someone to tend to the online identity of your company (or personal brand) is a big choice that requires careful thought and consideration. What people don’t tend to think about is how important it is to like the person you’re going to be working with. I’m not talking about just respecting their work. I’m talking about honest-to-goodness hell-to-the-yes-I-like-this-person mojo upon first contact.

If you’re lacking the ersatz equivalent of the zha zha zhu with your designer-to-be, then you two won’t be dating long-term. The best relationships in any kind of design are long-term. They allow for open communication, active collaboration, and iterative problem solving that wouldn’t happen if you didn’t click.

One way to determine if your personalities mesh is to read their website. What’s their style of writing like? If they were to write you an email, would you read it gladly? Or would they irk the hell out of you every time you opened your inbox?

Can you articulate why it is that you want to work with this particular design studio/web designer?

This is another big question. What makes you want to jump and dance for joy when you think of working with this particular design studio/web designer? If you can’t articulate it, why is it? Were you stoked about the price? The portfolio? What can this web designer/design studio give you that no one else can? If you’re not able to pin down the reasoning behind you gunning for this person or people, then re-evaluate, and if necessary, keep looking.

Starting to sound like I’m handing out dating advice, doesn’t it?

Are there or do you foresee any trust issues?

This is huge. Way huge. On top of your personalities not meshing, if there are trust issues from the get-go, this is a doomed endeavour. If you’re expecting your potential designer to run off with heaps of cash and leave you in a heap, then it’s probably time to evaluate why you’re in that place. Did you hear something about said designer from a trusted friend or colleague? Are there red flags coming up everywhere?

Deep breath.

Why?

If there are trust issues at all, then it’s time to find another designer. No ifs, ands, or buts about it. You’ve got to have a rock-solid foundation of trust in any relationship, including the business ones.

Ask questions. Lots of them.

We designers can sometimes have a bad rep. Lots of us like to beat our chests as we design.

“You Jane. Me Tarzan. This website awesome. Why? I say so, that why.”

One-sided dialogue like that is certainly not conducive to a collaborative working relationship (which, in my humble opinion, is key between designers and clients). So, don’t be afraid to ask your potential designer questions. Things like, “Why did you choose that colour palette?”

Me: The colour palette of violetminded was chosen based on a number of reasonings. The lilac colour was heavily influenced by the name of the website. The complementary colours (white, grey, and green) emulate violetminded’s soft, professional demeanour with a touch of whimsy in the playful background.

or “What is the reasoning behind your typography?”

Me: Segoe UI, the typeface used in the body text, is a fluid and dynamic sans-serif that I use in most designs. It’s fresh, modern, and a little playful. Cicle, the typeface used in the headings, echoes the sentiments of Segoe with its fresh, playful modernity (and its quirky question marks).

or “I would love to know why the layout was constructed like this.”

Me: Z-Layout, my good chum, is the entire reasoning behind the layout. Read more about Z-Layouts.

Finally…

Be flexible and open. Research as many designers as you can think of in order to nail down the one that’s going to mesh the best with you. Define and manage your expectations. Engage a designer in conversation. Ask many questions. And, at the end of the day, trust your instincts. If something doesn’t feel right, then it’s probably at least a little wrong.

{ 3 comments }

5 Ways to Make Thesis Gorgeous

by Amanda on August 7, 2010 · 4 comments

in Thesis

Everybody knows that the default Thesis look is… minimalistic and boring. The grey. The white. The boring navigation menu. No colour to be seen anywhere. You might like that about Thesis so you can skip the colour section…

I’ve put together five tips to make Thesis look its best. It’ll be like slipping a fabulously tailored suit on your significant other when all they’ve worn is jeans and t-shirts. Mmm mmm.

Customize The Header

When your header is boring, the rest of your site seems boring. Even the content seems boring. We don’t want that. We want people to come to your Thesis powered site and be wowed by its awesometacularness! So, y’know, change that header out.

All it takes it a couple of lines of code and a little bit of design know-how to pull this one off.

Thankfully, the first installment of Decrypting Thesis CSS is about sprucing up your header (and other kinds of header magic).

(PS. If your design know-how is equivalent to that of a porcupine, you know where to find me.)

Spruce Up the Typography

While everybody loves Georgia, it gets old to see it on site after site after site. Yes, Georgia is gorgeous typeface. Yes, I use it in my own designs. But, like everything else default, it’s got to go.

There are two ways to spruce up the typography in Thesis.

The first way uses the Design Options in the Thesis menu. Choose the typeface that you’d like to use in the Body and Content Area. All of the fonts used in the menu are lovely in their own capacity so if you know nothing about typography, then choose the one that you think suits your site best.

For you advanced Thesis users, you can go in the back door (see what I did there?). By setting the value in custom.css, you’ve allowed yourself to use typefaces that aren’t listed in the Thesis options. If you’re interested in getting really fancy, then you should take advantage of the CSS-3 @font-face. Mezzoblue has an excellent tutorial about how to utilize @font-face for your web designs.

If you’re not into @font-face, then you should definitely change the font-stack in the .custom .body. For some examples of appropriate font-stacks, check out SitePoint.

Pick Your Palette

Now that you’ve gotten yourself a slick header, you need to make the rest of your site match. Mismatching and horribad colour schemes are the way to the Dark Side.

“Fear is the path to the dark side. Fear leads to anger. Anger leads to hate. Hate leads to suffering. Suffering leads to terrible colour choices.” – Amanda Speaking Through Yoda

If you’ve got experience with colour, then choose a palette that has at least four colours (six is best). If you’ve never really worked with a colour wheel, putting colours together can be kind of daunting. So, my suggestion is that you use a tool like Color Schemer. Drift through their colour schemes until you find one that really matches your header.

Now it’s time to put it into action.

Again, like with the typography, there are two ways you can colour your site up. You can do it through the Design Options in the Thesis menu or through custom.css. It’s easiest to do it through the Design Options, and if I learned nothing else from my time in university, it’s that if you can cut corners (and it still works), do it. I know. Shining pinnacle of university educated youth. (wink)

Go through and use this palette to add some pizazz to your default colours. Play with the colours of the links. Play with the colours for your entry headers. Just play, play, play until you find the magic combination that makes the palette dance off the monitor… y’know, in a good way.

Change the Colour of The Navigation Bar

Don’t underestimate the power of a few good colours. Once you’ve got your colour palette together (and have applied it to the rest of your site), it’s time to apply to your navigation bar. This grey doesn’t know how to make a statement. It’s up to you to make it snazzy.

There are a whole host of tutorials on making your navigation bar pretty but if you just want to change the colour, I suggest that you start with the very first navigation tutorial from Decrypting Thesis CSS. It’s called “Navigation Made Simple“. Go forth and make it shine.

Prettify Your Sidebar Headers

.custom .sidebar_list .widget h3 { font-variant: normal; padding:10px; color:#26807e;  letter-spacing:-0.015em; }

I don’t really care for the small-caps on the sidebar; font-variant sets that back to normal, capital case. The default letter-spacing is quite wide so tightening it up a bit is definitely a good idea. If you want to get really fancy, you can add a border to the bottom of the header (dotted looks best).

.custom .sidebar_list .widget h3 { font-variant: normal; padding:10px; color:#26807e;  letter-spacing:-0.015em; border-bottom: 1px dotted #ccc; }

…………………………

Customizing Thesis doesn’t have to be a long and drawn out process if you don’t want it to be. All it takes a little bit of design know-how, patience with learning the code, and a vision of what you want it to look like. Don’t be afraid to experiment. Definitely don’t be afraid of the code.

You can make Thesis bee-you-tee-full.

{ 4 comments }