Left Aligned Design for Web and UX

Cafe Soleil Portfolio Piece

Overview

work in progress

From a Chef to Her Patrons

Please note that this site uses stock images and Lorem Ipsum. This is an on-going project, but will be finalized soon with custom images and appropriate copy.

Cafe Soleil is a wonderful haven in the Madrona district of Seattle. A holdout to urban expansion, Cafe Soleil has been in business for over 20 years. Serving Ethiopian cuisine and brunch on the weekends, Cafe Soliel remains an oasis in the sprawl.

The site for Cafe Soleil introduces some new tools as my second project. This site is meant to attract local customers in a less-travelled district. With a French name and serving Ethiopian cuisine, I felt the branding needed to reflect a more rustic font in both the copy as well as imagery. Macondo is the font used in the logo, giving the French name a hand-painted feel. Caudex is the font used for the headings along with Josifin Sans for the body copy. The Caudex serves as a strong title font with handwritten accents, particularly in the Menu section. The burgundy and dark grey colors reinforce the bold feel of the Caudex headings. Josefin Sans serves as a contrast to the headings, relieving the eye of the intentional boldness and increasing readability.

Highlights

  • spotlight 1
  • spotlight 2
  • spotlight 3
  • spotlight 1
  • spotlight 2
  • spotlight 3

Flexslider

The Flexslider feature allows a carousel image display that can be browsed by the user. I use a jQuery plugin produced by Woo-Themes. On a desktop or laptop, controls appear as the cursor hovers over the images. If you are using a touch-screen device, feel free to swipe the image above.

My projects omit the controls in order to create a continuously rotating banner, but the Flexslider controls are always available on request.

animated events

Animated Events

With the use of jQuery events and CSS3, animated transitions are easy to implement. Not to be overstated, I feel that animated events are meant to augment the user experience. Primary uses of animated events include smooth scrolling and highlighting links or calls to action.

Static and stagnant websites have an unfriendly, ‘robotic’ feeling. My goal for designing these sites is to give the user an implicit understanding and response to navigating the site. Visual cues, like animated transitions, are a core addition to an embedded user experience.

parallax

Parallax

Parallax gives the website depth with different foreground and background scrolling speeds. The difference in speed can help separate one section from another and can be a subtle cue for the user to compartmentalize various pieces of information. It can also be appreciated as a visually pleasing way to scroll through the site.

My current jQuery plugin for this effect is Parallax.js. But I am searching for new parallax solutions as well. Parallax.js will not run on iPhone or Android phones. Instead, I replace the scrolling background image with an appropriate static image, with all other functions fully intact.

About Me

Who am I...?

Myself, I’m a native north-westerner who has made Seattle my home for the past ten years. If I’m not building websites, you can find me somewhere outside or perhaps wedding planning as of late.

I’ve received a broad foundation for web design at Seattle Central College. My current ambition is to build solid, efficient coding practices. Further, there is an increasingly important focus on user research including sound logic of information architecture and interaction design.

But enough about me, how can I help you?

marco@left-aligned.com

425.830.8119

Contact Me