[day] photography by David Pacheco Garcia

Context/Background

[day] photography Overview

Day Photography is a month long project to create a responsive photography e-commerce website using Webflow.
‍

Responsibilites

Used Webflow to create a responsive e-commerce website.
Designed a brand identity.
Designed mockups and prototypes.

Project Goals

Things to accomplish.

How might we create a photography e-commerce experience?

Bridge the gap between designer and developer by understanding the language that developers use and the technical limitations of front end development
Use and understand Webflow as a means to enhance current knowledge of HTML, CSS + Javascript.
Familiarize and work with a CMS.

Problem/Challenge

How might we..?

How might we create a photography e-commerce experience?

Solution

[day] photography

Bringing the beauty of national parks to your screen, [day] photography combines a portfolio website with an e-commerce experience.

[day] photography for desktop and mobile platforms. [02]

Scroll for full process
⇩

Feature Ideation

EPIC user stories!

Using Epics and User Stories helped prioritize which aspects of the e-commerce experience needed to be designed. Below are some the examples.
‍

Epic + user story ideation examples. [03]

User Workflows

Navigating through user journeys.

Based on the Epics and User Stories, a workflow was established of someone navigating through the main parts of the site.

User workflow. [04]

Product Style Guide

Logo

Day Photography didn't have any assets available to use. As a result, a logo and brand identity was created to generate future design decisions.
‍

Logo Inspiration

Popular user interface iconography used by industry leaders in the field of photography was used as initial inspiration for generating the visual identity of a logo.

"Framing" - a photography principle, influenced the logo design.
"Metering Mode" icons and "viewfinder" marking used in camera user interfaces had a similar design language that could be used as a mark for the final logo.

A "hand frame." [05]
Metering mode icons. [06]
Viewfinder graphics. [07]

Final Logo

Stylized as [day] photography, the logo uses brackets as a call-back to various photography iconographies.
Montserrat bold is used to place emphasis on "day" to make the logo visually unique. Montserrat regular is used on the second portion of the logo for a professional appearance.
The wider kerning and geometric sans-serif font helps the logo and overall brand feel modern and professional.
The logo can also be created using regular keyboards - [day] photography - making the logo usable in a lot more instances.
A smaller "mini" version of the logo is created for instances where a squared off and smaller version of the logo is needed i.e. favicon.

[day] photography main logo. [08]
[day] photography simplified logo. [09]

Website Design Inspiration

Just like the logo, various concepts and elements found within the design language of photography are barrowed for inspiration.

Layout design is reminiscinent of vintage postcard design with horizontal 50/50 splits. The mobile version having a vertical modification to this.
Full screen images with minimal text.
Main colors are kept monochromatic to be unobtrusive and professional. The emphasis being places on the photo imagery.
Borrowed from the logo font, Montserrat was used as the main font.

Typography

Moodboard

Various popular photography artifacts and
[day] photography brand identity application. [10]

Sketches

Putting pen to paper.

Having a complete style guide, quick sketches exploring the websites look and feel on a desktop and mobile screen were explored.
‍

Key

† Anything delineated in red is an interactable element.

Desktop Version

[day] photography desktop sketches. [11]

Mobile Version

[day] photography mobile sketches. [12]

Early design moves.

Full screen and 50/50 split screens are used to maximize the spaces dedicated towards displaying the artwork.
Legacy photography artifacts - postcards, polaroid photographs - are used to generate and explore possible interface layouts.
Menu items and interaction elements are kept to icons or minimal text to not interfere with the viewing experience.

Wireframes

Digitally manifesting.

Sketches are then translated into quick digital mockups.

Screen layouts are given consistent margins and ratios are established.
Text elements are given sizes as well as weights.
Navigation elements and information architecture are given more consideration to simplify the user experience.
UI elements begin to take shape as well as UI effects.

[day] photography desktop wireframes. [13]

[day] photography mobile wireframes. [14]

Final Product

Home Page

The desktop and mobile version of the home screen have large slideshows that fill the screen to showcase the photography/artwork.

The menu icon, located on the upper right corner of the screen, uses the bracket motif - [ ] - used in the main logo for design consistency.

Menu + Menu Drawer

The menu drawer with a transparent background on the desktop version fills 50% of the screen while the mobile version uses the entire screen. This mimics the use of manual filters in photography as you can still see the background.

Information Architecture is kept as simple as possible to keep the user interested in viewing the products.

Shop

A large splash image with a mockup of how the artwork can be displayed in a home setting is used to help the user visualize the products better.

The navigation bar is pushed to the top of the screen to be unobtrusive and not take away from the main part of the page.

Product Page

Transitions mimic slideshows - another form of older photography - and offer a bit of depth by being timed at different intervals as they slide to the left when the page is done loading.

Checkout + Cart

The checkout process experience is minimal to make it as seamless as possible.

With so many elements on screen, the cart has its own pop-up screen and dims away the background. Similar to the menu drawer.

Design Consistency

Other pages follow the same design language - i.e. "About" page.
‍

Reflections + Conclusion

Lessons Learned

Webflow greatly accelerated my coding knowledge and was able to make use of my already existing design principles.
Webflow and coding in general is very similar to how Revit, a 3d architecture program, operates.
Creating a brand identity or having one to work with, greatly increases your efficiency.
Setting up and working with a Content Management System (CMS) greatly increases efficiency and helps in hand-off a project. This helps the client or someone who will update the site after your hand-off.
Gaining coding and front-end development knowledge helped understand the limitations of certain digital experiences. This knowledge can also be used to improve my communication with developers.
Linking the domain to google analytics informed be about the devices people access a website like this from. From a designer point of view, this can help you prioritize which platform you want to design for - saving the business on resources.