A local restaurant incorporates brackets into their logo, as well as on their website.

Brackets have even been used in my own designs, such as this nav menu for Shear Image.

A collection of brackets turned sideways and displayed as typographic mustaches.

A colorful graphic pattern made entirely of curly brackets.

These brackets go beyond the screen and make a fashion statement as earrings.

Is there a design trend you think needs critiquing? Have a question about an element or style you’ve seen repeated over and over? Send an email to ESpontarelli@GetCreativeWebDesign.com.

Today I will be highlighting two new sites: Plastic Surgery Associates and Central Virginia Neurosurgery. Both of these projects were in collaboration with Bill and Susan at Dayrich Enterprises, as well as their designer Stan.

First up is Plastic Surgery, which went live this summer. The site is a big improvement on their older site (as witnessed here), and includes a lot of updated information in addition to the updated look. The site was built in Flash and has an overall soothing look to it. Each page fades in when loaded, which adds to the serenity of the design. The neutral background and text colors are highlighted by numerous bright, high quality photos.

The site contains a lot of text and photo content for viewers and potential patients. Each of the procedures offered by Plastic Surgery Associates is described in detail, and a Before & After photo gallery shows real results from real patients. Biographies of each physician as well as detailed payment information and a contact form are also available.

Next up is Central Virginia Neurosurgery, a site that was completed in December. CV Neuro was formerly a part of Centra Health and has recently become an independent practice. To commemorate their independence, we put together a new website for the company. The royal combination of blue and gold gives the design a feeling of maturity and reliability. It was important to the client that they be pictured on the site, to show that they are personally invested in their clients. The design is a balance of professionalism and personalization, to reflect the mission of the company it represents. This website was also built in Flash, and was completed with the cooperation of Dayrich Enterprises.

Visit each of these sites today to see more of the design and execution of each website. Click here to visit Plastic Surgery, and here for CV Neuro.

The List: Jan. 6th Edition

From clients…

New website up for Central Virginia Neurosurgery. More details coming soon in the form of a Client Profile, but in the mean time check it out!

Visitors at Club Infuzion are getting a shout out on their website, with photos on the new Patrons page.

Vance Barber’s podcast Ear Candy has a new studio and a new blog! Check it out for some musical goodness.

From the internets…

I love it when I understand nerd humor. xkcd is always good for a geeky laugh…and bravo for 1000 comics!

Speaking of nerdy, this website delights both the reader and organizer in me: Bookshelf Porn

And to fill your obligatory cute-baby-animal-photos quota: The Top Ten Cutest Photos of 2011

Random favorites…

I ordered these pretty glasses with a gift certificate from the holidays. Love them!

My personal New Year’s Resolution #1: Make the bed every day. So far, so good.

My personal New Year’s Resolution #2: Grow things. Right now, that includes paperwhites and cat grass in the living room bay window.

Have a suggestion for The List? Let me know via email: ESpontarelli@GetCreativeWebDesign.com

The Vintage Junkie is a local business in Lynchburg, VA featuring the artistic talents of Amy Calandra. The Vintage Junkie boasts a gorgeous collection of re-purposed vintage jewelry and accessories, and is Amy’s second business venture. (We are currently discussing a new look for her first company’s website, Light of Mine Designs, as well.) Working with a fellow artist on this project was a nice change from some of my more business-oriented clients; Amy’s input certainly influenced the creative design of the site. Click through to see how this artistic collaboration turned out!

Amy came to me with a vision for a “shabby-chic” website with a “vintage, faded feel” to it. The soft colors and textured background contribute to the look that Amy had in mind. The header font was Amy’s choice directly: an eclectic display font that mimics the construction of her whimsical jewelry. Many of the graphics in the header of the page are original creations, while some are stock illustrations that I altered significantly to fit the personality of the site. Photos of Amy’s jewelry are placed throughout the site, providing both colorful visual interest and a preview of items available for sale. Behind the scenes, The Vintage Junkie is setup with a Content Management System that allows Amy to quickly and easily update the text and photo content of each page.

The main aspect of this website is the online store, where vintage pieces are available for purchase. The site is hosted on a secure server for accepting online payments and includes an integrated e-commerce storefront where products are sorted and sold by category. Above is a sampling from the section of Necklaces, where the subtly textured background of the main content areas of the site can be seen in better detail. For ease of use, the store is maintained and updated by the owner and each product can be customized down to the last detail, including weight, photo, description and quantity in stock. This detailed management allows for smooth transactions for shoppers and accurate inventorying for the owner.

Like what you see? Stop by our online website portfolio for more samples of or work. Or, visit The Vintage Junkie Shop and get some of that holiday shopping done early!

In the past we’ve discussed maintaining your business while on vacation, but what about taking your work on the road? I spent last week away from my physical office, but without taking time off. With some advanced planning and the right tools, working away from home can be a rewarding and enjoyable experience.

