Gabrielle is a freelance graphic designer, animator, photographer and filmmaker who has taken on various projects including creating logos for clients, animating commercials for film festivals, working as a character and background designer and animating music videos for musicians.

Gabrielle's articles

  1. Challenge: The Floppy Disk and the ‘Save’ Icon

    Dear Floppy Disk,

    I’m not sure if you;ve noticed, but some people want you gone. Some still love you and the others, well you haven’t caused a problem yet so you’re still welcomed to stop by every now and again.

    To be honest I don’t know what’s going to happen to you a few years from now. I don’t think anyone does, but if this is one of the last few times we get to talk, I just want to say thank you for saving me time and time again.

    Always Grateful,

    A. User

    2 Disk

    The above letter may sound a little dramatic but for a number of few years now the floppy disk icon has come under fire for being used to encapsulate the idea of ‘saving a file’.

    It has been a discussion point for so many years that we are addressing it once more with the hopes that our readers might provide some insight and even suggestions to this issue.

    While I’m not campaigning to save the floppy disk, I’m certainly not grabbing the nearest pitchfork and torch to march on it either.

    The Floppy Disk Assumption

    The core assumption seems to be that those who are born in the 21st century have no tangible experience with floppy disks, and therefore won’t be able to interpret any meaning from an icon using them.

    While this does make some sense — we know iTunes moved away from using the CD icon for similar reasons — I’m not so quick to assume that those born after the 90’s aren’t smart enough to realize that the floppy disk means ‘save file’.

    The Iconography of the Floppy

    The icon itself is usually a simple blue 3.5 floppy design. For the majority of people who see the icon they readily know that it’s the symbol to “save” or “save as”.

    Whether you like it or not, it’s useful to remember that the floppy disk icon is iconic, and icons — regardless of logic — can often persist for a long time after their initial meaning has receded.

    But let’s be clear on something, I’m not suggesting that because the floppy disk is iconic that it can’t be changed. Things change. That’s inevitable but before you go around changing things we have to look at things on larger scale than just the generation issue.

    [caption id="attachment_85476" align="alignright" width="132"]Light bulb and life buoy Save… file? No.[/caption]

    Currently there doesn’t seem to be any self-evident solution to the floppy disk dilemma. Sure, some have tried novel solutions but, so far, none appear to have been significantly clearer in meaning.

  2. Faking Pro Portraits with your Phone Camera

    Thanks to the addition of cameras in our mobile devices taking photos has become easier than ever. No longer are we forced to struggle through text or an actual phone conversation to describe an object, person or scene.

    With a simple click of a button and the press of the good old trusty “send” button we are only seconds (depending on your service) from sharing what we see. It has also given birth to the popular phenomenon of posting “selfies” online through popular social networks like Instagram.

    While the idea is obnoxious and head scratching to some and the best thing since slice bread to others there is some good to come out of the camera phone. We can now take a photo whenever we want which includes those looking for bio/about us pics.

    For a lot of us with online presence outside of leisure desires, an image or avatar is needed to accompany our profile.

    Unfortunately not all of us can afford to spend hundreds if not thousands of dollars on a DSLR just to get a photo up. Professional photographers are always an option though often budgets may not stretch that far.

    Luckily for most of us are just a couple of tips away from obtaining professional quality headshots with your smartphone and a few household items.

    Keep reading to check out the basic breakdown and practices for better smartphone photos.

    Lighting

    https://www.flickr.com/photos/shakethesky/6799007500

    The difference between a professional photo and an amateur one comes down to the lighting.

    Good lighting practices are absolutely key to achieving an attractive photo but even more so an attractive portrait. Try to remember the last time you tried to take a photo with your phone or even camera and was unhappy with the final outcome.

    Perhaps you needed a comb, an iron or a different facial expression, but I bet you that your lighting was the main culprit that drove you to pressing the delete button as hard and as quick as you could with a resounding “ew”.

    Now lighting may seem like one of those things that require you to enroll in a class to get the gist of it but it really isn’t that hard when you look at the basics. After all you only want a headshot that looks professional and is good enough to represent you. You’re not trying to be the next big photographer so here is what you need to know:

    • You need enough light

    • You need that light in the right areas

    I imagine some of you are grumbling that is far from helpful but stick with me here.

    To clarify “you need enough light” that essentially means that you need to make sure in the situation of your desired portrait that you have enough light on hand so that you can create contrast between yourself and your background.

    “You need that light in the right areas” is essential because having your light positioned in the wrong spot can have you looking blown or washed out. That being said anyone who tells you to take your photo out in the middle of a sunny day is doing you a disservice.

    Any photographer or videographer will tell you to never shoot at high noon and this is with reason.

    The sun is at its highest peak at this point and will cast harsh shadows upon you or your subject. Not to mention the sun is bright which means squinting. If you are shooting outside overcast is ideal or either before or after high noon.

    Here are a few more tips you can add to these basic principles as well to obtain better lighting:

    • Use natural light when you can as it is more flattering no matter your skin color or type due to manmade lights emitting various colors that causes an uneven look.

    • Try shooting next to a window with the lights off or step outside but not in direct sunlight. Look for shade.

    • If you have wrinkles or wish to minimize facial weight e.g. saggy skin then illuminate upwards opposed to downwards. You can achieve this by placing a reflector or even white posterboard in your lap and have a light source to bounce upward off the card to soften facial features.

    • A white posterboard or even car reflector can serve as a fill light for your portrait. You can also take a flat surface and cover it with foil if you have neither.

    • Lamps can be used in lieu of a lighting kit. Just make sure it is placed close enough as it gives your light a soft look.

    • If shooting outside and have a flash on your smartphone use it as this will give you a dynamic look and add detail.

  3. 6 Golden Rules For Ecommerce Design

    Let’s face it, we have all been victims of an impractical or just plain unresponsive checkout system while trying to finish an online purchase.

    Most websites are built with the intention to convert the visitors into customers but there is no way that can happen when a poor checkout design is implemented. Potential customers are looking for a quick and satisfying online experience which means you need to make sure that happens.

    Truth be told there have been a few times where I personally didn’t buy an item just because what should have been a simple checkout turned into an unnecessary interrogation with no navigation or step indicators.

    To prevent a fleeing potential customer it is imperative to review not only your overall e-commerce design but your ecommerce checkout flow.

    Today’s article will feature the basic fundamentals of an ecommerce checkout design including your cart graphics and your overall flow that will hopefully convert your ecommerce store into a profitable one.

    1. Keep the Cart Simple

    [caption id="attachment_83017" align="aligncenter" width="1024"]http://asos.com/ ASOS.com[/caption]

    The first on a very important list of e-commerce checkout fundamentals and must haves is the shopping cart.

    The shopping cart is the first visual indicator to potential customers that your site provides a good or service that can be purchased online.

    Though a seemingly simple attribute the design of your shopping cart should match the website. Getting appropriate graphics is essential to help the process of conversion.

    There are various representations of the famed shopping cart which includes standard shopping trolley, the basket and of course shopping bag for you to choose from. You can even settle for text if you like.

    Whichever design you choose you must make sure that it is visibly accessible.

    In other words, it needs to be located in an area where visitors will notice it within five seconds or less. You will often find shopping carts are located in the top right corner.

    Keep in mind that your shopping cart also needs to be a reasonable size, not too big and not too small. Remember that your cart design doesn’t need to be fancy, just visible.

  4. What Web Designers Can Learn from Art History

    Last year, I shared five ways in which designers, as a whole, could learn from films in order to improve their designs. So, what about art history?

    Inspiration can honestly be drawn from anywhere including the evolution of art which has seen many changes throughout the centuries.

    That’s why today’s article will feature five key areas from art over the years where you as a web designer can pull inspiration, practices and techniques in order to better your websites.

    Trends and Styles are Ever Changing

    5 art styles

    Web design is ever-evolving, just like technology and architecture.

    Straight out of the gate, or rather a quick flip through any art history book will show you the extensive changes that art as a whole has gone through.

    From precise stippling to geometric blocks, there is an ever changing cycle.

    The same can be said for web designers and the people who design them. There are many key factors that lead to success as most of us know but being able to accept and adapt to change is really where you as designer can and must excel.

    It isn’t just change that you need to embrace but also the trends, styles and techniques that do catch on and remain. These factors which can be anything can really have an effect on your final outcome and influence your choices like with layouts.

    Let’s consider how the use of numbers created change in art.

    The golden ratio or golden section was first developed in by the Ancient Greek during their study of geometry where they found the number 1.61803398874989484820 during countless occurrences.

    This number, what we most commonly refer to as “phi” has been considered throughout art history to be the most pleasing to the eye when the ratio for length to width of a rectangle fits this number.

    Why does any of this matter?

    [caption id="attachment_82561" align="alignright" width="400"]Instagram site overlayed with the golden section. Instagram site overlayed with the golden section.[/caption]

    Artists from the time of the Greeks and even now still apply the golden section to their work.

    The exterior of the Parthenon designed by Phidas, Chartres Cathedral which was built during the Medieval times, Dali’s “The Sacrament of the Last Supper” and even the CN Tower in Toronto implement the golden section.

  5. 4 Mistakes That Can Ruin Your Site Launch

    If you’re reading this post on SitePoint, I’m pretty sure I don’t need to explain to you the benefits of having a website.

    In short, it’s all about giving visibility, exposure and access to a wider and like-minded audience.

    Nevertheless, having the raw technical abilities to launch a site, in no way guarantees its success.

    While some problems may fall outside our complete control, often newly launched sites fail because of bad practices and neglected fundamentals.

    Today, I’m sharing the five most common mistakes that ruin websites and how to counter them to guarantee you a successful site launch.

    Neglecting your Browser Checking

    Not checking to see if your website works on the various available browsers out there is about one of the biggest issues that websites tend to have.

    Like most products and services, people do not all use the same thing, and it couldn’t be truer than when it comes to browsers.

    Web browser usage stats show that as of April 2014 23.2% used Internet Explorer, 20,3% used Firefox, 48.8% used Google Chrome, 5% used Safari and 1.43% used Opera.

  6. Dial-a-Style #4: Nailing the Pop Art Look

    Pop art: the word probably conjures up images of soup cans and colorful Marilyn Monroes for you.

    A commentary on both the contemporary consumer and the culture, pop art delved into a world without looking for deep and philosophical meanings. It was a complete departure, and an active backlash against the art movements before it.

    Like most artistic movements, pop art has its specific techniques and subject matters. The focus settled on culture and mass consumerism and art techniques that were typically embodied within classic fine art were transformed or abandoned altogether with pop art.

    Bright vivid colors often accompanied bold, simplistic shapes and soft lines for a distinct and recognizable shape.

    The Beginning

    Despite its association with New York, pop art had its true conception in Great Britain during the mid 1950s.

    The movement emerged shortly after World War II, but it was Lawrence Alloway, a British curator who actually coined the term ‘pop art’ in 1955.

  7. Dial-a-Style #2: Film Noir Style

    Poster: The Lodger (1927)

    Film has inspired everyone from fashion designers, video games and even music videos. Website design is no different, with film lending its techniques to establish a particular look or mood.

    This article will enlighten you on exactly what film noir is, its history, its key players, examples of web resources with film noir characteristics, and finally a rundown on how you can apply it to your designs.

    So, what is Film Noir?

    The term literally means “black film” in French, but in the cinematic world it has come to encompass certain aesthetics and tropes.

    These including the use of black and white film, vignettes, high and low key lighting, along with the presence of cynical characters. The genre is usually associated with crime dramas, or those fitting in the timeline of WWI and WWII, but film noir has often branched out from these “stereotypes”.

    Films like “It’s a Wonderful Life” and “Vertigo” defy many of the classic noir films memes, but still managed to fit in the category.

    In ‘It’s a Wonderful Life’, the protagonist is suicidal and the mood of the film is dark, while Vertigo, though not a black and white film, features class film noir themes — a tortured anti-heroe, a post-war timeline and, of course, a complex plot.

  8. Sharpen up! 3 Steps to Simplifying Your Design

    The internet is a powerful medium and your website, if done well, can be your most powerful tool for capitalizing on it.

    As designers, business owners and others who constantly use the internet and a website to attract clients it is important that your website is not only useful and accessible, but impressive.

    Remember that even a simple design can maximize your chances of being scouted by prospective clients and employers.

  9. How to Choose the Right Icons

    Icons are nothing new when it comes to web design, but that doesn’t mean selecting the right icons to use is an easy task. Like anything else when it comes to your website, careful thought is required to determine the use and need for each component. Whilst sprinkling your pages with decorative icons may give […]

  10. Look at Me! Six Ways to Boost Your Design Presence

    Almost everyone and everything is online in 2014, and if there’s one golden rule for designer/developers looking for work it’s: Make yourself visible! This rule is equally true for graphic designers, front-end developers, UX people or any other visual design field for that matter. While we all know Facebook and Twitter can be invaluable for […]