Week 4

Practical

Searching for ideas about web banner design,

Fonts are the main design content. Using a simple font type, such as a sans serif to achieve the balancing in design while contrasting with the richness of the photo.

Using yellow grid to make contrast with monochromatic photo. While emphasizing the main subject, always has the balancing with the visual hierarchy. The edges of the web page are designed with lines to create a simple atmosphere.

Adopted photos in different compositions to create different layers of design. With using sans serif fonts to create spacing between the photos to avoid overcrowding.

Hand Drawing Sketches:

Using rough sketches to design the visual hierarchy of the web page. This can help to formulate the web page style before entering the formal design and help analyze which design is more suitable.

Banner Digital Sketches:

At this stage, the main design style has been confirmed and the design is assisted based on the references available. Various design possibilities are continuously explored at this stage to obtain the final satisfactory design layout.

Banner Design:

The first version of web banner design and layout. The overall design uses black as the main color to show a serious and mature attitude to users. It is worth noting that the black code number #000000 is not used as the design color here, but is replaced by the color with code#191919. It is close to black. This is because using a pure black background with white text will cause visual fatigue due to the high contrast when users browse the web for a long time.

Adopting a light yellow grid in portrait photos to create an emphasizing effect. In this photo the upper half of the face is cropped to create a different design element. But this will result in the overall visual loss of guidance effect.

This is because the visual order of the page should start with the bodycopy on the left and gradually move towards the photo on the right. Even if the person's eyes are cropped in the photo, the user will continue to be guided by the direction in which the eyes are looking due to human habit. The lack of design in this area resulted in flaws in the overall design.

Final Web Banner Design:

After discussion and adjustment by the assisting of lecturer, the problem was resolved by using a complete portrait photo to replace the original blank design area. It can not only act as a guideline for the users, but also form a looping in the visual. This will cause users to browse more than one time of the web banner content unconsciously.

Lecture

Photos have a significant impact on web design. Whether a user stays on a webpage depends largely on the quality of the photos, as the primary focus of most webpages tends to be the content of the photo, followed by the layout. Therefore, selecting appropriate photos for web pages has become a crucial consideration for web designers.

Firstly, it's essential to choose photos that are meaningful and of high quality. This entails designers relying on their own logic to analyze what type of photos the webpage requires. An attractive photo that doesn't align with the webpage's style won't capture the user's attention and may even lead to a misunderstanding of the webpage's content. Additionally, designers use their expertise to assess photo quality, considering factors such as exposure, composition, and the photo's ability to evoke emotion.

Even with a perfect photo, designers must still use it judiciously during the design process to maximize its advantages and highlight it to users. Therefore, composition is key. Furthermore, making effective use of graphic icons and symbols to guide users through the webpage is crucial. These elements serve as the primary connection between designers and users. Designers should utilize these techniques to ensure that the designed webpages strike a balance between aesthetics and functionality, providing an optimal user experience.