Categoría: Web Design

RUBIUS Product Pages

    RUBIUS PRODUCT PAGES

    Web Design | 2022

    [CONTEXT]   |   [SOLUTION]   |   [UI/UX]   |   [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/UX 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 | Mobile UI Design

    RUBIUS | Drift Rubius Premium landing page | Desktop UI Design

    DRIFT RUBIUS PRO

    Browse product page

    RUBIUS | Drift Rubius landing page | Mobile UI Design

    RUBIUS | Drift Rubius landing page | Desktop UI Design

    PROJECT
    CREDITS

    STAFF
    Art direction Alexis Cruzado
    Web design Alexis Cruzado
    Web development Dan Algarra, José Ramón Gaitán, Antonio Baena
    TOOLS
    Web design Adobe Photoshop | Sublime Text
    Web development Bootstrap | Visual Studio | HTML5 | CSS3 | JavaScript

    MATTEL Product Pages

      MATTEL PRODUCT PAGES

      Web Design | 2022

      [CONTEXT]   |   [SOLUTION]   |   [UI/UX]   |   [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/UX 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 UI Design

      MATTEL | Khali landing page | Mobile UI Design

      MATTEL | Kandy landing page | Mobile UI Design

      MATTEL | Kandy landing page | Desktop UI Design

      MATTEL | Kanyon landing page | Desktop UI Design

      MATTEL | Kanyon landing page | Mobile UI Design

      MATTEL | Key Pro landing page | Mobile UI Design

      MATTEL | Key Pro landing page | Desktop UI Design

      MATTEL | Kustom landing page | Desktop UI Design

      MATTEL | Kustom landing page | Mobile UI Design

      PROJECT
      CREDITS

      STAFF
      Art direction Alexis Cruzado
      Web design Alexis Cruzado
      Web development Dan Algarra, José Ramón Gaitán, Antonio Baena
      TOOLS
      Web design Adobe Photoshop | Sublime Text
      Web development Bootstrap | Visual Studio | HTML5 | CSS3 | JavaScript

      TERRITORIO EXPANSIVO Website

        TERRITORIO EXPANSIVO

        Web Design | 2023

        [CONTEXT]   |   [SOLUTION]   |   [UI/UX]   |   [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/UX 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

        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/UX]   |   [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/UX 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 | 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 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

          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/UX]   |   [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/UX 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

            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/UX]   |   [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/UX 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

              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

                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