In this project, I was tasked to lead the art team to design a website page for the upcoming Nebula Series monitors.
The Nebula Series monitors is an upcoming product line of Sceptre Inc. I suggest our marketing director that having a new designed website page could be helpful for both brandings this series of products and branding Sceptre the company. The task got approved.
My job is to direct the art style and create the basic website layout. Turing graphics into motion graphics after the graphics are finalized. I'm also responsible to communicate with our tech/engineer director so that he can present the design work to the 3rd party website developer.
To present the Nebula series of monitors, I started by listing out the specs/features that make this series of products stand out. At the same time, the actual looking of this product is a big fact that could lead the design direction.
After a short meeting with our product manager, we all think the name Nebula fits this series of products so well.
All Nebula series of monitors are in white color, which is not the most popular color for the computer monitor market but a line that could really stand out for some customers. (I personally am a big fan of clean desktop setups.)
For art directing, the name Nebula makes me immediately think of nebula and the universe. Could be colorful that displays in screen, and a dark background that makes the white color monitor stand out easily.
Here are some points that I wrote as direction for our art team:
- Use universe and nebula as background, and add some planets and stars for decorating.
- The background should smoothly transition between each section, to create an immersive experience for viewers
- Have clean mock-ups for the monitors and make sure products stand out from the background.
- Display in-screen should be colorful that show the rich color of our monitors.
The layout is based on the features that we want to present as the selling points to our customers.
In order to show the most accurate specs, I asked the engineering team for a list of features that can apply to most of the Nebula series products.
The list of graphics:
At the same time I think the feature graphics need to be catchy enough so that viewers don't lose interest so quickly. Making all the graphics motional would be a great method to help on that.
The immersive background looks nice, but it was really challenging for both graphic design and motion design. I figure out a way to cut down the website parts by parts and export different elements in different formats so that our 3rd-party web developers can try on to make the website responsive for both PC and Mobile.
We made the background immersive, which means we need to modify the background, layout, and spacing, so that the content can fit in the mobile size.
All the texts need to be bigger so that users can read the text comfortably. The content needs to fit the mobile size.
While adjusting the text and content, the spacing could be an issue. We don't want to make the website looks so busy and squished on the mobile version. To fix that we need to extend the background to be long enough to layout and well-spacing the content.
This is one of the first UI and Web Design projects that I have ever worked on. In the beginning, I was very graphically focused. I didn't quite understand the doability from the web developer's perspective. Communication is the best "tool" that helped me on pushing his project forward. Design in a limited situation is frequently needed in actual works occasions. As a UX/UI and Web design, being able to communicate effectively, and design with the limitation for the best possible result is an important skill to have in nowadays works.
