Tag Archives: UI

WordPress Site . Arrowhead Lodges

BRIEF

Design, populate and launch a main website to attract tourists.
Produce photo-rich sub-sites for each rental home.
Provide another sub-site to market to home owners.

Category = Graphic Design / Web


 

[columns indent=”25″ bottom=”25″][column]

CLIENT

Arrowhead Lodges

[/column]
[column]

PROJECT TITLE

Arrowhead Lodges

[/column]
[column]

DESCRIPTION

Websites

[/column]
[/columns]
[columns indent=”25″][column]

ROLES

[list style=”unordered” type=”type18″]
ART DIRECTOR
GRAPHIC DESIGNER
PHOTOGRAPHER
WRITER
WEB MASTER[/list][/column]
[column]

TOOLS

[list style=”unordered” type=”type18″]
DREAMWEAVER
PHOTOSHOP
LIGHTROOM
ILLUSTRATOR
CANON DIGITAL REBEL SLR[/list][/column]
[column]

LINKS

[list style=”unordered” type=”type7″]
Arrowhead Lodges
Laketop Lodge
Sweet Dreams Lodge
More about the Branding[/list][/column][/columns]

SOLUTION

WEBSITE                                                            SUB SITES

Fun Facts

[list style=”unordered” type=”type7″]
Each vacation home has its own “something-something” Lodge domain, in keeping with Arrowhead Lodges’ theme.
Using multiple domains pointing to one domain makes managing many sites easy, while increasing SEO exponentially (since no content repeats).
The site, overall, functions extremely well, and — despite the small inventory of homes –Arrowhead Lodges enjoys organic, first page ranking for nearly all relevant searches in most search engines — often topping major competitors like VRBO, AirBnB and Flipkey.
[/list]

SAMPLE WEB PHOTOGRAPHY

EXTERIOR WIDES . LAKE ARROWHEAD

EXTERIOR MEDIUMS . SWEET DREAMS LODGE

Fun Fact

[list style=”unordered” type=”type7″]
This home owner does set design, and the kids love this vacation rental.[/list]

INTERIOR MEDIUMS . RIM OF THE WORLD LODGE

Fun Fact

[list style=”unordered” type=”type7″]
Without the employment of HDR (High Dynamic Range) photography techniques, this shot, showing both the interior of the room, and the patio and trees at the same time, would not be possible.[/list]

INTERIOR CLOSE UPS

Share

Planes . Anatomy of a Disney Film Campaign

BRIEF

Fashion several ad units using the key art from Planes; including Flash Countdown.

Category = Graphic Design / Layout / Advertising


 

[columns indent=”25″ bottom=”25″]
[column]

CLIENT

Fandango and Disney

[/column]
[column]

PROJECT TITLE

Planes

[/column]
[column]

DESCRIPTION

Web + Mobile Ad Campaign

[/column]
[/columns]
[columns indent=”25″ bottom=”25″][column]

ROLES

[list style=”unordered” type=”type18″]
GRAPHIC DESIGNER
FLASH PROGRAMMER
VIDEO EDITOR
[/list]
[/column]
[column]

TOOLS

[list style=”unordered” type=”type18″]
AFTER EFFECTS
CELTRA 3.0
FLASH
PHOTOSHOP
QUICKTIME PRO
ILLUSTRATOR[/list]
[/column]
[column]

LINKS

[list style=”unordered” type=”type7″]
Planes
[/list][/column][/columns]

SOLUTION

FLASH COUNTDOWN

The file’s animation may have completed before you scrolled down this far. If so, refresh page to see it.

Fun Facts

[list style=”unordered” type=”type7″]
Disney responded well to this unit, even asking if I could animate the propeller, which I did using a repeated triangle shape that was blurred under a mask.
Flash is such a great medium, but the hardest part is figuring out how to keep file sizes (aka “K weight”) small.
[/list]

IPAD EXPAND UNIT

How They Look:

How They Work:

Fun Facts