The opportunity for travel recently presented itself in the form of a business conference that my husband was attending in Toronto, Canada. We had spent a day in Toronto a few years ago, during a visit to Niagara Falls, but were otherwise unfamiliar with the city. Coincidentally, I had been debating over the purchase of a laptop and this chance for weekday travel pushed me over the edge. I purchased an HP ProBook 4530s from Newegg, along with an 8G Kingston Flash Drive. Both items were a good value; I read many reviews and visited my local Best Buy store to see a couple laptop models in action before deciding on the HP ProBook. Without turning this post into a laptop review, I will say that I have been really pleased with the computer and its performance in the month and a half that I’ve had it.

My laptop is, not surprisingly, the most crucial piece of equipment for allowing me to work away from home. My smart phone isn’t that smart; beyond checking emails and a little web surfing my Blackberry has limited functionality for running a business. What did surprise me is the number of other items I found necessary to take with me for away-from-the-office productivity. I did a few test runs at nearby coffee shops and came up with the following list of essentials.

Travel Checklist
- Laptop with charger
- Mouse, keyboard, headphones (optional)
- Flash drive with current client files
- Phone with charger
- Client billing sheet
- Blank and unpaid invoices
- Stamps, mailing labels, envelopes
- Current client notes and paper folder
- Portfolio or notebook with pens
- Camera with accessories
- Business cards
- Travel documents (Passport, itinerary, etc.)

The above consists of a few categories of business tools: equipment, office supplies, client documents, and miscellany. The equipment is pretty straight forward- remembering chargers, batteries, memory cards and accessories is the important detail that will keep your equipment running smoothly and let you work with ease. Office supplies include the obvious writing tools, as well as the necessary paperwork for billing and/or answering clients’ billing questions. Although I didn’t need them in Toronto, having mailing items available could potentially save the hassle and extra dollars spent at an unfamiliar Post Office. Client documents include both electronic and paper documents. ‘Current’ clients refers to any projects that I am actively working on or clients that are likely to contact me while away. If going away for a longer period I would have taken all client records with me, but for just a week it was unnecessary. I should also note that I had remote access to my desktop computer, which was such a great convenience. Finally, I was sure to bring business cards (as always), and any ID or documents needed for traveling.

As important as the tools you take with you are the conditions that will meet you when you arrive; be sure to research your accommodations and the location you are traveling to as much as possible to avoid any unwanted surprises. A proper desk, plenty of electrical outlets (that fit your cords!), internet access, phone reception, etc. are each crucial for a proper work environment. Be aware of any additional costs that you will encounter (roaming charges, money exchange rates and fees, bank or credit card fees) if traveling outside of the country.

Since I use a number of high-end design programs in my work, this had the potential to be a tricky (or pricey) situation when away from my desk. I handled this obstacle by downloading Open Source text editor, photo, and graphics software that would work in place of my Adobe products in a pinch (Notepad++, GIMP, and Inkscape, specifically). The real convenience, as I mentioned above, was being able to access my office computer with Remote Desktop Connection. There was a slight lag in the connection, but being able to utilize all of my software, not to mention the better internet access and increased RAM, was such a help while I was away.

I leave you with those tips and the wish for safe and happy travels! If you are lucky enough to have a job with some flexibility, do take advantage of opportunities to see the world and experience other cultures while you get your work done. Questions or have a travel tip of your own? Let me know in the comments.

The List: Sept. 30th Edition

From clients…

-With football season in full swing, these adorable tailgate accessories from Shear Image are hard to resist

-Looking for a job in Richmond? The Halligan Bar is holding a job fair for positions at their new location this weekend

-The People’s Blues of Richmond are playing tonight in Savannah, GA, and Saturday at the HOGTOBER BBQ Festival in Richmond

-Global Explorers is undergoing a website makeover, preview available here

On the internets…

-Wall Climbing Kitty is hilarious, but that can’t be good for the wall

-This soup from Smitten Kitchen is genius: French Onion meets Tomato Soup, be still my heart

-While a little outdated now, this episode of This American Life offers an eye-opening look at the downfall of the economy

-The results are in: view the stats unveiled by this year’s Freelance Industry Report at Freelance Switch

-The new Kindle is out and it looks lovely. I am in love with my Kindle Keyboard

Random favorites…

-I have been exploring the coffee shops of Toronto; Timothy’s Apple Chai Latte is my new seasonal beverage of choice

-Remote Desktop Connection has been a lifesaver and a blessing while working from out of town

-Having someone make my bed is worth the hassle of planning my morning around the cleaning lady’s ever-changing schedule

-I got creative outside the office last week, making these wedding-themed corn hole boards (and bags) for a friend

Have a suggestion for The List? Let me know via email: ESpontarelli@GetCreativeWebDesign.com

