The images above are two examples of the new re-design for Calle Impresores SAS. (V2) showing the HomePage's hero Header and its next section of Who We Are exported directly from my Figma's high-fidelity-design.

Design Changes

The biggest design changes in the images above from the previous 2021 (version 1) website to this new 2025 (version 2) website aside of using different and better technologies, a different Slider plugin, and else, is the implementation of a wider layout and grid system covering especially all devices from Mobile up to 1920px wide monitor screens, and the site will look good even above that.

Another big change sitewide was using a different, more consistent, and friendly color-palette through the new website following the 60/30/10 rule (or 60/30/5/3/2), also adding a couple extra companion colors for a few instances including their legacy brand Pantone® silver color (now as Hex and Rgba codes) used in presentation cards, folders, and more, and the same black (or dark) used in the 2021 website for some color blocking and contrasting.

Now we are using a beige or creme as the main color and variations of it as a richer peach for buttons and some hover effects like shadows, combined with a brown or coffee color for other details, borders, and some hover effect transitions.

The main background-color is a calm hue that connotes a paper feeling and reminds to a book or a brochure which is inline with the company's products. The new color-palette is a grounding, earthy one that brings a sense of harmony and balance, at the same time it's a bit more lively than it was before (especially combined with their colorful logo) having also more defined semantics, better relation between colors, and a deeper combination of colors for the use in CTA buttons or hover effects and micro interactions—we are also maintaining a higher color-contrast ratio.

The whole color-palette is reminiscent of paper, stationery, books, flyers, brochures, fruits, chocolate, and coffee, remembering to my client's products as well as evoking a sense of elegance, comfort, and freshness.

The images above are showing the newest Color-Palette and the latest Typefaces used throughout this new website re-design. The last two are screenshots of the live running website showing above-the-fold of the HomePage's Header with two different images inside the working and dragable Carousel, which is connected to the CMS and can be populated via it.

One Typeface, for SEO

One particular decision I opted-in was to drop one of the two fonts used before. We used the Google Fonts' serif Ovo for headlines and serif Cormorant for paragraphs and body text. For 2025 we removed the first typeface and kept just one for the entire site. This improves loading times and therefore contributes to the Search Engine Optimization (SEO) in Google and other search engines.

Fonts and Feelings

Cormorant is also an elegant display serif typeface (display type family) inspired by the Garamond heritage; it is a traditional font and like many serif fonts it has a connotation that (likewise many classic magazines and newspapers) inspires credibility and trust.

Note: Many graphic designers think that the only way to bring a modern touch to a website is to use a sans-serif (more modern, but sometimes bland) font. Although many of the best examples of modern plus trustworthy websites out there designed for innovative and elegant tech companies and startups use serif fonts in headlines, sometimes combined with a sans-serif for smaller texts getting better readibility. Serif fonts bring a sense of tradition and seriousness but they can also be very modern.

The images above are screenshots of three of the main headers (in the Home, Nosotros, and Catálogo pages) running in the live website, showing the new Headers including the re-designed Nav and their legacy Logo re-constructed with pure HTML and CSS, also looking better here than in the previous site.

Logo

In both occations (4 years ago in 2021 and now in 2025) we opted to keep their original logo, as it has a trayectory of over 30 years with the company and it is already printed in folders, papers, stationery, uniforms, and more. That's the logo that most current clients identify the company with.

It has a very bright and colourful logo-symbol but it works perfectly in contrast with our more natural and oppaque color-palette. Unlike the previous site, I made the logo to accompany the whole journey while scrolling, instead of fading-out. So it also has to look good ontop of every section (e.g. ontop of dark sections and images).

It has some easter-eggs, as the original logo image is hidden behind and re-created ontop with pure HTML and CSS using font-face to bring the original typeface just for this logo, making it more SEO friendly, plus it has a light-mode (silver) option if generating a dark-mode site or switch option. As well each letter will be separated to create a loading animation (similar to here).

⁠The above are three new sections for Calle Impresores SAS. (V2) re-design showing some of the photography in the site. The first one is directly exported from my Figma file's HomePage and the second and third are screenshots of the live running website's NosotrosPage in development, in a 1920px × 1080px screen.

Photography

We brought a professional photographer 4 years ago to take great pictures of the company and employees as you may see here (but as you may also see, the page can take long to load). This time images are highly optimized in the new NextJS website loading almost instantly (see here).