[list style=”unordered” type=”type7″]
I designed these using Adobe Master Suite, then broke them into smaller parts (buttons, background, video inset, etc.), and programmed their functionality using Celtra 3.0. They were then trafficked in-house by our Ad Operations team.
Interestingly, Fandango only currently sells iPad ad units. No other tablets get our ad dollars.
We produce multiples of all these types of units with differing date messaging, like “In Theaters Friday” and “Now Playing”.[/list]

MOBILE PRESTITIAL

Fun Facts

[list style=”unordered” type=”type7″]
I designed these units in three sizes for Fandango’s three supported mobile platforms (iOS, Android and Mobile Web); then programmed them using Celtra 3.0.
These units take over the mobile screen for a few seconds, then disappear. We do a lot of them.
You can find more of my prestitial examples here.
[/list]

Share

Ad Campaign . Orange Julius

BRIEF

Create an Orange Julius ad campaign for Dairy Queen, on Fandango.

Category = Art Direction / Campaign


 

[columns indent=”25″ bottom=”25″]
[column]

CLIENT

Fandango and Dairy Queen

[/column]
[column]

PROJECT TITLE

Dairy Queen / Orange Julius Smoothie Shop

[/column]
[column]

DESCRIPTION

Website and Mobile Ad Units

[/column]
[/columns]
[columns indent=”25″ bottom=”25″][column]

ROLES

[list style=”unordered” type=”type18″]
ART DIRECTOR
GRAPHIC DESIGNER
MOBILE PROGRAMMER
[/list]
[/column]
[column]

TOOLS

[list style=”unordered” type=”type18″]
CELTRA 2.0
PHOTOSHOP
ILLUSTRATOR
INDD[/list]
[/column]
[column]

LINKS

[list style=”unordered” type=”type7″]
Fandango
[/list][/column][/columns]

SOLUTION

SKIN AND IN-SITE RESTAURANT LOCATOR

Fun Facts

[list style=”unordered” type=”type7″]
Normally clients provide all the art direction for a campaign. This was an unusual situation wherein I was involved from conception to pitch to execution. I grabbed nearly all content from the Orange Julius website, and arranged it.
The skin’s duplication of the hero graphics on either side was against my suggestion. That doesn’t make it wrong.
The restaurant locator embedded in the site was an in-house first. I was honored to be able to design the look and feel. See below for TAB A and TAB B.[/list]

MOBILE BANNER-EXPAND RESTAURANT LOCATOR

Fun Facts

[list style=”unordered” type=”type7″]
This may be one of my favorite projects from the standpoint of crafting both the form and function of this banner-expand ad unit.
This, too, was a Fandango in-house first. I had the distinct pleasure of working hand-in-hand with Fandango’s AdOps Department to design, program and implement this campaign using Celtra 2.0.
The falling locators design for the Loading Page (shown here in the middle) turned out to be a lucky discovery… as this graphic approach translates well across all clients.[/list]

Share

CoBrand Site Skin . Gillette . Man of Steel

BRIEF

Create a cobranded skin with integrated leader board for Gillette’s Man of Steel campaign on Fandango.

Category = Graphic Design / Layout / Advertising


 

[columns indent=”25″ bottom=”25″]
[column]

CLIENT

Fandango

[/column]
[column]

PROJECT TITLE

Gillette – Man of Steel CoBranded Site Skin

[/column]
[column]

DESCRIPTION

Website Advertisements

[/column]
[/columns]
[columns indent=”25″ bottom=”25″][column]

ROLES

[list style=”unordered” type=”type18″]
GRAPHIC DESIGNER
[/list]
[/column]
[column]

TOOLS

[list style=”unordered” type=”type18″]
PHOTOSHOP
ILLUSTRATOR[/list]
[/column]
[column]

LINKS

[list style=”unordered” type=”type7″]
How Does He Shave?
Fandango
[/list][/column][/columns]

SOLUTION

SKIN

Fun Facts

