KATRINA MURRY
Graphics, Web, Concepts
Game Console Landing Page
OVERVIEW: At Q Interactive, I developed multiple projects besides this landing page. The best tool to handle this project was flex-box since at mobile, the elements shift around with JavaScript to mimic the original design layout. Positioning and the order control with flex-box saved a lot of development time. The survey portion also uses JavaScript to add funtionality that helps users to progress to the email collecting form.
CODE AND APPLICATIONS USED: HTML, CSS, Vanilla JavaScript, SCSS, SMACSS file structure, Responsive Web Development Techniques, Photoshop
Animated Survey
OVERVIEW: The main intention for this form was to demo the impact that animations could have on the user experience. For example, tranistions are used to send visual cues confirming user actions, directing users to the next question, and to show progression. The main challenge was to get the 'points circle' to scale properly while still appearing big enough to not crowd the space when viewed at mobile.
CODE AND APPLICATIONS USED: HTML, CSS, Animations, Vanilla JavaScript, SCSS, SMACSS file structure, Responsive Web Development Techniques, Photoshop
Political Landing Page
OVERVIEW: Following the recent political campaign efforts, I was requested to develop this quick survey. The objective for this project was to initially measure how open users were to answering minor questions around the campaigns. The data gathered was then used to predict the effectiveness of other offers that were to be built around the same subject.
CODE AND APPLICATIONS USED: HTML, CSS, Animations, Vanilla JavaScript, SCSS, SMACSS file structure, Responsive Web Development Techniques, Photoshop
Mobile Game Landing Page
OVERVIEW: The tricky part of this project was working the center structure with the gems into the rest of the design to work well at mobile sizes. I stacked elements and manipulated z-index to get the right fit and tweaked from there. I use animation techniques on the button to give it the illusion of being "pressed."
CODE AND APPLICATIONS USED: Photoshop, HTML, CSS, SCSS, SMACSS file structure, Responsive Web Development Techniques
I want to pave the way for smoother web applications and better user experiences. Building quality code matters.
KatrinaMurry.com
OVERVIEW: At first, I build this site using a grid structure called Types and Grid system. I felt that after a while, this iteration no longer represented my current style of coding, so I decided to completely rebuild the code behind my portfolio site in order to boost performance. It is fully responsive and flexes to browser sizes accomodating for mobile viewing. The repository for the rebuild can be found on my bitbucket account.
CODE AND APPLICATIONS USED: HTML, CSS, Animations, Vanilla JavaScript, Responsive Web Development Techniques, Photoshop, Illustrator, SMACSS, SCSS
Black Friday Landing Page
OVERVIEW: While at Q Interactive, I built this "Black Friday" themed design. It was to be used as a template to cut down development time for similar offers. Keeping that in mind, I focused on making sure to build code that was clean, easy to understand, and structured in a way so that other developers could pick it up with ease. The countdown feature uses Jquery to redirect the site when the timer ends.
CODE AND APPLICATIONS USED: HTML, CSS, JQuery, SCSS, SMACSS file structure, Responsive Web Development Techniques, Photoshop
Phone Promo Landing Page
OVERVIEW: At Q Interactive, as with other projects, I first sliced out images from a provided PSD and coded this "Phone Promo" themed design. I was responsible for making the design fully compatible for mobile. The challenge here was manipulating the DOM structure to rearrange elements on the page when scaled down to mobile sizes. The main content is pushed to the footer to comply with the design requirements.
CODE AND APPLICATIONS USED: HTML, CSS, JQuery, SCSS, SMACSS file structure, Responsive Web Development Techniques, Photoshop
Cookie Landing Page
OVERVIEW: To start off this "Cookie" themed design, I began with a quick-and-dirty hand drawn wireframe of the necessary elements. With this, I sliced the images from a PSD provided by the Creative Department at Q Interactive. To spare loading time, this page utilizes optimized pngs and pulls goolgle fonts. At mobile, the elements are hoisted up to be above 'the fold' to improve conversion rates.
CODE AND APPLICATIONS USED: Photoshop, HTML, CSS, SCSS, SMACSS file structure, Responsive Web Development Techniques
Front End Web Development at Q Interactive
As a web developer working on a number of projects going from coding alone to developing with a team, you learn a few things. I am constantly looking for new ways to imporve how I code, the way I think about code, and the quality of the code I create. At Q Interactive, I learned the importance of writing quality code. It is essential that the coder next to you can easily pick up or pull your code and quickly interpret your style so that they can do their job as well.
Architects Design Group - Full Time Graphics
At Architects Design Group, I wore many hats. Besides my main role as their Graphic Designer, I also did web development and seo working directly under their Marketing Department. ADG specializes in the design of police, fire, and public safety facilities, so a lot of my projects are focused around these categories. There, I made graphical assets for presentations, documents, and any supplemental print or online materials necessary in order to promote services and obtain new business. Featured below are a number of examples of my work. Scrolling through, I have also included some brochures, a trade show display for their booth, and a couple of other items.
Semi-Annual Marketing Meeting December 2012 Cover
Semi-Annual Marketing Meeting June 2013 Cover
Houston Submittal Cover
Terre Haute Study Report Cover
Comment Cards
Christmas Party Invite
KMM Designz - Freelance Work
With a history in Graphic Design, I have used this skill on the side to typically do branding projects from time-to-time. This keeps my skills sharp when it comes to keeping up with photo manipulation software and creating vectors. However, my main focus is in web development making .
KatrinaMurry.com Logo
Food Fun Adventure Logo Redesign
URGENTMED, DAVIE, FL - As my first job right out of college, I worked at UrgentMed doing Medical Coding and Billing, however, when they needed design work, they gave me the chance to show my other skills. This gave me the opportunity to help them with their vision of overhauling their brand so I started with a redesign of their logo. With that, I then provided designs for various marketing materials like business cards, stamps, stickers, promotional coupons, etc, and followed through with printing.
KIDS KLUB HAUZ, PHILIPPINES - Based in the Philippines, Kidz Klub Hauz had contacted me to create a few branding assets for them including a logo and business card designs to help them launch their budding business. I wanted to create something that fully represented the spirit behind the business: a place where children were free to use their imagination and play. Although remote, I worked closely with my clients and that vision was realized. My design was even recreated as a mural that was painted inside the facility. I am proud to have had the opportunity to help Kidz Klub Hauz take off.
KKHZ Primary Logo
KKHZ Supplemental Logo
HUMBLE BEGINNINGS, ORLANDO, FL - Working with private clients has helped me upgrade my ability to communicate client wants and designer needs in order to bring a project into fruition. These projects majorly impacted my career development no matter the size.
Planet Digital - Part Time Graphic Design
During my college career, I took up an internship with Planet Digital, a design firm that was located in Downtown Orlando, FL. There, I created handouts that provided schedule information for upcoming classes. However, for most of my experience there, my fellow intern and I worked together to develop an area guide featuring Lake Eola and Orlando nightlife. Click the link below to see the full guide.
Fan Art Drawings
I believe that keeping the mind engaged in the creativity of others sparks inspiration. A visual person myself, I draw mine from a growing fascination in animation, comics, as well as video games. In my spare time, I enjoy drawing and exploring other forms of 2D art.
The following are a collection of images that I have seen in printed books as well as in digital formats that I have payed homage to by drawing the images myself. These illustrations are inspired by characters and artwork from Marvel, Sega, Cliffhanger Comics, and many others.
Sonic - Marker and Colored Pencils on Bristol Paper
Spider-Man - Pen and Colored Pencils on Sketch Paper
Black Symbiote Spider-Man - Pen on Sketch Paper
Shadow - Marker and Colored Pencils on Sketch Paper
Venom - Pen and Colored Pencils on Sketch Paper
Betty Boop - Marker and Colored Pencils on Bristol Paper
Spider-Man Upside Down - Pen and Colored Pencils on Sketch Paper
Danger Girl - Pen and Colored Pencils on Sketch Paper
Vector Art
Featured here is the first installment of a mini-project that I am currently working on. I am in process of creating a series of vector based graphics of my favorite cars. I've always marveled at certain car designs and upcoming concepts for their use of curves. Curves that give an appealing aesthetic like no other and that also provides a functional purpose of improving the aerodynamics of the vehicle. I thought that using vectors as a medium would best reflect this idea on a 2D level.
On my list of cars to vectorize next include a 2013 Dodge Viper SR10, a 2015 McLaren P13, and the Porsche 918 Spyder. If you have a favorite car design, please contact me!
View more of my vector illustrations under the section of my portfolio.
Metallic Mustang - 100% Vector
2D Art
With these two pieces, I have taken a different approach where the composition of each is centered around a collage of some sorts. Although the medium used vary from one another, the main focus for both is line thickness and contour that guide the eye in interesting directions.
With the "Ink Collage," I gathered influences from numerous pop cultures and intended to use the flow of ink to bring out their respective personas. Also, with the "Organic Collage," I used black construction paper to weld together an orchid flower and a wine bottle opener/multi-tool to create the illusion of a harmony that looks almost lively.
Ink Collage - Fountain Pen and Ink on Bristol Paper
Organic Collage - X-Acto Knife and Black Construction Paper
SEARCH ENGINE OPTIMIZATION
Empire Internet Marketing
I began my experience at Empire Internet Marketing as a SEO Specialist. It was my job to work together with my colleagues to "build links" where we would search to the ends of the internet to find websites that were relative to ours and contact their respective webmasters in order to develop a relationship. From there, we would exchange link information to contacts who were open to an exchange and hopefully it stuck.
A top performer, I was later entrusted to lead my own team of SEO Specialists. I met with other group leaders on a weekly basis to discuss analytics collected by team leads, new strategies from our supervisors, what techniques were working, and how to improve group efficiency as well as the performance of each individual within our teams. With this combined effort, we continued to climb search rankings working mostly to optimize the websites Mesothelioma Resource Online and Mesothelioma Prognosis.
During my time working with Empire, I gained a deeper understanding of the trade which I now incorporate into my web coding.
An optimized page is not just about unique content anymore, but about content that is valued enough to share.
On-Page Optimization
This entails simplifying information on a page and providing quality content that is easily understood. Techniques like having clean code that can be quickly indexed, taking advantage of adding key terms in the "alt" tags for images, or helping users stay on your site longer with internal links can greatly improve SEO.
Search Engine Marketing
From this experience, I have retained extensive knowledge of the inner workings of major search engines like Google, Yahoo, and Bing knowing the mechanics that dictate organic page rankings. However, Search Engines are constantly re-working their algorithms that determine this.
Techniques that have worked in the past, may no longer be as effective as they were. To counter this, I enjoy following online news and blog sites to help keep me in the know.
Keyword Research
Utilizing specific research tools like Moz, Google Adwords, and Link Diagnosis, we can predict recommended key terms based on the amount of daily searches by users over the internet, competition for that particular search term, and keywords already being utilized to find the project website.
It's not always about getting visitors to your site, but about getting the right kind of visitors.
Google Analytics
Having learned Google Analytics and exploring it's versatility, this allows me to monitor not only site traffic, but the paths that users take in order to access provided information. This tool has become very effective in determining where trouble spots are for site visitors that need improvement.
DUTIES INCLUDED: Lead SEO Specialist, Link Building, Guest Blogging, Execution of Email/Link Building Campaigns, Monitoring Google Analytics, Keyword Research.
MESOTHELIOMA RESOURCE ONLINE
OVERVIEW: The main focus of this project was geared towards a specific target market in order to increase overall site traffic.
Working with a skilled team of SEO Specialists, we managed to rank Mesothelioma Resource Online as #1 in organic search results for the very competitive key term "mesothelioma."
Mesothelioma Resource Online also remained in the top 10 search results for other key terms like "mesothelioma cancer," "mesothelioma survival rate," and "mesothelioma life expectancy."
MESOTHELIOMA PROGNOSIS
OVERVIEW: This project was centered around similar goals as Mesothelioma Resource Online targeting a specific user dynamic in order to raise site traffic over time.
During the run of this project, my direct task for this particular site was to closely monitor daily rankings in organic search results.
This information was used to project trends and to determine whether or not strategies were effective or not and what necessary adjustments were needed to change that.
Front End Web Developer/Designer
Resume: KatrinaMurry_Resume_2018.pdf
I have a passion for the web. I want to help build better user experiences to make the web more convenient, and there is a lot that goes into that. What it boils down to is writing clean, more efficient code and with a digital age that is constantly changing, updating, and evolving, I eagerly stay in-tuned.
I love how code is dynamic, modular, simplistic, yet complicated, and mostly, I really enjoy the challenge of piecing it together. I breathe coding HTML5, CSS3, and JavaScript. What can I say? Getting to learn to use a different modification of a fundamental coding structure is pretty cool.
I have dappled into company and product branding, logos, and other identity work. Currently, I am busy with Adobe Experience Manager developing components and helping out my team at Cloudera, but I manage to . On the side, I love to sketch and explore other forms of art that have a strong influence on my creativity like video games, classic artworks, and print works.
I'm always interested in hearing about cool new projects so if you got one, shoot me an email!
GitHub: www.github.com/katmurry
Bitbucket: www.bitbucket.org/katmurry/