Brian Mangin

Web, Design, UX, Interactive

Smart, hard-working web & design

I'm Brian Mangin, a SF-based web designer with over 14 years' experience in visual design, interactive and UX, creating work that is useful and beautiful. I work with clients large and small, love collaboration, and am passionate about producing high-quality work.

Ticketfly

I worked with online ticketing and promotions company Ticketfly to create a website for their partner Rocky Mountain Entertainment. The home page features a list of all upcoming events with quick access to ticketing and venue information.

Visit Site
I worked with online ticketing and promotions company Ticketfly to create a website for their partner Rocky Mountain Entertainment. The home page features a list of all upcoming events with quick access to ticketing and venue information.

Starting from a site outline I developed wireframes in OmniGraffle, which then were translated into a full visual design.

Starting from a site outline I developed wireframes in OmniGraffle, which then were translated into a full visual design.

I took the wireframes and visual design mockups and integrated them in to a WordPress-powered website that incorporated Ticketfly’s ticketing, e-commerce, media resources and social media sharing tools on the individual event pages and across the site.

I took the wireframes and visual design mockups and integrated them in to a WordPress-powered website that incorporated Ticketfly’s ticketing, e-commerce, media resources and social media sharing tools on the individual event pages and across the site.

The Venues page is custom, and powered by the Google Maps API.

The Venues page is custom, and powered by the Google Maps API.

Blake Little

I created a fresh new website to feature professional photographer Blake Little’s fine art and commercial photography. His old site was Flash-based and hard to update. The new site is built on WordPress, which allows him to maintain the content easily, and has a more flexible structure to accommodate future growth. It has a responsive design that is optimized for a wide variety of mobile, tablet and desktop devices.

Visit Site
I created a fresh new website to feature professional photographer Blake Little's fine art and commercial photography. His old site was Flash-based and hard to update. The new site is built on WordPress, which allows him to maintain the content easily, and has a more flexible structure to accommodate future growth. It has a responsive design that is optimized for a wide variety of mobile, tablet and desktop devices.

The home page is built with a JavaScript Masonry layout to fit any screen size. Information about each photo, including title and category, appears when hovered over.

The home page is built with a JavaScript Masonry layout to fit any screen size. Information about each photo, including title and category, appears when hovered over.

The individual item page has an intuitive next/previous navigation and an expanding tray at the bottom to browse thumbnails.

The individual item page has an intuitive next/previous navigation and an expanding tray at the bottom to browse thumbnails.

Tagged

I developed a new Careers page for the rapidly-growing social discovery company Tagged.com. Custom photography was integrated into a multi-panel, single-page responsive design. I used jQuery and Ajax to dynamically pull current job data into the page.  The page is organized so that job seekers can browse beautifully presented information about the company at their own pace, or quickly jump to the list of available positions and apply online.

Visit Site
I developed a new Careers page for the rapidly-growing social discovery company Tagged.com. Custom photography was integrated into a multi-panel, single-page responsive design. I used jQuery and Ajax to dynamically pull current job data into the page.  The page is organized so that job seekers can browse beautifully presented information about the company at their own pace, or quickly jump to the list of available positions and apply online.

Each section of the Careers page had a consistent yet unique treatment and layout.

Each section of the Careers page had a consistent yet unique treatment and layout.

CEIP

California Emerging Infections Program (CEIP) needed a new website that was easy to maintain, good-looking, and able to present a lot of text-based information well. The design of the new site is clean, with attention to typography, and the structure is flexible to accommodate future growth. The responsive design is optimized for a wide variety of devices.

Visit Site
California Emerging Infections Program (CEIP) needed a new website that was easy to maintain, good-looking, and able to present a lot of text-based information well. The design of the new site is clean, with attention to typography, and the structure is flexible to accommodate future growth. The responsive design is optimized for a wide variety of devices.

I worked with CEIP’s staff to organize the website’s program information, blog posts and other content. Wireframes were then built in Adobe InDesign.

I worked with CEIP’s staff to organize the website’s program information, blog posts and other content. Wireframes were then built in Adobe InDesign.

The home page features a lot of content organized neatly, including latest news, Twitter feeds and mailing list signup.

The home page features a lot of content organized neatly, including latest news, Twitter feeds and mailing list signup.

The site has a robust search functionality. The search results page has the search terms highlighted for easy findability.

The site has a robust search functionality. The search results page has the search terms highlighted for easy findability.

One Kings Lane

