Website design - Contrast and improvement

After the feedback, I have changed these parts on the following: colour, background and  Design explanation.

Before

Now

 First, I get rid of my original background. Because it is too distracting and messy. There is too many colours on the screen and it makes users feel frustrated and annoyed. So I change it to the black background and put a big size video on it to make the theme stand out and clear.

In this part, I add the business model of my app and explain the customer and brand target.

Adding my photo here.

I change all design in 2d style to make it looks more integral and use less colour to make it clear.

Website design - First UX testing & Feedback

The home page I used poster made by my own that I showed in the blog before. Obviously, it did not work very well, because it is very distracting. I have already change it.

There is some good news with my navigation and I receive some good feedback about this part.

I think it is because I do not give some clear explanation and introduction to my work. I will improve this later.

There is only bad feedback. I guess it because of lacking photo.

 In this part, I have my own opinion. I use the sans serif font for the body part because it is easier to read not only for looks good.

Website design - Reference & Research

In this step, I try to find some real-life examples for my inspiration.

This is a website dedicated to fitness. It uses a large number of smooth parallax effects with large background images to catch the consumer's attention. As the user scroll, a variety of beautiful pastels colour schemes will appear. The home page shows the information about this website clearly.

There is someplace not good enough. You can see the part with the red square and circle. It has a different colour when the cursors hover on the navigation. But it did not give any sign about where you are or which page you are staying. However, there is a very smart approach here. It used anchor technique here. It means when you click the title, it will scroll to this page automatic. The designer put most stuff in only one page and use a considerable amount of anchor. The benefit of this is it is easier to design, and it makes the website looks more integral.

Otherwise, another positive part is it shows half of the next page, and it lets users know there have more context can be read.

This part seems like an image with a white translucent colour layer. I can get the idea, it seems like the designer wants to make the text easier to read. But obviously, it did not work very well. I think it can be used by the same tip as the last page, with some colour square.

A little bit confused here is all the image point to the same page. I do not really want to try all the links but get the same result. It will make me feel like wasting time and there is not enough information in this website.

Again, the context is not very clear, and the photo looks not professional.

This part is quite normal, this website is given a high evaluation on the internet. Although it did not give me some surprise, the way of showing pictures is quite interesting and it can attract the attention of audiences indeed.

Website design - The process of adjusting home page

This is a very short video I put on the major project - 'Creator' page of my website. It's like the opening line of a movie. It can impress the audience and attract the audience to continue reading.

The next step, I want to introduce to you what technique I use an how to make it. The software I used are Adobe Photoshop, Adobe After Effect and plugin - particular.

Firstly, I made the font in Adobe Photoshop. The typeface I choose is Bukhari Script because it looks mellow and full. The application I made is mainly for cartoonists, so I try my best to make it looks cartoonish. After that, I export it as png, because this format can keep transparency and I need it to import to Adobe After Effect then.

As you see, I import the material into Adobe After Effect. You can see them on the left sidebar. Then I create the first composition, there is a small red square.

Further, I opened the Particular plugin in the AE. It can change the appearance of the font. You can see there is some shape like snow or ice on it.

The orange part will shine in the final show. It will be like the shiny neon light.

Adjusting the flicker.

The module highlight with the red square is very flexible, you can change the colour with speed, range; or the position of the floor and so on and so forth.


The reason I do it is not only for showing my ability of digital technology but also to create a digital ambient.

Website design - The process of making banner(EI!)

Because it's a poster about sports drinks, I want to add a sense of movement to the picture, as well as the concept of replenishing water. So I used fluid material. Because the colour of the can body is red, I chose the lower saturation purple as the background colour to increase the level of the picture. Colours with higher saturation give a closer sense of distance, and vice versa.

 Then I used the gradient tool to add light to the picture.

 Finally, the layers are merged, and the rectangular marquee tool is used to select the central area and invert it to highlight the theme of the product, and the rest of posters are made in this way to enhance the sense of series.

Another part is about User Interface. I choose to use a dynamic Gif picture because it is more in line with its theme. 

Firstly, I add a solid blue layer, because green is the main colour of my user interface. It is the adjacent colour of blue, it can make the picture more harmonious. I made three pictures to be tiled on the picture, so as to prepare for the effect of sliding upward later. The software used in these steps is Adobe After Effect.

Website design - The process of 3D modeling

First of all, this is how I make the cans model. The 3D software is Cinema4d and the Renderer is Octane.

The way I made this is Polygon modelling and Mograph. If you want to learn knowledge about modelling, you can check this website. There is a considerable amount of detail in it.

https://motionworks.net/shop/making-it-look-great-11/

Here you can see that I turned on the renderer, here I just played a simple light to test the material.

This is the final rendering of the model and I did not have added some material on it. I want to do it on Adobe Photoshop because it is easier to change the colour and the pattern if I use the smart object. By the way, you need to set Layered rendering before rendering or you will just get only one layer and it can not be edit! The part of the water drop is more complex. It needs to use the x-particle system. For details, please refer to its official website：https://insydium.ltd/products/x-particles/ It has a version for Cinema 4D's plugin.

 This is the final effect after I add the packaging design. The other two are made in the same way but in a slightly different way of shooting angle and lighting.

Generally, the lighting mode of the product needs three lights, one main light source, one auxiliary light source and one background outline light.

Website design - Homepage (Revision) & First part of Portfolio

This is the second version of my homepage, according to the suggestions I receive, I showed my name and professional name in a striking form so that people watching the website can clearly know who and what I am. 

 

I made four banners and put them on the first part of the portfolio page. Compared with the text, the big picture has a stronger visual impact. I think good websites should have more pictures than words. For some product descriptions, I added a link to the blog. Although the text is the most direct way to read, the web page should try to reduce the burden of users' thinking, so I choose to include as much information as possible in the picture itself. And one of the benefits of this is that consumers can know what my product is at first sight without reading it carefully. So I try to choose the colour with strong contrast effect to impress the users. These posters use 3D technology to make basic models, and after effect software to polish and typeset. The software used in this design is Cinema4D, Adobe After effect, Adobe Premiere and Adobe Photoshop. I will explain how I made these posters in the next blog.