This time I chose only the best photography we had. I also lost some during the years in death computers, so I had to recicle and find some of the best quality photos I still had and search from the older site. I also used some stock but related photography that we will be replacing over time, as well as some pictures I had taken myself in 2021.

The little paper-plane in the Contáctate con nosotros CTA button is a new SVG illustration that I created in Figma based in the one I used in the older website with an animation flying over the Partners (Logos) Section while scrolling down. Obviously, this is another representation of the businesses' products, made out of paper.

The little envelope in the Contacto Nav button is another representation of the businesses' products that I animated in hover using pure HTML and CSS. It is very similar to the one in the previous site, but adjusted to be inside a button instead of being a direct link.

⁠The images above are three screenshots showing the Content Management System (CMS) which is the client-side editor. The first one is the HomePage of Hygraph Studio CMS and the second and third are screenshots within our new editor's User Interface displaying two of the images or items within the Carousel or Slider in our new HomePage's Header. As seen, I configured it so they can add an image asset and a description used as an alternative-text (alt-text) for Screen Readers (addressing Accessibility) and for Search Engine Optimization (SEO) purposes.

CMS

I'm also including a very robust CMS (or Content Management System) using Hygraph Studio CMS so that my client is able to edit main content like collections (e.g. slider images, catalogue products, logos of partners, testimonials, photos and biography of members, and more) plus some of the rest of images and texts in the site, being most of this content dynamic instead of just static (or hard-coded) and easy to edit by the client's team moving forward.

The main use of the CMS will be for Calle Impresores SAS. to be able to use the new Catalogue categorizing and showing different products to potential clients including photos, information, materials, procedures, timelines, costs, and more.

The previous and the following below are some images taken directly from Figma of the new Catalogue: showing the Products Section in the HomePage (which displays the Featured Product or Latest Product) in the image above and the Header and Catálogo Section inside the CatalogoPage in the two images below.

Catalogue

⁠⁠The Catalogue was the main feature and purpose of the new website re-design, but as I will explain below the entire project had to be suddenly stopped, as the whole company Calle Impresores SAS. had to close this year in January 2025 after 38 years working since 1987, before we could enjoy and utilize this new website.

I was already at about 90% of the design (just missing a Form in CotizaPage that we had to discuss about, a per-product Modal or Popup for expanded information and more images when clicking the Ver más (See more) Button, and a Modal or Popup with contact details and social media links in the Contacto Button in the Nav).

I was also already at about 70% of the development missing the above mentioned designs and also two sections from the ready Figma designs to develop live: Partners Section (showing logos from companies they worked with similar to the older website) and a new Testimonials Section that I will explain further below.

We created an older site in 2021 which is now in a temporary domain here. As after Covid many things were disrupted, the team at Calle Impresores SAS. never really had someone to keep the site up-to-date and use the old CMS—most of their work and company base changed since and had a big hit. Many physical print products like invoices, folders, satationery, business papers, menus, flyers, and more that they used to print for many companies, started being replaced by digital media assets.

The older website remained as a static marketing website which indeed brought them some organic clients and new calls during these past years; every person that found the website since did it organically by searching through Google, thanks to the work and focus on SEO that I delivered 3 years before using very SEO-friendly technologies as well.

In July 2024 they asked me to bring the website back to life so we could start using and promoting their products again; a new sales member of Calle Impresores SAS. looking at the older website again pushed to contact me to bring it back and for them to start using it again to enhance sales and marketing. I started working in the new design in September 2024.

Sadly, because our old CMS (Forestry.io) was discontinued in 2023 letting the website static (still live but unable to be edited anymore) and we didn't do a migration that was possible to their new TinaCMS in time, we basically had to start over with another CMS.

We had a discussion plan to re-develop the website using new technologies like NextJS, to be able to use a new CMS like Hygraph Studio CMS or Prismic.io CMS and re-design the site with a more polished UI and features using Figma this time. We wanted to create a new modern and useful website for my clients and their users to enjoy from now on since 2025!

Unexpectedly, they received some news in January 2025 and were adviced and decided to close.

These are other two images taken directly from Figma of the Catalogue. The first one above is the Header of CatalogoPage (which also displays the Featured Product or Most Recent Product as in the HomePage) and the second one is the Catálogo Section inside the CatalogoPage.

Catalogue Page

The page displays the Featured Product above-the-fold and below that the full repertoir of Catalogue Products created via the CMS (excluding the Featured Product above) in a smaller size within two columns.

