Prenta

Prenta is the commercial name for a digital printing company Copias Orense S.L., a local industrial reprography in Madrid. The objective of creating a new brand was to develop a coherent identity system for shopping experiences, both in the physical store and online.

My role

Branding and corporate identity
Web design
Responsive
UI / UX
Collateral design
Marketing design

Completed

2019

Index

  1. Branding and corporate identity
    1. Naming
    2. Corporate identity
  2. Website
    1. Creating the User Experience (UX)
    2. Process
    3. The result

Branding and corporate identity

Naming

Creating the brand name

The methodology used when searching for a name was to try to make the name original, exclusive, unique, short and to differentiate itself from competitors. Also, the connotation of the availability of the ‘internet domain’ had to be added.

After analyzing the wide competition and observing that most of their names contain words such as ‘print’ or ‘printing’, we decided to build the name in Spanish but that it maintain a sophisticated tone such as the use of English words in Spain.

The result

After several proposals we decided on ‘prenta’, a commercial name created from a representative word such as ‘imprenta’. To which the syllable ‘im’ has been removed, resulting in a two-syllable name with great sonic strength.
With this, we achieve that clients have a solid and positive perception of the company.

Corporate
identity

Breakdown and justification of the logo

The corporate identity consists of two elements: the logo or wordmark and the registration mark.

The logo is inspired by the ‘movable type’ used in the origins of the modern printing press.

Style and attributes

  • Modern
  • Digital
  • Elegant
  • Contemporary
  • Clean
  • Compact
  • Professional
  • Consistent

Fonts

Nevis

It is an elegant bold sans-serif font. The choice of this font was based mainly on the weight and geometric shape of the letters ‘R’ and ‘N’ over the total set of letters. Also, a small modification was added to the letter ‘N’.

Roboto

It is a modern sans-serif font developed by Google. This typeface was chosen for its typographic qualities such as the diversity of styles and thickness, for being freely licensed and for its similarity to the logo font. This font is used throughout the website and will also be used as a corporate font related to collateral design.

Corporate
colors

The corporate color palette for Prenta focuses on sophistication and usability. It divides into two parts: the logo and the web colors.

Logo colors

The black color provides power and strength, and also helps to reinforce the logo design and its relationship with the origins of the modern printing press, alluding to black ink. White, being the most perfect color, provides purity.

  • Black

    RGB: R 51 / G 51 / B 51
    CMYK: C 82 / M 78 / Y 69 / K 45
    HEX: 333333
    PMS: Black C

  • White

    RGB: R 255 / G 255 / B 255
    CMYK: C 0 / M 0 / Y 0 / K 0
    HEX: FFFFFF

Website colors

As in the logo, black and white were used as primary colors. Also, dark and light gray ranges were used that work as secondary colors, creating harmony and contrast.

  • Black

    RGB: R 51 / G 51 / B 51
    HEX: 333333

  • Gray tone 1

    RGB: R 66 / G 66 / B 66
    HEX: 424242

  • Gray tone 2

    RGB: R 127 / G 127 / B 127
    HEX: 7f7f7f

  • Gray tone 3

    RGB: R 214 / G 214 / B 214
    HEX: D6D6D6

  • Gray tone 4

    RGB: R 214 / G 214 / B 214
    HEX: F0F0F0

  • Gray tone 5

    RGB: R 214 / G 214 / B 214
    HEX: F7F7F7

  • White

    RGB: R 255 / G 255 / B 255
    HEX: FFFFFF
Finally, the shades in blue, green, red and yellow refer to everything related to the ‘Call to Action’.

  • Blue

    RGB: R 0 / G 112 / B 201
    HEX: 0070c9

  • Green

    RGB: R 0 / G 121 / B 65
    HEX: 007941

  • Red

    RGB: R 204 / G 31 / B 45
    HEX: cc1f2d

  • Yellow

    RGB: R 255 / G 193/ B 7
    HEX: ffc107

Website

UX / UI

Creating the User Experience (UX)

After learning the objectives of the website, determining the general user experience and the necessary pages, several brainstorming sessions were held to create an initial sketch of the web map and structure design to solve the information architecture.

Low fidelity wireframes

We proceeded to digitize the sketches to continue refining the UX and the information architecture of the website.
Home page
Lo-Fi Wireframe
Product category page
Lo-Fi Wireframe
Product page
Lo-Fi Wireframe
FAQs page
Lo-Fi Wireframe
Print templates page
Lo-Fi Wireframe
Shipping and returns page
Lo-Fi Wireframe
Contact page
Lo-Fi Wireframe
Custom budget page
Lo-Fi Wireframe

High fidelity wireframes

We add fidelity to wireframes with samples of images, colors and texts. Throughout the process, concepts were reviewed, and we continued to insist until the pages were correct.
Home page
Hi-Fi Wireframe
Product category page
Hi-Fi Wireframe
Product page
Hi-Fi Wireframe
FAQs
Hi-Fi Wireframe
Print template page
Hi-Fi Wireframe
Shipping and returns page
Contact page
Custom budget page
Hi-Fi Wireframe

The result

The final website reflects a contemporary and professional design, while providing a good way for the user to navigate through the entire online store. It includes a header with a ‘mega menu’ navigation menu, a cart preview, a direct access to the user account and a search engine. It also contains a footer connected to everything related to customer service, contact and legal notices. Also, the design is totally ‘responsive’.

Home page

The home page of the website presents a header mainly designed to give truth to the website and stimulate the user to make a purchase, direct access to each category of products, a selection of featured products and a subscription section for the newsletter.

Desktop

Tablet

Mobile

Product category page

Each product category page provides a brief description of the type of products it contains and direct links to each product to configure and order. Each product is shown by a product image, the product title and a price/quantity ratio.

Desktop

Tablet

Mobile

Product page

The product page consists of a product title, a brief description with a few descriptive phrases, a product image with an image gallery, product configuration using buttons, a section for requesting help and information on the services performed together with the products, a few simple buttons to share the page, a collapsible content panel that includes product information and settings for printing, and finally, a section on recommended products.

Desktop

Tablet

Mobile

Shipping and returns page

Information about shipping and returns is divided by tabulated content tabs.

Desktop

Tablet

Mobile

FAQs page

This page is presented with a collapsible content panel with images, links, and texts to meet the needs of users for help and questions.

Desktop

Tablet

Mobile

Print templates page

On the page for all the printing templates on the website, they are found in a collapsible content panel, sorted by products, which when displayed shows the download links for each of the measurements. In addition, it contains a sidebar with a vertical menu of related pages.

Desktop

Tablet

Mobile

Custom budget page

The page to request a custom budget is made up of a brief description of when you can get a response to the request, and a special contact form. It also includes a sidebar with a vertical menu of related pages.

Desktop

Tablet

Mobile

Contact page

The contact page is divided into three parts: a map of the location of the physical store of the company, a contact form by email and another part with information related to the phone, open hours, email and physical address of the company.

Desktop

Tablet

Mobile