web design

July 2017

Photography Portfolio


Jacob Cabral is a photographer focused on capturing urban landscape, portraits, and events. In addition to his Instagram profile, he needed another platform where he can showcase his work to clients seeking a photographer and artists looking for other creatives to collaborate with.





Launch →


Tasks:

  • design + dev
  • CMS (MODX)
  • logo design

Tools:

  • HTML + CSS
  • Javascript + jQuery
  • Adobe Illustrator


Avoiding The Flash

We sifted through tons of photos, gathered the ones that best captured his artistic style and emphasized his technical skills, then categorized them in a manner that would make sense to viewers. It was important to direct the attention towards the photos and nothing else, so the design revolved around being minimal and responsive, while still communicating the photographer’s personal taste.



Having the ability to expand and contract as the body of work fluctuates was also an essential element for the portfolio. We began to address this early on by mapping out the branching of categories, albums, and how people would navigate through and in-between them. A grid structure was applied to accommodate creation of additional subcategories, the resizing thumbnails, and to maintain a clean organized appearance.



Configuring Grid Layout
Watermark/Logo Design


jacobcabral.com

Sept 2016

Pacific Motorcycle Training


Start Your Engines...

Pacific Motorcycle Training (PMT) is a school serving multiple locations around the Bay Area where aspiring folks to experienced riders can sign up for courses offered, and receive their DMV DL389. The school was in need of re-establishing their ow­n separate identity after acquiring the business from its previous owner.





Launch →


Tasks:

  • design + dev
  • user research
  • wireframe + prototype
  • CMS (MODX)
  • video editing
  • copywriting

Tools:

  • HTML + CSS
  • Adobe XD
  • Adobe Premier
  • Adobe Photoshop


Initializing The Redesign

I began with interviewing fellow students on their experience finding PMT’s website online, navigating through it, and the sign-up process. The responses ranged from “easy” and “decent” to “the worst thing ever”. Since the business initially needed a quick fix to get things running, I proceeded to clean up their Wix website, organize its content, then work with a consulting service that provided analyses to improve their SEO.



First Redesign - Home Page


Round II

The increase in enrollments presented a new problem: students were struggling to find the locations and respective classroom causing them to be late or miss class completely. I took this opportunity to move away from Wix in order to have full control of the website. Before starting from scratch, I met with the business owners and instructors to address issues, contemplate possible solutions, as well as discuss future plans of the company.



Mapping pages & elements
Reorganizing FAQs content


The final result was a faster, cleaner website with a more guided and contained experience. Embedding large maps ensures visibility and emphasizes their importance, while giving each of the locations their own page allows the site to easily accommodate the company’s growth and expansion. Structurally, the entire site is built on HTML and CSS to increase support and accessibility along PMT’s broad target audience spectrum.



Final Design - Home Page
Final Design - Courses Page
Final Design - Prototype


pacificmotorcycletraining.com

April 2015

Cortezano Weddings

Cortezano Weddings is a floral arrangement studio that started in February 2009 in South San Francisco, California. Seven years later, the founder decided it was time for the floral business to flourish further. I was asked to design and launch a website for the studio to inform potential clients about their services and display samples of their work.





Launch →


Tasks:

  • design + dev
  • wireframe + prototype
  • CMS implementation

Tools:

  • HTML + CSS
  • Adobe Photoshop


Establishing Elegance

The founder and I discussed the general procedures of the business as well as demographics of previous, past, and ideal clients. He provided files of the logo and photos (most of which were professionally taken), and was open-minded with the art direction. Having little foundation to start with meant having a million possibilities to consider. We determined the first mock to be too overwhelming against photos of already frilly floral arrangements and accessories.



For the next revision, I limited the color palette and amount of embellishments for a simplified yet sophisticated look; the initial idea to capture the viewer’s attention with a hero image of an arrangement by Cortezano Weddings remained. With a large collection of photos to include—from samples of work to events—I reconsidered which would best represent the studio. Instead of displaying arrangements with a typical white background, I selected more editorial compositions that better created a mood.



Mock 1 (scroll)
Final (scroll)





cortezanoweddings.com



etc. projects


Video


Cardinal Walk 2018


sony and nikon cameras, Adobe Premier, Adobe After Effects

Captured the 2018 Annual John Etchemendy Cardinal Walk as part of Stanford's BeWell program. The main goal was to highlight the event and put together a short video that may be shared on the web and social media. To further support the event, I also designed the collectible t-shirt for this year:


Brainstorm
Final Design


Music by Wavves


S10 ProClean


sony 6000 camera, Adobe Premier

Made a short video to accompany the Shopify website I redesigned for S10 ProClean. It advertises their camera lens cleaner demonstrating its portability and ease of use. They wanted it to appeal to a younger audience such as college students majoring in film. “Playful” and “fun” are a couple descriptions the crew associates with their product, so I went with an adventurous direction taking place in the northern coast of California; starring a mid to late 20s photographer.


Music Clips


sony 6000 camera, Adobe Premier

A music video composed of clips I recorded from outdoor jam sessions by a group of friends.

Music by Dr. Dog



Digital Art



Sketch
Version 1 (b&w)
Version 1 (color)
Version 2 (b&w)
Version 2 (color)

Two variations of a logo I designed for Pacific Motorcycle Training. While researching other motorcycle program logos, I found that imageries of a sportbike were a common identifier. Not only did the logo have to easily and visibly communicate motorcycle school, but it also needed to stand out from the rest of the competition. In order to achieve this, I made use of the school's name and integrated the sportbike graphic within it.

The client preferred the colors grey and orange in addition to having an overall modern look, so I went with a slate grey that was dark enough to be legible and contrast with a bright orange, helping it pop.


“Pinkshake”


adobe photoshop

Illustration


“Kelis”


colored pencils, pan pastel

Untitled

charcoal pastels



hello, hello

My name is Nina—

I explore the multi-faceted world of design! From drawing to development, I thrive on being hands-on and learning throughout the process. I’m inspired by passionate individuals and motivated by interactive experiences. Other activities that keep me sane include watching live music, running outdoor trails, and cruising along the coast on my motorcycle.

Based in Portland and the Bay Area.

Get in touch: nina.acayan@gmail.com