Client History: Web Visual / UI Design

Senior Web Visual and UI Designer

• Apple Inc., Cupertino CA. December 2009 – July 2011. Visual/UI Designer for a major Apple intranet application, Account Manager. Designed the Visual look and feel, most of the User Interface features, all of the icons, the custom scrollbar and Webkit-styled buttons. Skills employed: Photoshop used for prototyping and designing buttons and icons. BBEdit used to write the CSS2.1, the extensive CSS3, and the xhtml. Worked in a .jsp environment on an Apache jboss server installed on a UNIX operating system. Authored some of the javascript, implemented Spry effects – including "Sliding Panels" and "Accordion". Used jquery for prototyping functionality (converted to the Spry framework we were using, or rewritten to be compatible with Spry).
  Samples shown on request

Web Visual and UI Designer

• Continuing Education for the Bar (CEB), Office of the President, University of California. UCLA, CA. March 2008 – December 2009. Prototype page and graphic design for the new Continuing Education for the Bar (CEB) website. Primary Graphic UI Designer. (Site has not gone live). Skills employed: Photoshop for comping, Illustrator for interface items such as buttons and icons, HomeSite for coding (css), and Flash for prototype animated graphics.
  CEB Screenshots

Web Frontend Developer

• Chevron Global Marketing, San Ramon, CA. July 2009 – October 2009. Brought on board for the Chevron Global Lubricants redesign site launch and localization of CGL sites for Chevron, Texaco and Caltex regional markets. Skills employed: Photoshop image optimization and slicing, css authoring, xhtml authoring, VSS .asp environment requiring .asp and vb file editing, xml authoring and editing, and javascript authoring and editing. Optimized for FireFox, IE7 and IE6.
  http://www.chevronlubricants.com

Web Visual / UI Designer

• XenoPort, Santa Clara, CA. February - May 2008. Intranet design. HTML, CSS and javascript coding / scripting. Implementation of Environmental Health section. Creation of PHP includes for the top and left navigation menus, and footer. Conversion of site from table layout to CSS tableless layout. Top menu uses MooTools slide function. Optimized for IE6. (Intranet: not available for public viewing.)
  www.xenoport.com

Web Visual UI/UX Designer

• Gold Coast Neighborhood Alliance (GCNA), Oakland, CA. April 2008 - Current. Graphic designer and front-end developer for the umbrella Gold Coast community site. Community building and informational site relies extensively on Web 2.0 technologies: MooTools menu and UI functionality used throughout the site. DOM based xhtml with CSS2.1 and javascript. PHP server pages and forms. CSS based tableless layouts tested for reliability across major modern browsers and operating systems.
  www.Goldcoastcommunity.com

Web Visual UI/UX Designer

• Lakeside Apartment Neighborhood Association (LANA), Oakland, CA. April 2007 - April 2008. Graphic designer and front-end developer for one of the prestigious Gold Coast neighborhood's community organizations. Community building and informational site relies extensively on Web 2.0 technologies: MooTools menu and UI functionality used throughout the site. DOM based xhtml with CSS2.1 and javascript. PHP server pages and forms. CSS based tableless layouts tested for reliability across major modern browsers and operating systems.
  www.oakland-lana.org

Frontend Developer

• engage.com, San Mateo, CA. September-October, 2007. HTML, CSS and javascript development for the Engage.com website. Responsible for CSS and HTML composition and design, builds, testing and content management. (Site no longer active)
  www.engage.com

Webmaster / Project Manager

• DoveBid.com, Foster City, CA. February-April, 2007. High volume, international industrial auction site with live, internet and private treaty auction formats. Designed mini-sites for individual auctions. Maintained home and auction sites with updates, postings, slideshow photo galleries, listings and changes. Posted to dynamically generated asp.NET content management tools in conjunction with content management tools for static HTML. Added inline CSS styles to certain sites. Hard coded HTML for redesigned portions of the home site. Optimized and sized graphics in PhotoShop. Prepared photo gallery content and incorporated it into .asp template for posting. Implemented an organized system of project management to meet deadlines and to keep site information current. Delivered attentive customer service to Sales reps to assure success in their auction site displays and to make sure that changes were made to reflect up-to-the minute information.
  www.dovebid.com

Frontend Developer

• CNET, San Francisco, CA. January-February 2007. Site launch of the redesigned BNET website, one of the CNET brands. CSS2, xhtml and javascript programming. Worked with a team of developers to finalize the look and feel of styles, push the new design live and to fix bugs. Formatted articles, forms and other existing site components to conform with the new look and feel of the site. Pushed sections live through the proprietary content management tools developed by the BNET backend engineering team.
  www.bnet.com

Graphic / Web Visual Designer

• ART.COM, Emeryville, CA. August-November, 2006. Creation of Flash vector graphics for AllPosters.com Framing Studio. Designed the prototype for photos-into-art site and executed the final art for slicing. Designed the logo for photos-into-art. xhtml with CSS2 coding for photos-into-Art. Graphic design for Banner ads, Landing pages, Emailers, Navigation assets and Icons.
  www.allposters.com
  www.art.com

Web Visual / UI Designer

