Create Museum Website UI/UX + Demo 🍿

Full Prado Museum Demo

Kerthin / pradoMuseum-templateSait

Site of the Prado Museum, for viewing paintings.

Description

The template is a site for viewing the works of great artists represented in the famous Prado Museum. You can also find out information about the painting and the artist himself.

• To launch the app
  • download the repository;
  • log in to the downloaded repository using the command line or terminal;
  • enter the command line 'npm run start' or 'serve-s build' and go to the address specified in the terminal.

• Note that the project was made using the CREATE REACT APP.

• Demo

Use technology.

The following technologies were used to create this project:

Software platform

Libraries

Package manager

---

Documentation

The repository of this project is divided into several sections:

• src - this repository is intended for files with the help of which the project is being developed. It is from this repository that all project files are compiled;
• docs - a repository that stores all compiled code with all media…

View on GitHub

Introduction

2 years ago, wandering through the expanses of Behance, I saw an interesting work, which was a redesign for the website of the Spanish Prado Museum. The work was called Prado Museum Website with Virtual Reality Experience.

Of course, I didn't want to implement the entire project, because I didn't understand the UI and UX logic very well in the work that I saw on Behance.

Moreover, I just wanted to create a small one-page project. Considering that this was supposed to be my first project on React. Therefore, I want to immediately note that the code here is very lousy, and this post is not a tutorial of any kind. And I was too lazy to break the code into components, so it is written entirely in one file. I'm not going to teach anyone anything, but I just want to tell you about how I implemented this project.

Concept

The idea was simple, I want to implement a one-page website where I can use the menu to select the artist I am interested in and view his works, as well as information about him, which will be displayed on the main page and in a specially side menu.

All information is stored in a special object, which you can see at this link. The object itself consists of three stages.

The Country 👉 The Artist 👉 His Paintings
There are 7 countries in our array, and the total number of artists is 27.

There are 2 menus on the website. One menu is the main one, it presents artists who are in sections with countries. The second menu is auxiliary, it displays information about the selected artist (the menu is located on the side, you can open it by clicking on the portrait of the artist that is located on the main screen).

Realization

01. Main Page

To begin with, I decided to create a main page that will display brief information about the artist.

1. At the very top I have a button to open the menu.

2. In the center there is a very brief information about the artist (years of life, name, country of birth).

3. Just below is a portrait of the selected artist, which is located in a round block. When you click on it, a side menu should open, where the artist's paintings will be presented, as well as broader information about the artist (early life, synopsis).

4. At the very bottom there is information about the picture, which is displayed on the main screen (name, year of creation, artist's name).

02. Artists Menu

The menu was planned to be made full-screen. Therefore, before I output information to it, I need to work out the animation of opening this menu.

1. Animation
The animation of opening the menu should look as if it shifts the main page down when opening it. This was implemented as follows:

The burger menu itself was made in the form of two closing lines that form a cross.

2. Artists
Now it's time to draw lists of artists. To do this, we need to break the information about artists into components and display them in the form of columns, which are divided by country categories.

// ----- Picture Components
function PictureInfo(props) {
  return(
    <div className="picture__textWrap">
      <div className="picture__text">
        <h1 className="picture__date">{props.dateWritten}</h1>
        <p className="picture__name">{props.name}</p>
      </div>
    </div>
  );
}

function PictureImg(props) {
  return(
    <div className="picture__imgWrap">
      <div className="picture__img">
        <div className={`picture__imgBg ${props.imgBook}`}></div>
      </div>
    </div>
  );
}

function Picture(props) {
  return(
    <div className="picture">
      <div className="picture__info">
        <PictureInfo dateWritten={props.dateWritten} name={props.name} />
        <PictureImg imgBook={props.imgBook} />
      </div>
    </div>
  );
}

function Pictures(props) {
  return (
    <React.Fragment>
      {Object.entries(props.pictures || {}).map(([ i, j ]) => (
        <Picture key={i} name={i} {...j} />
      ))}
    </React.Fragment>
  );
}
// ----- END Picture Components


// ----- Painter Components
function PainterInfo(props) {
  return(
    <div className="painter__textWrap">
      <div className="painter__text">
        <h1 className="painter__name">{props.name}</h1>
        <p className="painter__years">{props.born} - {props.died}</p>
      </div>
    </div>
  );
}

function PainterImg(props) {
  return(
    <div className="painter__imgWrap">
      <div className="painter__img">
        <div className={`painter__imgBg ${props.class}`}></div>
      </div>
    </div>
  );
}

function Painter(props) {
  return(
    <a href="#" onClick={() => props.onClickLink(props)}>
      <div className={`painter ${props.active ? 'active' : ''}`} onClick={() => props.onClick(props)}>
        <div className="painter__info">
          <PainterInfo name={props.name} born={props.born} died={props.died} />
          <PainterImg class={props.class} />
        </div>
      </div>
    </a>
  );
}
// ----- END Painter Components


// ----- Сountries Components
function CountryTitle(props) {
  return(
    <div className="countryTitle">
      <h2 className="countryTitle__name">{props.name}</h2>
    </div>
  );
}
function Сountries(props) {
  return(
    <div className="swiper-slide">
      <CountryTitle name={props.name} />
      {Object.entries(props.painters).map(([ i, j ]) => (
        <Painter key={i} name={i} {...j} onClickLink={props.onSelectLink} onClick={props.onSelectWriter} active={i === props.selected} />
      ))}
    </div>
  );
}
// ----- END Сountries Components

And now we need to bring it all to our menu.

But here we have a problem. The fact is that we have 7 countries in our array, and a maximum of 4 fall into our field of view in the menu. To do this, we need to implement the slider function in our menu so that we can scroll through our list of countries.

To do this, I decided to use the Swiper.js. It was possible to simply implement this using CSS and FLEX, but I wanted the slider to be scrollable with gestures.

And here's what happened:

3. Choosing a artist
The last thing left for us is to implement the artist selection function. To do this, we need that when we click on the artist we need, the information stored in the object about the artist is transferred to our side menu, where paintings and more detailed information about the artist are displayed. It is important that the number of paintings is the same as it is prescribed in the object. It is also necessary that the menu closes independently when choosing the artist we need.

03. Side Menu

It remains to implement the side menu. It will be executed in the form of three columns. The first column will display brief information about the artist, the second will display paintings, and the third column will display more detailed information from the artist's life.

Now you need to display information about the artist who was selected in the top menu in these columns.

THE END

Well, that's it. I apologize in advance for the fact that the information was submitted very crumpled. But on the other hand, as I wrote earlier, I was not going to teach anyone anything in this article. In this post, I just wanted to demonstrate my old work and nothing more special.

Full Prado Museum Demo

Kerthin / pradoMuseum-templateSait

Site of the Prado Museum, for viewing paintings.

Description

The template is a site for viewing the works of great artists represented in the famous Prado Museum. You can also find out information about the painting and the artist himself.

• To launch the app
  • download the repository;
  • log in to the downloaded repository using the command line or terminal;
  • enter the command line 'npm run start' or 'serve-s build' and go to the address specified in the terminal.

• Note that the project was made using the CREATE REACT APP.

• Demo

Use technology.

The following technologies were used to create this project:

Software platform

Libraries

Package manager

---

Documentation

The repository of this project is divided into several sections:

• src - this repository is intended for files with the help of which the project is being developed. It is from this repository that all project files are compiled;
• docs - a repository that stores all compiled code with all media…

View on GitHub

Thank you for your attention. I hope that each of you has your favorite artist, whose works you can endlessly admire.

See you all later.