Categoría: Web Design

TESLARADIO Web Design & Copywriting

    TESLARADIO

    Art Direction. Web Design & Copywriting | 2024

    CONTEXT

    In late 2024, sound hacktivist Chinowski Garachana sought my collaboration as Art Director for his website, an online space —developed by Cardeseo studio— to showcase all his publications and experiences as a creator, researcher, and educator.

    SOLUTION

    After reviewing the content to be displayed on the website —mainly, references and links to cultural institutions, festivals, projects and artists— plus considering that noise and sound recording have been Chinowski Garachana's scope for over 30 years, the art direction of this project had to be visually neutral and minimalist, with clear and direct copywriting.

    PRODUCT MANAGEMENT

    Based on the portfolio of images and texts provided by the client, I established the visual and narrative direction of the project with a web mockup, which guided Cardeseo studio in its coding and developing tasks.

    LIVE PROJECT

    This personal website is a work in progress: new content and sections will continue to be added in the future.

    PROJECT
    CREDITS

    CLIENT
    Chinowski Garachana
    STAFF
    Art direction Alexis Cruzado
    Web design Alexis Cruzado
    Web development Cardeseo
    Copywriting Alexis Cruzado
    TOOLS
    Web design Figma
    Web development WordPress Elementor
    Web copywriting Claude | QuillBot

    RUBIUS Product Pages

      RUBIUS PRODUCT PAGES

      Low-Code Web Design | 2022

      [CONTEXT]   |   [SOLUTION]   |   [UI]   |   [CREDITS]

      CONTEXT

      El Rubius is one of the most important influencers and creators of audiovisual entertainment content in the Spanish-speaking world. To make the most possible profit from his popularity, Rubius sells through his online store branded merchandising and apparel. But in 2020 he relied on Drift Gaming to develop his most complex product to that date: two gaming chairs, one of them launched as a limited edition product and both marketed as high-end products.

      SOLUTION

      A strategy of marketing comms was devised to help advertising and promoting the offline and online selling of this exclusive products. To create a landing page for each product was a crucial task I was entrusted by El Rubius Management.

      UI CONCEPT

      Following the brand guidelines I set for this project, I created a landing page for each product. The UI/UX concept applied is simple: turning the web interface into a window where each product's design and its most outstanding functionalities are shown with eye-catching detail.

      UI DESIGN

      These landing pages were created using the tools provided by a custom made web CMS. Since a very good collection of photos of both products were available, the visual narrative relied extensively in alternating between pictures of isolated product vs. product placed in a context of use.

      DRIFT RUBIUS PREMIUM

      Browse product page

      RUBIUS | Drift Rubius Premium landing page | Desktop

      RUBIUS | Drift Rubius Premium landing page | Mobile

      DRIFT RUBIUS PRO

      Browse product page

      RUBIUS | Drift Rubius landing page | Desktop

      RUBIUS | Drift Rubius landing page | Mobile

      PROJECT
      CREDITS

      CLIENT
      International ElRubius, Vizz Agency
      Spain Drift Gaming, Atlas Informática
      STAFF
      UI/UX design Dan Algarra
      Web development José Ramón Gaitán, Antonio Baena
      Product pages design Alexis Cruzado
      TOOLS
      Web design Adobe Photoshop | Figma
      Web development Bootstrap | Visual Studio | HTML5 | CSS3 | JavaScript
      Product pages design Adobe Photoshop | Bootstrap | HTML5 | CSS3

      MATTEL Product Pages

        MATTEL PRODUCT PAGES

        Low-Code Web Design | 2022

        [CONTEXT]   |   [SOLUTION]   |   [UI]   |   [CREDITS]

        CONTEXT

        Mattel, Inc. is the creator of some of the most iconic toys in history, as well as a company in a perpetual search for new market niches in which to offer its own products or those developed in collaboration with other companies, when a consumer audience eludes their scope. That is why, after focusing on the gaming niche, Mattel relied on Krom Gaming to develop a collection of peripherals branded with two of its flagship brands: Hot Wheels and Barbie.

        SOLUTION

        A strategy of marketing comms was devised to help advertising and promoting the offline and online selling of this collection of products. To create a landing page for each product was a crucial task I was entrusted by Mattel Iberia Marketing Department.

        UI CONCEPT

        Following the brand guidelines I set for Krom Gaming's Hot Wheels and Barbie licensed products, I created a landing page for each product. The UI/UX concept applied is simple: turning the web interface into a window where each product's design and its most outstanding functionalities are shown with eye-catching detail.

        UI DESIGN

        These landing pages were created using the tools provided by a custom made web CMS. Parallax scroll, hotspots and alternating between pictures of isolated product vs. product placed in a context of use were the main techniques to build that visual narrative.

        MATTEL | Khali landing page | Desktop

        MATTEL | Khali landing page | Mobile

        MATTEL | Kandy landing page | Mobile

        MATTEL | Kandy landing page | Desktop

        MATTEL | Kanyon landing page | Desktop

        MATTEL | Kanyon landing page | Mobile

        MATTEL | Key Pro landing page | Mobile

        MATTEL | Key Pro landing page | Desktop

        MATTEL | Kustom landing page | Desktop

        MATTEL | Kustom landing page | Mobile

        PROJECT
        CREDITS

        CLIENT
        International Mattel, Barbie, Hot Wheels
        Spain Krom Gaming, Atlas Informática
        STAFF
        UI/UX design Dan Algarra
        Web development José Ramón Gaitán, Antonio Baena
        Product pages design Alexis Cruzado
        TOOLS
        Web design Adobe Photoshop | Figma
        Web development Bootstrap | Visual Studio | HTML5 | CSS3 | JavaScript
        Product pages design Adobe Photoshop | Bootstrap | HTML5 | CSS3

        TERRITORIO EXPANSIVO Website

          TERRITORIO EXPANSIVO

          Web Design | 2023

          [CONTEXT]   |   [SOLUTION]   |   [UI]   |   [CREDITS]

          CONTEXT

          Founded in Malaga in 2017, Territorio Expansivo is a socio-cultural association that uses the Living Arts (theatre and dance) as a tool for the education and development of self-knowledge and self-esteem of adolescents and groups at risk of social exclusion.

          SOLUTION

          Territorio Expansivo needed a website to publicise its mission, as well as the content and experiences created in each of its actions. Moreover, being a project closely linked to fieldwork, the website had to reflect the collective's relationship with the socio-geographical territory of the city of Malaga.

          UI CONCEPT

          I designed a website whose visual design revolves around the key concept "Map", thus envisioning the websiste, on one hand, as a cartographic index of the actions carried out by the collective in the territory of Malaga; on the other hand, as a visual atlas where you can see the artistic networks created through the years, thanks to the socio-cultural actions of Territorio Expansivo.

          TERRITORIO EXPANSIVO | Website layout & navigation demo | Browse the website

          UI DESIGN

          Although it is made with WordPress, this website is completely custom designed: no templates were used. Instead, I first made a prototype in Figma whose design, once approved - after a couple of iterations -, I turned into a functioning website using WordPress as the framework and HTML5 plus CSS3 as the main tools to make the proposed solution a reality.

          TERRITORIO EXPANSIVO | UI Design Home

          TERRITORIO EXPANSIVO | UI Design About Us section

          TERRITORIO EXPANSIVO | UI Design MAP 01: Collective’s past actions

          TERRITORIO EXPANSIVO | UI Design Action post page

          TERRITORIO EXPANSIVO | UI Design Press and News section

          TERRITORIO EXPANSIVO | UI Design MAP 02: spaces that have held Collective’s past actions

          TERRITORIO EXPANSIVO | UI Design MAP 03: groups that have collaborated w/ Collective’s past actions

          TERRITORIO EXPANSIVO | UI Design MAP 04: theatre companies that have collaborated w/ Collective’s past actions

          TERRITORIO EXPANSIVO | UI Design MAP 05: artists that have collaborated w/ Collective’s past actions

          PROJECT
          CREDITS

          CLIENT
          Territorio Expansivo, Diputación de Málaga, Centro Cultural María Victoria Atencia
          STAFF
          Art direction Alexis Cruzado
          Web design Alexis Cruzado
          Web development Alexis Cruzado
          TOOLS
          Web design Figma
          Web development WordPress | PHP | jQuery | HTML5 | CSS3 | JavaScript

          TRANSDISCIPLINA A/V Website

            TRANSDISICPLINA A/V

            Web Design | 2017

            [CONTEXT]   |   [SOLUTION]   |   [UI]   |   [CREDITS]

            CONTEXT

            Transdisciplina A/V is an audiovisual collective that, since 2016, curates live events in which generative art, electronic music and live visuals merge live.

            In addition to its profiles on social networks, the project needed its own website, a personal space from which to promote its events and allow a simple booking method.

            SOLUTION

            I solved the problem by designing a website that, on one hand, tells what the Transdisciplina project is; on the other hand, it is also a space where the collective can promote its events, offering a simple tickets booking system for the public interested in attending the shows.

            UI CONCEPT

            The visual design guidelines for this project were grounded on simplicity, both for UI design and user experience. Thus, I created a single-page website, based on a dark and suggestive palette of colours in which text and digital collages - made with photos taken from some collective's live events - merge in a seamless scrolling experience.

            TRANSDISCIPLINA A/V | Website layout & navigation demo

            UI DESIGN

            Although it is made with WordPress, this website is completely custom designed: no templates were used. Instead, I first made a prototype whose design, once approved - after a couple of iterations -, I turned into a functioning website using WordPress as the framework and HTML5 plus CSS3 as the main tools to make the proposed solution a reality.

            PROJECT
            CREDITS

            CLIENT
            Transdisciplina
            STAFF
            Art direction Alexis Cruzado, Alejandro Lévar
            Web design Alexis Cruzado
            Web development Alexis Cruzado
            TOOLS
            Web design Adobe Photoshop
            Web development WordPress | PHP | jQuery | HTML5 | CSS3 | JavaScript

            BIKTOR KERO Website

              BIKTOR KERO

              Web Design | 2017

              [CONTEXT]   |   [SOLUTION]   |   [UI]   |   [CREDITS]

              CONTEXT

              Film post-production and VFX specialist Biktor Kero established himself as a freelancer in 2016, after a decade working in several companies' Audiovisual Department. A personal brand plus a website - where to display his portfolio and services - was badly needed to help him kickstart this adventure.

              SOLUTION

              The visual design guidelines for this project were set towards Biktor's main request: to have something simple, yet attractive and polished. On that grounds, I created a single-page portfolio website, based on a restricted palette of colours and fonts.

              UI CONCEPT

              The UI/UX main goal in this web project was to display the info about Biktor - his biography and portfolio of works - in the best possible way. Thus, copywriting played a vital role, not only in setting the tone for Biktor's personal brand, but also in generating a seamless, flowing narrative that offered a clear view of his professional scope and experience in a two-minute read.

              Although this website is no longer online, there is a video demo which shows what browsing the web page looked like:

              BIKTOR KERO | Website layout & navigation (demo)

              UI DESIGN

              This website's UI was based on a Bootstrap template, whose structure and appearance I modified extensively - using HTML5 and CSS3 - to make it fit with the copywriting narrative tempo.

              PROJECT
              CREDITS

              CLIENT
              Biktor Kero
              STAFF
              Art direction Alexis Cruzado
              Web design Alexis Cruzado
              Web development Alexis Cruzado
              TOOLS
              Web design Adobe Photoshop
              Web development Bootstrap | Sublime Text | HTML5 | CSS3 | JavaScript

              RAKESH B. NARWANI Website

                RAKESH B. NARWANI

                Web Design | 2012

                [CONTEXT]   |   [SOLUTION]   |   [UI]   |   [CREDITS]

                CONTEXT

                Film producer, director, scriptwriter and long time friend Rakesh B. Narwani asked me, back in 2012, to collaborate in a very personal project: the creation of a professional website, where he could show both his portfolio and services.

                 

                SOLUTION

                The clear and vintage visual concept applied in this project revolved around Rakesh's passion for classic cinema and his main professional scope: screenplay writing.

                UI CONCEPT

                Following the brand guidelines I set for this project, this website was designed using just one color and two typefaces, consistent with Rakesh's professional scope: the typewriter-like font for the film scriptwriter; the widely used - in film posters and credits rolls - sans font for the director.

                Although this website is no longer online, there is a video demo which shows what browsing the web page looked like:

                RAKESH B. NARWANI | Website layout & navigation (demo)

                UI DESIGN: WEBSITE SECTIONS

                With a clean and simple design, inspired on the classic film scripts’ look – typewriter font on white background -, this website was a bespoked work, in terms of design and coding.

                RAKESH B. NARWANI | UI Design Home

                RAKESH B. NARWANI | UI Design About Me section

                RAKESH B. NARWANI | UI Design Services section

                RAKESH B. NARWANI | UI Design Portfolio section

                RAKESH B. NARWANI | UI Design Contact section

                RAKESH B. NARWANI | UI Design Blog section

                RAKESH B. NARWANI | UI Design Blog post

                PROJECT
                CREDITS

                CLIENT
                Rakesh B. Narwani
                STAFF
                Art direction Fermín Pérez, Alexis Cruzado
                Web design Alexis Cruzado
                Web development Fermín Pérez
                TOOLS
                Web design Adobe Fireworks | Adobe Photoshop
                Web development WordPress | PHP | jQuery | HTML5 | CSS3 | JavaScript

                KAI VISUALUTIONS Website

                  KAI VISUALUTIONS

                  Web Design | 2012

                  [CONTEXT]   |   [SOLUTION]   |   [UI/UX]   |   [CREDITS]

                  CONTEXT

                  Kai Visualutions was a company founded by Marta Pavón and Maikel Ramírez. They made a name in the Málaga film scene over time but, in 2011, it was just a recently launched film production services business: from hiring freelance professionals and finding shooting locations, to helping with bureaucratic paperwork, they solved in advance all the needs and problems of a film shoot.

                  SOLUTION

                  A solid branding plus a website - where they could show both their portfolio and services - were badly needed to help Kai Visualutions to stand out from their local competitors. Creative inspiration to solve this problem was drawn from Kai Visualution's core values.

                  UI/UX CONCEPT

                  Following the brand guidelines I set for this project, the UI/UX concept for Kai Visualution's website design was inspired in the travelling camera cinematic move, which I applied to the navigation transitions in between sections for both its desktop and tablet versions.

                  Although this website is no longer online, there is a video demo which shows what browsing the web page looked like:

                  KAI VISUALUTIONS | Website layout & navigation (demo)

                  UI DESIGN BREAKDOWN

                  This website was an original and absolutely bespoke project: it belongs to a time when web templates and Bootstrap were not as widespread as they are nowadays. Quirky as it may seem today, the entire website was built on a huge "map" in which each section was a stop. Thus, when browsing the website, the user actually "travelled" through it.

                  PROJECT
                  CREDITS

                  CLIENT
                  Marta Pavón, Maikel Ramírez
                  STAFF
                  Art direction Fermín Pérez, Alexis Cruzado
                  Web design Alexis Cruzado
                  Web development Fermín Pérez
                  TOOLS
                  Web design Adobe Fireworks | Adobe Photoshop
                  Web development WordPress | PHP | jQuery | HTML5 | CSS3 | JavaScript
                  Volver arriba