• METREON (Sony Corporation), San Francisco, CA. January-May, 2006. Graphic Design, UI design, and front-end programming for the redesigned San Francisco Metreon website. Worked with the marketing team and the Creative Director to create an informational site for the Sony Metreon that would maintain the established branding, be fun, showcase retail and eating establishments, theatre venues and the Metreon exclusive, Walk-of-Game. Design and development of prototype pages using PhotoShop and ImageReady, graphics slicing and optimization using PhotoShop, photo selection using Bridge. Client side site coded in HTML, CSS2 and javascript. Framesets were built into the pages featuring slideshows and video clips. Slideshow controls were scripted with javascript, styled with CSS and implemented in pages via forms. Video embedding for various media players and bandwidths were also implemented. (This site has not been live since Sony's sale of the Metreon to Westfield Development in May, 2006).
  Sony METRON site

Print Graphic Deisgner / Webmaster

• Forward Funds, San Francisco, CA. May-June, 2005, and May-June, 2006. Posted and removed information to keep the site current. Updated financial data. Designed prototype pages for future projects and site segments. Site maintenance using PhotoShop, DreamWeaver, HTML and CSS. Emerald Funds database conversion from ASP to PHP after Forward Funds acquisition.
  www.forwardmgmt.com/index.htm
  www.sierraclubfunds.com

Web Visual / UI Designer

• Berkeleyans Against Soaring TAxes (BASTA), Berkeley, CA. May-December, 2004. Grassroots political campaign launched and managed by CNA – Council of Neighborhood Associations for the 2004 election. As an integral member of this campaign, responsibilities included Art Direction for print and web graphics, BASTA site design, logo design, emailer and form design. Responsible for posting all information, graphics, pdfs and articles relevant to the campaign. Kept site current throughout the campaign. This site was coded using HTML framesets, CSS2 styling and javascript for interactivity.
  Domain no longer active

Skills

Software Knowledge

• • Adobe CS5
  • – PhotoShop
  • – Illustrator
  • – Acrobat
  • – DreamWeaver
  • – Flash
  • – InDesign
  • – Fireworks
• • CVS, SVN and CMS systems, Eclipse, VSS, HomeSite, and proprietary
• • BBEdit

Graphics Expertise

• • Advanced knowledge of design principals for Visual Design and User Experience
  • – Solid principals of effective layout and design, honed with years of professional experience
  • – Strong capabilities as a traditional illustrator contribute to unique, well-designed, and well-placed interactive elements such as icons, buttons, menus, wizards, accordions, sliding doors and panels, etc.
  • – Advanced understanding of color theory, typography and effective graphics usage
  • – Template-based design and reusability of design elements to preserve the integrity of the look-and-feel across individual sites
  • – Solid coding knowledge assures the creation of site design that is light-weight, scalable, and easy to maintain into the future
• • PhotoShop and Illustrator: Color correction, Image optimization and slicing, Sprites, Icon design, Digital Illustration, Paths, Masking, Channels, Text handling, Layers, Levels, Curves, Custom blends, Brushes, Duotones, Scalable Vector Graphics (SVG), etc.
• • Web UI design and prototyping: Animated Menus, Buttons, Icons, and Page behavior, Complex functional interactivity using Sliding Doors, Accordions, Carousels, Transitions, Timing, Tabbing, Tooltips (CSS, javascript and HTML title tags), Div and Image swapping, Custom Scrollbars (Webkit), Hover, Active, Focus and Blur states.
• • Image Optimization, Image formatting - .jpg, .gif, .png, .svg. Image target output and browser compatibility
• • Color systems: Hexadecimal, Tridecimal, RGB, rgba, and HSL

Coding and Scripting

• • Standards compliant HTML4, HTML5 and xhtml
• • XML, XSLT, XPath
• • Mobile devices: HTML5, CSS3
• • Embedding: Video, Aural and .swf files.
• • CSS 1, 2, 2.1 and 3. All media types. §508 web accessibility:
  • – Stable tableless layouts – fluid and static
  • – Precise element positioning, stacking, and visibility for dynamic interaction.
  • – Color implementation (using hexadecimal, tridecimal, rgb, rgba and hsl models)
  • – CSS3 Gradients, with browser-specific prefixes and browser support knowledge, including backwards compatibility and IE fixes (conditional comments and hacks)
  • – CSS3 transition and animation techniques, including rotation, fade-ins fade-outs, hover and active states, color changes, size transitions and clipping
  • – Webkit specific rules that can be used for user-selection rules and custom scrollbars
  • – Advanced typography, including CSS3 font embedding, font sizing for screen and print CSS, and the proper use of head, paragraph, list tags, etc. Web-safe font knowledge and sizing strategies for cross- browser and platform compatibility, aural readers, and print output.
  • – Web colors using hexidecimal, tridecimal, and rgb models. Precise color matching, code copying and implementation using a variety of tools, including Apple's DigitalColor Meter
  • – CSS shorthand, grouped selectors, and bullet-proof cascade order.
• • Experience with .jsp and .asp pages
• • Javascript, jquery, spry, mootools. DHTML

Operating Systems and Platforms

• • Apple/Macintosh OSX
• • PC/Windows
• • Basic UNIX

Browsers

• • Gecko based: (Mozilla) Netscape, Firefox, and SeaMonkey
• • Apple: Safari, Windows Safari 4.0
• • Microsoft: IE6, IE7, IE8 and IE9
• • Independent: Opera and Chrome (Google)

Education

• M.A. University of So. Florida. Tampa. Visual Sociology - dual degree Fine Arts/Sociology
• B.F.A. University of California. Santa Cruz