Using HTML and CSS3, Flexbox allows for a flexible (hence the name) layout that is easily adjusted based on content. You choose whether you want the items in your layout box to be arranged vertically or horizontally, and then give each box a numerical size. The size is relative to the other boxes, and will adjust automatically to fill the width or height of your layout. See below for an example of three horizontally alligned boxes with sizes of 2, 1 and 3, respectively.

At this time Flexbox is still fairly experimental and is only working consistently in webkit browsers. To learn more and create your own flexible layouts, visit the Flexbox Playground. There you will find visual examples of Flexbox as well as the CSS code that makes it all happen.

As I hinted at last week previously, I have a great resource for background patterns to share with you. The simple program for creating backgrounds at BGPatterns.com has become one of my favorite tools lately. The possibilities are endless, with results ranging from sleek and polished to grungy vintage. Read on to see details and more examples of this great resource.

Creator Sergii Iavorskyi describes BGPatterns.com as “a tiny web app for making background patterns in a few clicks.” With an easy-to-use interface, this tool allows you to choose the color(s), design, texture, scale and more of your background pattern. Properties like opacity, location and rotation are also available for even further customization. As you tweak your design it is displayed to the right of the control panel; you then have the options of previewing your design in the background of the site, and downloading the pattern for use in your own projects.

The next time you’re designing a background pattern or need some inspiration, have some productive fun at BGPatterns.com. Have a great weekend!

Whoops! I’ve been a little sidetracked working on some awesome new projects for clients (details about that one and more coming soon), and have neglected to follow up on the blog posts I promised you here. The wait is over, and today I’m going to share with you my favorite new CSS Photo Gallery. It is super simple, very lightweight (CSS + HTML only), easy to implement, and customizable, too.  With credentials like that, how could it not be great? Read on for the source and some helpful tips and examples.

Officially called the Hoverbox Image Gallery, this great tool for displaying photos is the work of Nathan Smith. He describes the gallery “like a mini Lightbox“, without the use of any JavaScript or Flash. The gallery has a pop-up feature that relies on the CSS property a:hover and uses relative and absolute positioning. With less than 100 lines of well-written CSS, this gallery runs smoothly and is cross-browser compatible. To see a live example of the original gallery, click here.

Once you’ve inserted the CSS and HTML code into your site, customizing the gallery is quick and easy. Colors, borders, padding and image size are the main properties that you could change without difficulty. To see my customized version of the gallery, visit Emily Shaffer’s portfolio. I love not having to bother with PHP or JavaScript and still having the ability to display thumbnail and full-size images with style.

To use this gallery on your website, be sure to check out the Hoverbox Image Gallery download page. For questions or help with customization, feel free to contact me.

Emily Shaffer is a fabulous up-and-coming actress in New York City, and the girlfriend of GetCreative friend and client Vance Barber. I’ve known Emily for a couple of years now and always enjoy hanging out with her and Vance. I was flattered when Emily came to me last month for website help, and excited to get started! She is such a talented actress with a great sense of style and an eye for design. I found that working together was really fun and easy, I hope Emily would agree. Read on to see the design and execution of Emily’s awesome new website.

Emily’s primary concern for this website was getting her presence out on the web in a way that really represented her as an artist. She first described her taste to me as “hippy western eclectic earthy artsy”, which sounds like a tall order. In reality I enjoyed the opportunity to work with a client with a softer, more artistic outlook. One of the best parts of my job is the wide range of clients and the many types of work I get to create for them. In fulfilling Emily’s aesthetic I knew immediately that I wanted to tackle ‘hippy’ and ‘western’ with a subtle but effective textured background pattern. Using one of my favorite background resources, I came up with a few variations until we decided on the beige and tan pattern pictured above.

The fonts used for this project were key in pulling the design together. While the two header fonts are very different from each other, they both lend themselves well to a modern design with definite antique tones. The rough serif typewriter font with the clean and skinny sans-serif had just the right ‘eclectic’ feel to it. I used Font Squirrel’s @font-face kit to make these decorative fonts web safe for all to enjoy. From there the teal and orange color palate was selected to tie in an ‘earthy’ feel.

As for ‘artsy’, I think we would have been hard pressed to avoid ‘artsy’ with Emily’s talent on display. The main photo collage is a selection of Emily’s photography work, and glimpses into her acting career are abundant throughout the site. The Look and Play pages showcase Emily in action, from headshots to sound bites.  The Create page in particular showcases Emily’s artistic talents in baking and sewing.

An element of this website that I am most pleased with is the fully CSS photo gallery on the Look page. As seen above, the gallery has a hover feature that enlarges each photo. When clicked, the image becomes full size for even closer examination. The gallery is so light weight and cross-browser compatible, making it a winner in my book.

Be sure to check out Emily’s portfolio to see her impressive range of talents, as well as my first foray into the “hippy western eclectic earthy artsy” realm of web design. See the live site here: www.EmilyShaffer.me

Psst: Stay tuned next week for a closer look at the CSS Hover Gallery, as well as the source of my favorite background pattern maker.