[list style=”unordered” type=”type7″]
First… for those who may not understand the term, “skin”; it is the part of the website that extends out from underneath the main site… usually up above and to the right and left of the content. In the above example, the Fandango site, with Summer of Action theme (not mine), is the content in the boxed center. The outsides of that are the “skin”.
Surprisingly, I had a lot to do with this design. Given various images, I was tasked in the 11th hour to produce a cobranded skin, along with additional ad units, for this unusual-but-fun campaign.
What is a cobrand, you ask? It is when two advertisers share the message. In this case, Gillette and the film, “Man of Steel” joined forces with a “How Does He Shave?” campaign that drove users to a mutually-created How Does He Shave? landing site.
I masked Superman from the sky in the original photo, and placed him over this texture, drawing in stark shadows for the cape and razor. I think the razor is too big, but most folks I spoke with were fine with it. I am happy with the button I created, an homage to the S glyph.
This comprehensive blanket campaign reached into every media known to man (steely, or otherwise). Here are the accompanying ad units I produced:[/list]

Share

Miller 64 . Top 64 Guy Movies of All Time

BRIEF

Create a Fandango-sponsored Facebook Landing Page for this Miller 64 sponsored movie contest.

Category = Marketing / Social Media


 

[columns indent=”25″ bottom=”25″]
[column]

CLIENT

Miller 64

[/column]
[column]

PROJECT TITLE

Top 64 Guy Movies of All Time

[/column]
[column]

DESCRIPTION

Facebook Contest

[/column]
[/columns]
[columns indent=”25″ bottom=”25″][column]

ROLES

[list style=”unordered” type=”type18″]
GRAPHIC DESIGNER[/list][/column]
[column]

TOOLS

[list style=”unordered” type=”type18″]
PHOTOSHOP
ILLUSTRATOR
FLASH
GRAPHIC ELEMENTS
– From client
[/list]
[/column]
[column]

LINKS

[list style=”unordered” type=”type7″]
Miller64 Facebook
Miller-64 Flash Unit[/list]
[/column][/columns]
[columns indent=”25″ bottom=”25″]
[column]

PROCESS

Riffed off of the Miller 64 logo.

[/column]
[column]

 

 .[/column]
[column]

 

 

[/column][/columns]

SOLUTION

DIGITAL LANDING PAGE

MATCHING FLASH COBRAND STORYBOARD (BELOW)

The file’s animation may have completed before you scrolled down this far. If so, refresh page to see it.

Fun Facts

[list style=”unordered” type=”type7″]
This was a successful contest; though, it was determined later that 64 contenders might have challenged the user more than necessary.
This promotion required an age gate.[/list]

Share

Prestitials for Mobile

BRIEF

Create interactive mobile media pages for Fandango’s iPhone, Android and Mobile Web apps.

Category = Advertising / Digital


 

[columns indent=”25″ bottom=”25″]
[column]

CLIENT

Fandango’s Movie Studio Advertisers

[/column]
[column]

PROJECT TITLE

Multiple Film Titles

[/column]
[column]

DESCRIPTION

Prestitial Takeovers

[/column]
[/columns]
[columns indent=”25″ bottom=”25″][column]

ROLES

[list style=”unordered” type=”type18″]
GRAPHIC DESIGNER[/list][/column]
[column]

TOOLS

[list style=”unordered” type=”type18″]
PHOTOSHOP
ILLUSTRATOR
CELTRA 3.0
GRAPHIC ELEMENTS
– From client[/list]
[/column]
[column]

LINKS

[list style=”unordered” type=”type7″]
Download the Fandango App![/list]
[/column][/columns]
[columns indent=”25″ bottom=”25″]
[column]

PROCESS

We get the layered files from the studio and, using their art, rearrange and add buttons to the units.

[/column][/columns]

SOLUTION

CATEGORY EXAMPLES

Fun Facts

[list style=”unordered” type=”type7″]
There is nothing more fun than getting to explore layered psd files from all the various studios we get to work with. Some are so impressive (hahaha, but not all).
These prestitials are usually one of several units in any studio’s campaign; other units might include iPad Expand units, skins and site ads.[/list]

