Sabre Airline Prototype

Designed and developed a responsive skin for the Sabre Airline Solutions prototype.

• Client: Sabre
• Date: Summer 2014
• Skills: UX, Photoshop, HTML5, CSS3, media queries, javascript

Sabre Airline Prototype

Designed and developed a responsive skin for the Sabre Airline Solutions prototype.

• Client: Sabre
• Date: Summer 2014
• Skills: UX, Photoshop, HTML5, CSS3, media queries, javascript

Sabre Airline Prototype

Designed and developed a responsive skin for the Sabre Airline Solutions prototype.

• Client: Sabre
• Date: Summer 2014
• Skills: UX, Photoshop, HTML5, CSS3, media queries, javascript

Travelocity iOS7 Mobile App

Design that I worked on for the Travelocity iOS7 mobile app.

• Client: Travelocity
• Date: Spring 2013
• Skills: UX, Photoshop, iOS Interface Builder

Travelocity iWannaGo Contest

Developed the iWannaGo Contest responsive web microsite that integrated video, user photos and social media.

• Client: Travelocity
• Date: Spring 2014
• Skills: HTML5, CSS3, jQuery, media queries

Travelocity Mobile Web: Home

Designed and developed the UI for the redesigned Travelocity Mobile responsive website.

• Client: Travelocity
• Date: Fall 2013
• Skills: UX, Photoshop, HTML5, CSS3, jQuery, media queries

Travelocity Mobile Web: Flights

Designed and developed the UI for the redesigned Travelocity Mobile responsive website.

• Client: Travelocity
• Date: Fall 2013
• Skills: UX, Photoshop, HTML5, CSS3, jQuery, media queries

Travelocity Mobile Web: Hotels

Designed and developed the UI for the redesigned Travelocity Mobile responsive website.

• Client: Travelocity
• Date: Fall 2013
• Skills: UX, Photoshop, HTML5, CSS3, jQuery, media queries

American Express Concept

Designed travel concept for American Express.

• Client: American Express
• Date: Spring 2011
• Skills: Photoshop

Shopping Scout Flow

Designed the mobile UX flow for Shopping Scout

• Client: Engage3
• Date: Summer 2014
• Skills: Photoshop, Visio

Travelocity Checkout Flow

Designed the UX flow for Travelocity flight checkout.

• Client: Travelocity
• Date: Spring 2011
• Skills: Photoshop, Visio

Travelocity Hotel Wireframe

Designed the UX wireframe for Travelocity hotel checkout review.

• Client: Travelocity
• Date: Spring 2011
• Skills: Photoshop, Visio

Shadow with lifted corners

Everyone knows how to add a shadow to a box, but here's how to create one with lifted corners with CSS. Have fun and manipulate the values to suit your design. However, pay close attention to the stacking order. The pseudo classes can cause grief. Some solutions use the transform:rotate() attribute, but I think the transform:skew() is more natural.

HTML

<div class="box">
   <span class="shadow"><img src="westies.jpg" alt="westies" /></span>
</div>

CSS

.box { border:1px solid #3d3d3d; margin:0 auto; }
.box span { display:block; } 
.box img { display:block; width:100%; background:#fff; padding:5px; } 
.shadow { position:relative; display:block; z-index:1; } 	
.shadow::before, .shadow::after { position:absolute; bottom:.35em; left:.25em; width:50%; height:20%; max-width:50%; content:""; box-shadow:0 .75rem .25rem rgba(0,0,0,.3); -webkit-transform:skew(-3deg,-2deg); transform:skew(-3deg,-2deg); z-index:-1; } 
.box.shadow::after { right:.1em; left:auto; -webkit-transform:skew(3deg,2deg); transform:skew(3deg,2deg); }

Quote box with lifted corners

Now let's make a quote box and apply the lifted shadow technique from above. However this shadow must be a solid color since we can't make a transparent, fuzzy shadow on the pointer. If you prefer round vs. square corners, just add your own border-radius attribute.

HTML

<div class="box shadow">
   <div class="quote">Looks good, works well!</div>
</div>

CSS

.box.shadow::before, .box.shadow::after { box-shadow:0 .75rem 0 #e3e3e3; }
.quote { position:relative; background:#deb887; padding:1rem 1rem .75rem; color:#fff; font-size:1.4rem; text-align:center; } 
.quote::before, .quote::after { position:absolute; content:' '; width:0; height:0; } 
.quote::before { right:2.85em; bottom:-1em; border:.5em solid; border-color:#e3e3e3 #e3e3e3 transparent transparent; } 	
.quote::after { right:2.65em; bottom:-.95em; border:.55em solid; border-color:#deb887 #deb887 transparent transparent; } 

Ribbon banner rotated and skewed

Here's a pure CSS ribbon banner, and it's rotated + skewed too.

HTML

<div class="banner ribbon">
   <span class="ribbon-content">A Neat Banner</span>
</div>

CSS

.banner { width:90%; margin:-1em auto 2.5em; font-size:2em; font-family:Georgia, serif; line-height:1; text-transform:uppercase; z-index:1; -webkit-transform:skew(-5deg) rotate(-5deg); transform:skew(-5deg) rotate(-5deg); -webkit-backface-visibility:hidden; }
.ribbon { position:relative; background:#44758d; box-shadow:0 .5em 0 -.25em rgba(68,117,141,.4); padding:0 .5em .1em; color:#fff; text-align:center; } 
.ribbon::before, .ribbon::after { position:absolute; display:block; content:''; border:.75em solid #44758d; z-index:-1; } 
.ribbon::before { top:-.5em; left:-1.75em; border-right-width:2.5em; border-left-color:transparent; } 	
.ribbon::after { bottom:-.5em; right:-1.75em; border-left-width:2.5em; border-right-color:transparent; } 
.ribbon-content::before, .ribbon-content::after { position:absolute; display:block; content:''; border-style:solid; }
.ribbon-content::before { top:-.5em; left:0; border-width:0 0 .5em 1.5em; border-color:transparent transparent #1e4d64 transparent; }
.ribbon-content::after { bottom:-.5em; right:0; border-width:.5em 1.5em 0 0; border-color:#1e4d64 transparent transparent transparent; }