Magickbase official website homepage

[Kirl70]

First Screen Example:

https://github.com/Magickbase/visual-style-guide/assets/106060898/22677312-55b5-4bd8-9f9d-5f4b20030a29

Background Reference: https://codepen.io/Kirl70/pen/zYmpXZY

——————————————————————————————————————————————————————————————————

Introduce the product using the form of sequence frame play, mouse scrolling display. I will provide the sequence frames to the frontend, and at specific frames, a popup window should appear displaying the textual description of the product (frontend implementation required), as shown in the image:

DEMO: https://webtest1.dora.run

——————————————————————————————————————————————————————————————————

I think the current home page is a bit low on content, so I suggest putting "About Us" on the home page for display. For the "About Us" section, we can use scrolling sequence frames to showcase dynamic illustrations that change along with the scrolling of the text. refer to the website https://e-money.com/ for the second section as an example.

Illustration animation example:

——————————————————————————————————————————————————————————————————

On the prototype, the three social media links in the "Contact Us" section and the external links in the footer are the same and closely located, resulting in the repetition of content in a single screen. Therefore, I suggest removing the external links and replacing them with logo representations. clicking the contact button will trigger a system email dialog.

LOGO Dynamic DEMO: https://my.spline.design/logoweb-06f47345e7656e9fc27de6033f08646a/

——————————————————————————————————————————————————————————————————

Regarding the menu bar, for a more immersive experience, I propose using a popup-style menu:

——————————————————————————————————————————————————————————————————

Overall preview: https://www.figma.com/file/6XNoimRDbFTTNm016rbIdU/Magickbase?type=design&node-id=17481%3A39206&t=DcqDgSKIWgfbJ7JQ-1

Any thoughts or suggestions. @Keith-CY @Danie0918

[Keith-CY]

1. The animation in the background could be relevant to global instead of random, for the reason mentioned at https://github.com/Magickbase/visual-style-guide/issues/24#issuecomment-1567727743;

2. I think the current home page is a bit low on content, so I suggest putting "About Us" on the home page for display. For the "About Us" section, we can use scrolling sequence frames to showcase dynamic illustrations that change along with the scrolling of the text. refer to the website e-money.com for the second section as an example.

It's a good idea, expressing vision and mission can be prior to listing products for the following reason

And I think the interactive product list can be moved into an independent page for detailed information, they can be dimmed on the homepage.

3. What does the animation of about us mean?

4. clicking the contact button will trigger a system email dialog.

Not all computer has an e-mail client installed, so e-mail address should be displayed in some manner;

[Kirl70]

1. The animation in the background could be relevant to global instead of random, for the reason mentioned at Exploration of design styles for Magickbase website #24 (comment);

I think the current home page is a bit low on content, so I suggest putting "About Us" on the home page for display. For the "About Us" section, we can use scrolling sequence frames to showcase dynamic illustrations that change along with the scrolling of the text. refer to the website e-money.com for the second section as an example.

It's a good idea, expressing vision and mission can be prior to listing products for the following reason

And I think the interactive product list can be moved into an independent page for detailed information, they can be dimmed on the homepage.

3. What does the animation of about us mean?

clicking the contact button will trigger a system email dialog.

Not all computer has an e-mail client installed, so e-mail address should be displayed in some manner;

1. Background animation to do and global relevance need to use special video production software, video software comes with the particle effect is mostly random, and the use of video software produced by the video on the web page will take up a lot of memory, and adapt to different sizes is also a problem.Considering these factors, using third-party effects may be the best option. Adjusting the parameters of third-party effects, the animation in the background can be global relevant.

2. The interactive product list will display a brief description at specific frames. Within the description, there will be buttons that allow users to navigate to dedicated product pages.

they can be dimmed on the homepage.

What does it mean to "they can be dimmed on the homepage"?

3. The animations for the "About Us" section correspond to the subheadings mentioned in the prototype: Vision, Mission, and Future. Because the meanings of these words are too broad, I have quoted the key descriptions and expressed them in an abstract manner.

Vision

Mission

Future

4. It has been adjusted so that when hovering over the email address, a copyable email address will appear.

[Keith-CY]

1. I see, the random animation is just for demonstration.

2. What does it mean to "they can be dimmed on the homepage"?

The products can be less attractive because detailed/specific information about products can be delivered on their own page. The homepage could be more big picture.

3. Using a game machine to present tools of decentralized application is a bit weird.

I can feel decentralization from the color bands in a rainbow, but it's hard to get brighter

By the say, the glass sphere and rainbow remains me of

[Danie0918]

Introduce the product using the form of sequence frame play, mouse scrolling display. I will provide the sequence frames to the frontend, and at specific frames, a popup window should appear displaying the textual description of the product (frontend implementation required), as shown in the image:

It's best to add a progress bar here to help users build expectations and ease anxiety, while allowing them to quickly switch to the product presentation they want to see.Usually a small banner-like dot is used to indicate this, and it would be better if a preview of the product could be added.Of course an icon of the service can be used here instead, showing the name when the mouse moves over it, which can avoid too long copy affecting the display, as shown in the image:

I think the current home page is a bit low on content, so I suggest putting "About Us" on the home page for display. For the "About Us" section, we can use scrolling sequence frames to showcase dynamic illustrations that change along with the scrolling of the text. refer to the website https://e-money.com/ for the second section as an example.

That's a good idea, but then we wouldn't need the navigation about us

On the prototype, the three social media links in the "Contact Us" section and the external links in the footer are the same and closely located, resulting in the repetition of content in a single screen. Therefore, I suggest removing the external links and replacing them with logo representations. clicking the contact button will trigger a system email dialog.

This is OK.

Regarding the menu bar, for a more immersive experience, I propose using a popup-style menu:

This is good, but it is recommended that languages be taken out and placed separately so that we can add more language support later.

[Kirl70]

1. Yes, the reference URL does not save the adjusted parameters. So please consider the example video as the main reference, and the URL is intended for developers to use.

2. The product introductions have been streamlined, and now only simple descriptions and entrance to product pages are displayed during browsing.

   

3. Updated design:

The inclusion of the letters "CKB" on the tool and the presence of development symbols on the screen signify CKB's provision of development tools for developers.

The central bright light is deliberately blurred, while a multitude of colors are dispersed on the outer edges, symbolizing diverse individual futures that are illuminated by the light, echoing the corresponding text.

4. I think it can be simpler here, similar to a menu. When the mouse hovers over a specific product name, it should change to a clickable state, allowing users to quickly navigate to the corresponding screen upon clicking. To enhance the immersive experience of the page, using the product names directly would be more suitable and it would be more in line with the style of the menu.

   

5. The language has been taken out and placed separately.