Share

Love is a Bracket-field

BRIEF

Create a Facebook Landing Page for Fandango’s Valentine’s Day bracket-type movie contest.

Category = Marketing / Social Media


 

[columns indent=”25″ bottom=”25″]
[column]

CLIENT

Fandango

[/column]
[column]

PROJECT TITLE

Love is a Bracket-field

[/column]
[column]

DESCRIPTION

Facebook Contest

[/column]
[/columns]
[columns indent=”25″ bottom=”25″][column]

ROLES

[list style=”unordered” type=”type18″]
GRAPHIC DESIGNER[/list][/column]
[column]

TOOLS

[list style=”unordered” type=”type18″]
PHOTOSHOP
ILLUSTRATOR
GRAPHIC ELEMENTS
– From client[/list]
[/column]
[column]

LINKS

[list style=”unordered” type=”type7″]
Love is a Bracket-field Facebook
Janda Stylish Script
Title font[/list]
[/column][/columns]

PROCESS

Worked with Fandango’s marketing folks to produce this.
 

SOLUTION

DIGITAL LANDING PAGE

Fun Facts

[list style=”unordered” type=”type7″]
I was especially happy with the stylish-yet-whimsical font I found on www.DaFont.com for the titles. It is by Kimberly Geswain, and is called “Janda Stylish Script“.[/list]

Share

WordPress Website . This One

BRIEF

Freshen up this portfolio site. Use WordPress to make it sing.

Category = Graphic Design / Web


 

[columns indent=”25″ bottom=”25″][column]

CLIENT

Myself

[/column]
[column]

PROJECT TITLE

Marta Victoria’s Portfolio

[/column]
[column]

DESCRIPTION

WordPress Website

[/column]
[/columns]
[columns indent=”25″][column]

ROLES

[list style=”unordered” type=”type18″]
ART DIRECTOR
GRAPHIC DESIGNER
PHOTOGRAPHER
WRITER
WEB MASTER[/list][/column]
[column]

TOOLS

[list style=”unordered” type=”type18″]
WORDPRESS,
DREAMWEAVER,
MYPHPADMIN
PHOTOSHOP,
LIGHTROOM,
ILLUSTRATOR
CANON DIGITAL REBEL SLR[/list][/column]
[column]

LINKS

[list style=”unordered” type=”type7″]
Marta Victoria
WordPress Theme
Inspiration
Host
Laughing Squid
*Courtesy Link
More on WP eCommerce[/list][/column][/columns]

SOLUTION

ANATOMY OF MY WORDPRESS SITE

WordPress is a great tool for designing websites. Statistics put WordPress at about 25% of all sites on the planet. Which means, it’s not just for bloggers any more. Built on a MySQL database frame that’s perfect for managing content, WordPress offers more and more users a place to coordinate their information. From *retail storefronts to engaging portfolios; there’s a theme out there for everyone.

And, as an engine with a back-end that’s constantly being updated; WordPress is ideal for people who want to leave the coding to brainier folks, and get straight to the fun of designing. WordPress themes come in many shapes and sizes; many are free, other “premium” ones can be purchased for reasonable prices. The premium theme for this website is Inspiration. It was purchased for a one-time charge of $35. I have access to the designer for that, too. He writes back, even.

Web design skills are still probably necessary, however, if you want a WordPress site that is going to be more complex than a blogging platform. It is also helpful to have an understanding of how to create web standard graphics, as one or more graphics tend to accompany every post these days.

Setting up a WordPress site is not for everyone, though; and that’s where a good designer comes in. They can help a client get a domain set up, along with a web host. They can recommend themes with the functionality a client requires, and lay out the design according to a company’s style guide. WordPress sites can be self-hosted by that designer, or placed on a testing server, until they’re perfect — then migrated online all at once. This avoids that awkward “under construction” phase.

After the WordPress site is designed, a client can take over; and, with light training, they can maintain that site from then on. I think WordPress is perfect for small business owners — who often have the talent and desire to run their websites — but, being time-starved, need a graphic designer to midwife the delivery of those sites.