I worked with flash sales site One Kings Lane to create working prototypes for usability testing new product features, UI elements and user workflows. In collaboration with product and design teams we rapidly iterated medium- and high-fidelity functional prototypes.

Pictured is the original design of the introductory screen / tutorial for first-time users of the Vendor Portal.

Hi-fi prototype.

The vendor dashboard, with modifications from the original design.

A high-fidelity prototype of the vendor inventory screen. The page was designed to provide realistic interaction and feedback for usability testing.

One of the more complex pages we created, with image handling functionality and interactive form elements.

Niko & Uli

I developed an elegant single-page site to complement the beautiful graphics and portfolio from award-winning German creatives Ulrich Lützenkirchen and Nikolaus Ronacher. An easy-to-use jQuery-driven navigation has a UI that encourages site exploration.

Visit Site
I developed an elegant single-page site to complement the beautiful graphics and portfolio from award-winning German creatives Ulrich Lützenkirchen and Nikolaus Ronacher. An easy-to-use jQuery-driven navigation has a UI that encourages site exploration.

An intuitive slideshow modal features print, video, interactive and multimedia content beautifully.

An intuitive slideshow modal features print, video, interactive and multimedia content beautifully.

BC Home

I created a clean and modern UI for this B2B wholesale e-commerce site. The home page features a big product slideshow along with upcoming events.

Visit Site
I created a clean and modern UI for this B2B wholesale e-commerce site. The home page features a big product slideshow along with upcoming events.

The individual product page features multiple product views, social sharing, easy access to e-commerce functions, and related products.

The individual product page features multiple product views, social sharing, easy access to e-commerce functions, and related products.

In addition to shopping cart tools, I built a custom account creation tool on top of the WordPress backend.

In addition to shopping cart tools, I built a custom account creation tool on top of the WordPress backend.

The About page features a distinct page template, one of several I created for the site.

The About page features a distinct page template, one of several I created for the site.

MN Orchestra

I built the Minnesota Orchestra eTour 2010 website to have maximum impact in the short time the tour was on the road. I polished the website’s look and feel with dynamic jQuery-driven menus and pop-up boxes to deliver information quickly and intelligently. The WordPress content management system, which I heavily customized, allowed for easy updates from the road with multimedia features, social media tools and search-engine-friendly publishing.

I built the Minnesota Orchestra eTour 2010 website to have maximum impact in the short time the tour was on the road. I polished the website's look and feel with dynamic jQuery-driven menus and pop-up boxes to deliver information quickly and intelligently. The WordPress content management system, which I heavily customized, allowed for easy updates from the road with multimedia features, social media tools and search-engine-friendly publishing.

I began the UI design process by creating a series of low-fi wireframes, mocking up the main templates and indicating the style and type of content in each screen area.

I began the UI design process by creating a series of low-fi wireframes, mocking up the main templates and indicating the style and type of content in each screen area.

The logo & identity system I created for the eTour, featuring a flexible dotted line path feature that can be moved around to draw the eye to other elements on the page. The background image echoes elements of the logo.

The logo & identity system I created for the eTour, featuring a flexible dotted line path feature that can be moved around to draw the eye to other elements on the page. The background image echoes elements of the logo.

The Press section home page.

The Press section home page.

A detail of the Amsterdam portion of the tour, with an expandable event information box.

About Brian Mangin

  • Technology and Tools

    • Front- and back-end web technology: HTML5, CSS3, jQuery and other JavaScript libraries, Ajax and PHP/MySQL
    • Design tools including Omnigraffle and Adobe Creative Suite's Photoshop, Illustrator, InDesign and Dreamweaver.
    • Experience with open-source and commercial tools for website administration, analytics, e-commerce, content management, social media, email marketing, project management and multimedia. Have an ongoing passion for learning new and emerging technologies.
  • Design and Marketing:

    • Well-versed in best practices of user experience including visual design, user interface design, interaction design, e-commerce design, and mobile and responsive design.
    • Familiarity with online marketing strategies for social media marketing, mobile, search engine marketing, online advertising and email marketing.
    • Experience in art direction, design, photography, video and multimedia. Past experience in print design includes identities, logos, marketing collateral, apparel, signage and brand guidelines.
  • Project Management and Collaboration:

    • Manage numerous simultaneous projects collaboratively in fast-paced environments.
    • Effective communication with a wide range of professionals including engineering, product, marketing, design, public relations and development staff.
    • Goal-oriented; engage with clients and partners through all stages of the design process to ensure that projects meet requirements, key metrics of success and overall business goals.

I look forward to hearing from you!

Back to Top