In October 2022, we’ve decided to create a unique brand and website for Enabler that aligns with our values. At that time, we've been using Squarespace for just a basic website with information about the company. So in October we’ve got in contact with absolutely brilliant designers that helped us create new brand for Enabler.

Design

So, to create a brand new website design, we've collaborated with great designers from Poland: Mateusz Staniszewski and Artur Tuchowski.

Mateusz is a Senior Product Designer, specialised in Design Systems and Artur is Senior UX/UI Designer. Both of them have many years of experience, and after the first meeting, we were sure that they are the ones that we want to work with for the next few months.

So we started having workshops led by Matt to find out what our values, goals, and purpose are behind what we do. After a couple of workshops, conversations, and feedback, Matt provided us with the Brand Guidelines and Brand Elements that were ready for us to use. The Brand Guidelines provide information about colors, typography, and logo while the Brand Elements consist of social media profile pictures, cover images, email footers, resume templates, desktop background images, and more.

And once our brand was ready the next step was to create a new website for Enabler. After a few meetings with Artur, he understood the kind of website we wanted and created a beautiful design that incorporated our new fonts, colors and logo.

The entire branding process took about three months. Our developer, Dominika, then took over and began implementing the new design on the website.

Enabler Brand Guidelines and Elements in Figma

Technology

It was important for us to create a responsive and fast website using modern technologies. Here are the technologies we used to create the website:

NextJS

Next.js is powerful framework for building performant, scalable and maintainable web applications. It allows us to generate static HTML files at build time, which improves our site's performance and reduce hosting costs. It makes the website much quicker, comparing to other solutions.

It has a great solution for optimizing images for different devices and screen sizes, it provides lazy loading to improve page load times, priority image loading to prioritise the loading of important images on the page, ensuring that they load as quick as possible and provide better user experience.

Another important solution is font loading optimization library, next/fonts, that improves the performance and usability of webpage by optimizing the way fonts are loaded and rendered.

Tailwind CSS

We chose Tailwind CSS, because it helped us develop our webpage faster, using pre-defined utility classes, that we used to quickly apply styles to HTML. We can easily customize these classes by adding our own colors, fonts, and other to the Tailwind config. This allowed us to create a unique design for our website.

Tailwind CSS also supports styling any vanilla HTML that we cannot control, such as content from articles pulled from CMS. We used the @tailwindcss/typography plugin, which provides a set of prose classes that we can use to add default styles for headings, blockquotes, links, etc.

module.exports = {
  theme: {
    extend: {
      typography: theme => ({
        DEFAULT: {
          css: {
            '--tw-prose-body': theme('colors.dark-secondary'),
            'line-height': 1.5,
            h1: {
              'font-size': '31px',
              'font-weight': '500',
            },
            ...
            h6: {
              'font-size': '14px',
              'font-weight': '500',
            },
            blockquote: {
              'box-sizing': 'border-box',
              color: 'rgba(19, 0, 50, 1)',
              'font-size': '20px',
              'border-left': ' rgb(255, 200, 0) 3px solid',
              margin: '40px 0',
              padding: '0 20px',
              'font-weight': 500,
              'font-style': 'normal',
              'line-height': 1.3,
            },
            strong: {
              'font-weight': '500',
              color: theme('colors.dark-secondary'),
            },
            a: {
              'font-weight': 500,
              'text-decoration': 'none',
              color: theme('colors.sky-blue'),
            },
          },
        },
      }),
    },
    plugins: [require('@tailwindcss/typography')],
  },
}

Tailwind CSS makes it easy to maintain a consistent, responsive design and user experience throughout website.

Sanity

Sanity is a headless CMS (Content Management System) that we used on our website. It allows us to define custom data models, so our data is organized the way we want, making it easy to work with. One of the dependencies we used is @sanity/image-url, which we used to obtain any crops or hotspots used in the Sanity content. We can specify the width and height to get a cropped and resized image according to the wishes of the content editor. We can also specify the format or quality to obtain the most optimized images.

Next/image combined with @sanity/image-url:

<Image
  className='z-0'
  src={urlFor(article.image)
    .fit('crop')
    .crop('center')
    .width(3600)
    .height(2400)
    .format('webp')
    .ignoreImageParams()
    .url()}
  alt={article.image.alt}
  fill
  priority
  sizes={'100vw'}
  style={{ objectFit: 'cover', objectPosition: 'center' }}
 />

Midjourney

We use Midjourney to create unique images on our website. Midjourney is a generative artificial intelligence program and service created and hosted by Midjourney, Inc., an independent research lab based in San Francisco. Midjourney generates images from natural language descriptions, which are called "prompts."

We are very pleased with the outcome. Hopefully, you will like our new webpages and profile as much as we do!