LAURA COX DESIGN STUDIO

Logo Design

Motion Graphics

Web Design

Adobe Illustrator

Adobe After Effects

Adobe Photoshop

Adobe Dreamweaver

HTML5

CSS3

jQuery

PROJECT

Creating a visual identity for myself has been a work in progress since the beginning of my design education. However it wasn't until I started to contract freelance work and to sell some of my other work that I needed to have something to identify myself. I also needed a better home for my exisitng work than the plain Cargo site I was previously using. I decided a custom built site would be the best environment to showcase my designs for future employers, clients, and customers to visit.

Logo notes page 1
Ink doodles where I first sketched a box design.
Logo notes page 2
Iterations of the box in "L" shapes.
Logo notes page 3
Expanding the idea of the box.

LOGO PROCESS

Though I had been ruminating on this for quite some time, I could never pin down the exact words I wanted to use for my identity. I certainly wanted my name to be a part of it and set to work dissecting and abbreviating and listing word and name combinations. Eventually I stumbled upon LCD Studio which felt so right when I said it aloud that I knew I found my answer.

Logo color notes page 1
Testing colors and patterns.
Logo color notes page 2
Combination palettes of colors and patterns.

Separately from these word notes were sketches and doodles relating to my work as I saw it as a whole. I wanted a symbol that could be recreated in multiple mediums, work as a system, and be dissected into distinct parts. I favored a box design that to me represented the multiple perspectives and methods I utilize when first tackling a problem. It was also a subtle "L" shape, referencing my first name. With this design refined and in combination with the new found name, I had a basis for my logo.

Resume notes
Testing box shape elements.
Website wireframes page 1
Website wireframe sketches.

Determining a color palette proved difficult as at first I wanted to stay strictly black and white. But thinking about my personality and my design work, I realized it was an important aspect I needed to explore. In choosing color, I looked at how I utilize color in my work, how I gravitate towards colors in my wardrobe (as an extension of my personality), and how I interacted with certain colors in real life. Though most of the final designs here feature little color, I chose red and blue to reiterate the 3D look of the logo, equal width stripes as added depth and pattern, and softer compliments of pink and beige.

Website wireframes page 2
Sketched layout with menu and split screen.
Website wireframes page 3
Menu map and scrolling notes.
Website wireframes page 4
Thoughts on a landing page.
Website wireframes page 5
Testing placement of boxes in relation to each other.

WEBSITE PROCESS

The reason for a custom site stemmed from my annoyance and boredom at many of my peers plain white portfolio sites. I'd fallen into the same trap as well when first hosting my work on premade portfolio site templates; they were all so similar. I wanted to show my work in its natural environment and set about creating a space that had my personality written all over it.

Website wireframes page 6
Notes on motion logo use.
Website wireframes page 7
Menu layout and scrolling sketch.
Website wireframes page 8
Screen size column layouts.
Website wireframes page 9
Newer layout wireframe.
Website wireframes page 10
Planning out button functions.

By the time I started building this website, I'd gone through three coding courses as well as tried online coding training from multiple different tutorials, yet I could not understand exactly how to build what I was envisioning. With this project, I took the opportunity to teach myself on my own terms. Instead of going step by step in understanding each element like the courses had taught, I dove headfirst into making the first version of the site with W3Schools and Google searches walking me through what I didn't understand.

Website wireframes page 11
Secondary menu layout sketches.
Website wireframes page 12
Figuring out border images.
Website wireframes page 13
Sketches of buttons that were coded in but later discarded.

Perhaps it's just my learning style, but something clicked. Suddenly I had built a basic framework quicker than I expected. I started to learn about JavaScript and how to use jQuery to build some of the functions I was trying to execute. The design started changing to accomodate new interactions, but the split screen was an element from the get-go. My aim was to present my work alongside the process it took to arrive at the final product. I chose to split the screen evenly as I place an equal importance on both aspects of a design and wanted the site to reflect as much.

Website wireframes page 14
Project description box sketch.
Website wireframes page 15
Expanded description for toggled box.
Website wireframes page 16
Expandable box sketch.
Website wireframes page 17
Planning out button functions.
Website wireframes page 18
SVG button sketches.

About halfway through coding the site using Bootstrap, I realized that I actually had no need for it. Using what I'd already written as a base, I rewrote and cleaned up the code. This led to the elimination of excess buttons, the realignment of menus, and easier to navigate copy. At this point, I focused on the details of placement in mobile versus tablet versus desktop. After first launching the site and observing how it behaved on different devices in their native browsers, I collected a list of all the small fixes. This modest list grew into another small redesign focusing on functionality.

April 2017–December 2017
Copyright © 2018 Laura Cox
LCD motion logoBusiness cardsResumeDossier set with pencilLogo mark

+

+