Wishing you always-perfect pixels,

Marta Victoria

Share

Website . Visionaire Lighting

BRIEF

Take the current design, and bring the content up to date.
Then freshen it up to match our product guide,
and add a few more sections.

Category = Graphic Design / Web


 

[columns indent=”25″ bottom=”25″][column]

CLIENT

Visionaire Lighting

[/column]
[column]

PROJECT TITLE

Performance in a Whole New Light

[/column]
[column]

DESCRIPTION

Website

[/column]
[/columns]
[columns indent=”25″][column]

ROLES

[list style=”unordered” type=”type18″]
ART DIRECTOR
GRAPHIC DESIGNER
PHOTOGRAPHER
WRITER
WEB MASTER[/list][/column]
[column]

TOOLS

[list style=”unordered” type=”type18″]
DREAMWEAVER
PHOTOSHOP
LIGHTROOM
ILLUSTRATOR
FLASH
CANON DIGITAL REBEL SLR[/list][/column]
[column]

 

[list style=”unordered” type=”type7″]
[/column][/columns]

SOLUTION

WEBSITE

Fun Facts

[list style=”unordered” type=”type7″]
There are literally hundreds of pages to this outdoor lighting manufacturer’s website, with one for every product, project, press release and piece of literature (if you’ll please pardon the onomatopoeia?).
It was created and maintained with Dreamweaver, and much of the coding for it was done by my hand. I also shot the majority of the products pictured, and wrote many of the descriptions.
This site is updated nearly daily with changes and links to the important documents, like cut sheets and sell sheets and IES files — that this company’s Rep force need access to.
The original red of the site was removed, and the inside product sections were color-coded to match the Product Ordering Guide’s Style Guide.
This is not my idea of a great-looking website. It is my idea of a highly-functional website that serves a business-to-business community well.
Now that a healthy majority of the content has been brought up to speed; I would next focus on re-designing it.
[/list]

Share

Aquanaria . Flash Website . Icarus Music

BRIEF

Create and build a website where visitors can hear our music,
though, not download it.
Include notes on each song and the inspirations for them.
Provide links to Icarus Music’s website, and CD purchase points.

Category = Graphic Design / Web / Flash


 

[columns indent=”25″ bottom=”25″]
[column]

CLIENT

Icarus Music

[/column]
[column]

PROJECT TITLE

Aquanaria… Dive In!

[/column]
[column]

DESCRIPTION

Flash Website

[/column]
[/columns]
[columns indent=”25″ bottom=”25″][column]

ROLES

[list style=”unordered” type=”type18″]
ART DIRECTOR
GRAPHIC DESIGNER
WEB MASTER
COMPOSER
with partner, Eddie Freeman[/list]
[/column]
[column]

TOOLS

[list style=”unordered” type=”type18″]
PHOTOSHOP
ILLUSTRATOR
INDESIGN
FLASH MX (Intermediate, 1.0 Action Script)
DREAMWEAVER MX
NUENDO
SOUNDFORGE
GRAPHIC ELEMENT
– fish
[/list]
[/column]
[column]

LINKS

[list style=”unordered” type=”type7″]
Aquanaria Website
Icarus Music
Aquanaria CD on CDBaby
Aquanaria CD Package Design
Aquanaria on Pandora Radio

LINK TO CD POST
[/list]
[/column][/columns]

SOLUTION

WEBSITE

Fun Facts

[list style=”unordered” type=”type7″]
All Flash sites are definitely NOT recommended. They don’t search well, and can’t be seen on many mobile phones.
In 2006, when this site was built, Flash was expected to break wide open search-wise, and was the only solution at the time for allowing web surfers to hear music without being able to download it.
Flash code (1.0) was written by me. Am not currently “up” on Flash 3.0, but could learn it. Am waiting for it to be mobile phone friendly.
Sound effects were dropped in for the buttons, courtesy of Eddie Freeman.
[/list]

Share