Project

Nocturnalia

Online e-commerce site dedicated to selling stickers, cups and other items with nocturnal-looking designs. The project was built on WordPress and, for this project, I customized a theme so it would be captivating and mysterious, while feminine and inviting.

This online store features a clean design, a vertical navigation bar, a FAQ section, and Google Maps to locate the store.

Project information:

Project Type: WordPress Theme Customization
Project Client: Alejandra Moreno
Project Year: 2017
Project Website: https://nocturnalia.xyz

Home page

The home page is, from the start, a page where the products' images are the central piece. Big images with high contrast give these cups and accessories a distinct ambiance. Only the name and price is shown below the image until the client hovers over it (as can be seen on the last image). The navigation menu on the side makes the website different from what is usually seen these days in modern websites. The menu includes an About page, a FAQ page, a Contact page, the Cart page and, finally, a login or logout option. There are also links to Nocturnalia's social media accounts.

Product page

The minimalist approach on the product page allows the client to focus on the product's characteristics. When hovering over the image, the client can see the picture in more detail thanks to a zoom which is enabled in the main product page. Under the main product, five other gorgeous items are presented to the customer.

About page

The about page features a picture of Alejandra Moreno, the founder and designer of all of Nocturnalia's items and a bit of backstory, revealing what inspired her to start drawing and creating these designs.

FAQ page

The FAQ page contains some answers to the most common questions clients ask before purchasing Nocturnalia's designs.

Contact page

The contact page features a Google Maps with downtown Toluca, Mexico, and a two column layout below it. This two column layout contains, on one side, the store's address, their email, and their phone number; on the other side, it has a contact form with a validation field to help filter spam.

Checkout page

After the client has decided to make a purchase, they will be presented with the checkout page, which contains stylish validation fields. The two-column layout has the shipping and billing information on the left and the cart's overview on the right. An integration showing the cart's weight is also available.

Other projects

Get Started

Your best clients are waiting to find you.
HIRE ME
hello world!
envelope

We use cookies to give you the best online experience. By agreeing you accept the use of cookies in accordance with our cookie policy.

Privacy Settings saved!
Privacy Settings

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. Control your personal Cookie Services here.

These cookies are necessary for the website to function and cannot be switched off in our systems.

In order to use this website we use the following technically required cookies
  • wordpress_test_cookie
  • wordpress_logged_in_
  • wordpress_sec

For perfomance reasons we use Cloudflare as a CDN network. This saves a cookie "__cfduid" to apply security settings on a per-client basis. This cookie is strictly necessary for Cloudflare's security features and cannot be turned off.
  • __cfduid

Decline all Services
Accept all Services
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram