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: Re-Imagining the Hamburger Icon

    The navicon, most of us are familiar with it, have seen it countless of times and have even tapped it more than once on our mobile devices. You might even know it by its various names. The three line menu, drawer, menu icon, side swipe, three stripes or the ever popular hamburger icon are just a few names you will find associated with the navicon. Regardless of the name you give this commonly used icon the point is that it’s been the subject of many debates.

    Since a lot of the discussions and arguments bring up navicon’s functionality it will be touched on a little in this article but with an addition. Instead of solely focusing on whether the design and inclusion is counterintuitive or intuitive I’m interested in trying to find out whether or not a new design can replace the widely used navicon. Not only that but figure out whether a change in design will be effective or if a different alternative altogether should be examined and developed.

    For those of you who are mobile developers and have experience in the area feel free to give your take on the “hamburger” icon dilemma. Even if you aren’t a developer but a daily mobile device user don’t be afraid to pipe in.

    Origins of the “Hamburger” Icon

    Before we can even get into the debate of the “hamburger” icon we should really go back and address where did it start. To some the icon just came out of nowhere and became popular overnight. I’m talking celebrity status here. I can’t, and I’m sure you can’t either, visit a site from my mobile device without seeing that three lined behemoth in one of the upper corners.

    Now if you ask around where the icon originated you will of course get various answers. Some have said that it was Apple who started it all by introducing it back in 2007. Others will tell you that it was Google while another group will swear that it started with apps like Facebook and Path.

    Of course I haven’t seen any hardcore evidence that backs any of these claims. But while one shouldn’t be too quick dismiss things based solely on there being concrete evidence or not I can say that the “hamburger” icon did not originate with any of the aforementioned companies. You see the three lined icon is a lot older than you may think.

    So where did it originate? The answer is Xerox or at least that’s what we can say for right now until proven otherwise. That’s right, it was the Xerox Star where we first saw the icon circa 1981. Don’t believe me? Check this out.
    xerox-star.png

    That’s right, that means the icon is over 30 years old. Now while it does seem we can credit Xerox with being the first company to use the icon we have to give the credit to Norm Cox, the designer of the interface system.

    Despite the fact that some people give the icon some flak for acting as a menu icon it should be noted that when Cox created the symbol it was meant to act as a “container” for contextual menu choices.

  2. 5 Impressive Photography Styles and How to Nail Them

    Lobagolahttp://www.lobagola.com/

    Lobagola

    Lunet Eyewearhttp://luneteyewear.com/

    Lunet

    Le Col de Claudine – http://www.lecoldeclaudine.com/fr

    Claudine

    Quick Look Steps

    Step 1: Open Your Image
    Pick your desired image that you want your effect to be applied to. In these tutorials I will be using photos that I have personally taken.

  3. Better Content Creation for the Web

    Ask yourself, what is one of the first things visitors look for when they reach your website? Other than a friendly interface for optimum usability, it’s the content.

    Content makes up the majority of your site so it is imperative that you pay attention when creating or redesigning your website.

    Though you learn earlier on in your career as a designer that your design can make or break your website, it should be noted that poor content can be damaging as well. In today’s article you will learn what makes good content and how to make the most out of it.

    What is Good Content

    Akaru

    http://www.akaru.fr/en/

    Of course, the first thing we need to define is what exactly constitutes as your content.

    Your content is in the simplest terms the visuals, texts and any audio which appears within your design. In a nutshell, content can be classified as most of the things you see when you click on a site. The words you are reading right now are content.

    But what makes your content successful?

    To be blunt, your content is going to be a lot more successful if you cut out all those bells and whistles. Trust me, it isn’t as necessary as you think.

    The average person is going to care less about all your fancy parallax scrolling, jquery ajax and all that other stuff and care more about what you have to say.

    This delivers the first rule of good content: keep it simple. You’re not writing a university paper. Don’t cram long, flowery sentences in when all the user wants to know is what you do, and how much is it.

    Now that we have got that out of the way, let’s get to the meat of good, successful content.

    Generally your content should lend itself to answer questions, guide the visitor through your site and hopefully converts them from visitor to customer and/or consumer by the end of their virtual trip.

    If your website isn’t design to sell products or services, that’s ok, you can still follow these content creation guides. Just ensure your content is either informative and/or entertaining if your site leans in such a direction.

  4. Screencast: Principles of Design for Developers

    Great design is guided by four primary principles: Contrast, Repetition, Alignment and Proximity. In this introduction to my new Learnable course “Principles of Design for Developers” we begin to explore these concepts as well as the common tools of the design trade. Over a series of lessons in this course, you will learn more about […]

  5. 10 Must-have iPhone Apps for Designers

    With a new year comes bigger and mostly better additions to the design communities. This can be anything from new resources like textures and brushes to new design trends making the rounds.

    We even get an arsenal of new web and mobile applications every few weeks which is making it a lot easier to get things done without being tied down to one place.

    Last year I introduced 22 Creative, Useful iPhone Apps for Graphic Designers ranging from free to a few dollars that wouldn’t put a dent in your pocket. This time I’m coming back to bring 10 more to help fellow and inspiring designers make the most out of both their time and work. The apps here cover a range of things that will help you stay productive which will include actual applications geared to drawing, note taking, typography and even image correction.

    Hopefully you will find something in the bunch to aid you on your next project.

    iDesign

    iDesign

    • Price: $9.37
    • Category: Design & Drawing
    • Compatibility: iOS 5+ with iPhone, iPad and iPod Touch

    Description: If you’re in the market to find a premium app with the primary focus of designing and drawing then you have a number of options to choose from. iDesign is just one of them. iDesign is like a mini pocket Illustrator without the Adobe name attached to it.

    The app allows you to not only design but allows you to also create high quality 2D illustrations and technical drawings which makes this app a good fit for just about anyone.

    Another great addition is the fact that you can use your finger in lieu of purchasing a stylus and still accurately create without finger obstruction. There are tons of features that come with the app that should make it worth its price including multiple layers, smooth multi-touch zoom, iCloud support and much, much more.

    ArtStudio

    Art Studio

    • Price: Free
    • Category: Design & Drawing
    • Compatibility: iOS 4.3+ with iPhone, iPad and iPod Touch

    Description: Should you need an on the go editor and designing app without shelling out any money then your best bet is ArtStudio.

    This app isn’t just for those looking to doodle either. You can sketch, paint and even edit your photos should you need to. There are tons of things going for the app including a selection of brushes which will be familiar grounds for those of you accustomed to programs like Corel, Photoshop and GIMP.

    The interface is also user friendly so creating should be a breeze without too much trouble thanks to a brand new graphics engine. There are plenty of other helpful features that come packaged in the app including 16 tools, 150 high quality brushes, layer options, 40 available filters and plenty of more additions worth checking out.

    ColorSchemer

    ColorSchemer

    • Price: Free
    • Category: Color Utilities
    • Compatibility: iOS 4.0+ with iPhone, iPad and iPod Touch

    Description: Your color choices can take your design to a whole new level so it would be helpful in your arsenal of iPhone designing apps to have one that deals specifically with color.

    With ColorSchemer you can turn your iOS device into a color bible just for you to use whenever you want.

    Aside from your typical color options that you often find in apps of this nature you gain access to over 1 million color palettes created and shared by ColorSchemer users. That right – there is 1 million reasons to grab the app.

    But if you need more incentive how about this? With the app your ability to create palettes is virtually endless. You can devise color palettes out the photos on you already have or from pictures you just snapped. Not only this but you can harmonize your colors and even visually see how they work together in the built in pocket color wheel.

    ColourSchemePro

    ColorSchemerPro

    • Price: Free
    • Category: Color Utilities
    • Compatibility: iOS 6+ with iPhone, iPad and iPod Touch

    Description: Now if ColorSchemer isn’t your cup of tea but you still want a free color app you can try ColourSchemePro by Asian Paints.

    Now this app takes a different approach when it comes to working with colors. While you can still share you color palettes via social media networks like Facebook and Twitter the app has built in colors waiting for you to pick from. With this app you simply select your desired color from Asian Paints Colour Spectra’s fan deck and from there you let the app guide you into selecting either a monochromatic, analogous or complementary color scheme.

    Don’t worry, you’re not tied down to these 1800 color choices as you can simply use one of your own photos to do the same thing. The app allows for customization to your colors which is always a nice thing plus there are some effects that you can use as well though limited.

    Fuzel

    Fuzel

    • Price: Free
    • Category: Photo Editor
    • Compatibility: iOS 7+ with iPhone, iPad and iPod Touch
  6. 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.

  7. 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.

  8. 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.

  9. 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.

  10. 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.