Hygraph Studio CMS is already configured and connected to the live website. I'm just missing to print the smaller Catalogue Products below as we were going to take real photos in February and I was going to help them add the first content. We had to configure a limit of e.g. "20" (following the new Figma design) and some tags and options for featuring and controlling the displayed products within a Catalogue of all of them, their count numbers, and categorization.

The Featured Product in the older website was completelly disconnected from the Collection of Products below and in the CMS, it didn't appear in the HomePage either, and it was created using the page's headline, excerpt, and image. It was previously totally disconnected from the rest of Products and was better ment to display more general information of the Catalogue as a whole or to manually re-create one of the Products below.

In the new website all the Catalogue Products come from the same CMS Collection, featured in both HomePage and CatalogoPage dynamically.

As we couldn't photograph their Products finally as they closed in January, and this was the main idea and purpose for the whole website (I just have some few older photos and some remaining physical Products from them to work this Case Study with), the Figma design still uses two placeholder images (from Grilli Type) where I took some first inspiration for the Catalogue design, adapting different ideas to my layout and website design.

Disclaimer: If needed I can swipe to use some real photos (or stock photos as the site won't be launched), but my original design was made using this orange placeholder images as an example for my clients of how their Products should, could, and might look, and the idea was to show Products in bulk, from different angles, and individually.

The above are some Responsiveness assets showing how the live website looks like in these 7 different screen-sizes which I revised it for, from Mobile to 1920px (HD) screens, and it will look good even above. You could even re-size your browser screen while in the live site and see for yourself how it adapts to different screen-sizes!

⁠Responsiveness

The new website is way more Responsive than it was before as it is a Custom Website made using Bootstrap 5 (before it used Bootstrap 4, better for common 1366px wide screens) now targeting screens from Mobile to above 1920px (HD) wide screens and even above 4K.

It's fully developed revising for at least 7 different screen-sizes and modes: Mobile (Portrait), Mobile (Landscape), Tablet (Portrait), Tablet (Landscape), common Laptops and PCs above 1200px, screens above 1400px (e.g. 1440px Macbook Pro and Macbook Air), and screens above 1900px (e.g. 1920px (HD) or 4K monitors).

Normally in Webflow, Framer, or similar website builders you can only edit for 3 screens. Also you aren't really creating a Responsive Website, but instead like in the old days (2010s) people are still designing and developing 3 different pixel-perfect versions very generalized and made roughly for: Desktop, Tablet, and Mobile. E.g. both Mobile modes (Portrait or Landscape) will look the same, plus they can still look bad, elements can overlap, and there is nothing to do in those screen-sizes.

My custom website instead has incremental changes, e.g. Mobile (Landscape) is a half-way from Mobile (Portrait) to Tablet or Desktop and it can accomodate more elements than Mobile (Portrait). Tablet (Landscape) starts looking more like Desktop than to Tablet (Portrait) or Mobile. Same with all the rest of screens.

I have at least 5+ years of experience developing responsive websites, plus I took a University continuing education course in 2013 over Web Design and Design For Mobile Devices.

The above is the NosotrosPage Header as per my Figma re-design in January, 2025. The member's pictures above are placeholder and they were going to be easily updated by the team allowing for any number of company members and personnel, their profile pictures, names, and roles shown on-hover (see the live website) and possibly expanded biography on-click that would show in a Modal or Popup. They could also select border-colors on-hover (via a color-picker through the CMS) for different personnel types. The older website just allowed 4 and couldn't choose or change the 4 border-colors from the design (inspired in their logo) displayed when hovering (see the older website).

Company Closing in 2025

As I mentioned a couple of times before, this was a website for some family member's company that was open in Bogotá D.C. everyday for the past 38 years working since 1987.

In January 2025, when I was at about 90% of the design and 70% of the development of this whole project and we were about to have our last design iteration meeting in January 15th, to talk about the CotizaPage (Cotiza un proyecto) Form and different options to contact, quote, and budget a project with them through the website directly.

We had to have final conversations about final contact details, SEO strategy (and keywords) to optimize and implement deeper sitewide, and I had to teach a sales team member to use the CMS (Content Management System) so they were able to edit content within the site like the different collections of items, images, and texts for years to come by themeselves without my intervention.

Sadly in January 2025 as a conclusion of some slow years since 2020, the company owners were adviced by their account and financial managers to better close or they could face bankrupcy this year.

The above are the NosotrosPage Misión and Visión Sections as per my Figma re-design in January, 2025. The Misión and Visión copy texts are the final ones as they have had for many years. Now they were going to be dynamic and fully editable via the CMS.

Paradox

The paradox is that we were just finally working in this website after some years of having the older one almost unused. They looked it back in 2024 and were so excited to bring it back to life with a newer more modern design and CMS.

The older website brough them organic calls, and this new one was going to do it in a even bigger way with a robust focus on SEO while using one of the most SEO-friendly web frameworks out there: NextJS which has a bunch of Search Engine Optimization features that no other website builder has, addressing engine crawlers, accessibility, keyworks, image descriptions and a unique image optimization, website loading times, page loading times (which is immediate with no loading or page refresh, using ReactJS components).

This website was ment to be designed for my clients, to find more clients. I had all the actitude in 2025 to help them have and incredible Marketing Website and future Catalogue of Products to enable organic clients around Bogotá D.C. to know and reach them.

The whole Catalogue (front-end and back-end) was also ment to organize not only their products, but their whole business model in 2025 around this new website. We had talks of standardizing the product catalogue i.e. around a few products were they were going to specialize.

We had a few other close print businesses as examples were they sell everything online and they have reduced their catalog to concentrate their processes in a particular product and areas where they have become experts in.

The above is just a missing section that I did designed in Figma, but couldn't implement before January 2025 in the live website using a Carousel, so it's on draft (and scrapped for now) as it would take days to develop and there is no motive now. The Footer is also one of the few missing design pieces that we couldn't finalize, it should contain address, contact details, social media links, nav links, copyright, designed by, photography credits, and company logo in black and white, but I was left in the middle of its design.

Partners & Testimonials

The Testimonials Section and another missing Partners Section (similar to their previous one) with client logos which I was also in the middle of designing and developing, were going to be very important to bring trust and credibility, also known as social-proof.

We already had 24 real logos from their clients that they worked with for the past 38 years—we now just had to implement the completelly new Testimonials Section bringing real life experiences and stories from some of their current and all-time long clients, to bring also some emotion and trustiness to the website, with real client pictures, client logos, and project descriptions.

The above design was still target of a final iteration and possible slight re-design to accomodate for the best final needs, like final pictures and logos format as well as the stories display options or length.

Because I still worked in the new Figma re-design for a month or two since September 2024, I had almost already configured most of the CMS which is a big labour and took way longer to develop than doing just a static website (with no CMS) and they had been the ones who reached me for this re-design, I was still payed more than 50% of the project.

Although I would have preferred to have finished everything and have this website live and fully working, as this was going to be a big marketing asset for me personally in 2025 as well.

Sadly the company's future and therefore this project didn't end-up as we expected 6 months before. But I still wanted to create and document this full Case Study.

Hope you enjoyed reading (or scanning) it!

The below was my older Case Study from the previous Calle Impresores SAS. V1 (Version 1) website as it was since 2021. I'll be organizing or removing this content soon—as of April 29, 2025.

The below was written in January, 2021 and updated later at last in 2023. I want to keep it as it was for now, so it compares to how I write and design today in 2025! As seen in Calle Impresores SAS. V2 (Version 2) above—as of May 05, 2025.

⁠They needed a much more SEO friendly technology and a modern and more performant platform that they would be able to edit and expand over time.

The new brochure website has a minimal design with lots of white-space which brings space-to-breath and makes the information easier to consume. It also has color-blocking with high contrast between sections, headlines, copywriting, and images; this helps very much with some visual-accessibility concerns, and renders the information easy to read.

The design resembles a book, a catalogue, or a brochure. Some of the icons, graphic elements, or interactions have slight connotations to conventional paper or print, like the envelope for the Contact page, the paper plane for submitting or sending a form, and it even had a small animated paper plane that came through while scrolling over the clients' section (as per the 3th image above) but in the latest iterations of GSAP (GreenSock Animation Platform)⁠ it stopped working and would need some code updates and revisions.

The site also maintains their classic brand look established since 1987, but making it shine with a modern twist.

My main design goal was to include an online catalogue of their works for them to be able to add and remove items in the future, showcase examples of their products and services to future possible or existing clients.

The above would come together with creating a contact form and an easier contact flow for clients to find them or to be able to start a project with Calle Impresores with ease.

My main take-away is that this time the project had a big focus on SEO (Search Engine Optimization) to help Calle Impresores rank up better in organic searchs in Google and more, to help the company future find more organic clients and for people to find them online when searching for print work within Bogotá, D.C.

It required a deep keywords research and proper implementation (using proper meta-tags, alt-attributes, and much more).

All the best SEO practices were put in place to bring this feature to practice.