BHGD3134 WEB DESIGN & PRODUCTION - WEEK 3 & WEEK 4 PROGRESSION

BHGD3134  WEB DESIGN & PRODUCTION

WEEK 3 PROGRESSION (A1)

PRACTICAL (WEDNESDAY, 6 MAR 2024)

Creating Website Banner (A1)

Reference #1

Crumple: document workflow management

by Vladimir Gruev

The overall banner design is not too minimalist but still able to showcase a very neat layout. The right size of the subject matter image and font size are the perfect readability. It easily can make the audience to pay attention to the first thing the designer want them to.

Reference #2

Law Firm Branding

by Amber Asay

This banner overall theme is monotone Black and White makes the whole design neat and profressional. Besides, the designer make a good use of font size to showcase which text / content is more important to be read first.

Web Banner Sketches

These are some of the sketches / ideas for the website banner, and the chosen photographs of myself. 

 

LECTURE (FRIDAY, 8 MAR 2024)

On the third week lecture of the semester, the lecturer focused on the topic of how and comprehend the principles behind effective website layout design and explore how professionals have honed their skills in this creative discipline. Firstly, The framework that establishes a website's structure is called a layout. The layout gives users an easy way to navigate the website by putting its main components front and center. One important factor that affects whether a website succeeds or fails is its layout. Enhancing user engagement, creating visually appealing web pages, and arranging the content of the site so that it makes sense are the three main objectives of website layout.

Starting off with the website header, the header of your website should always have the most basic navigation components that explain the fundamental layout of your website and how to locate the content you're looking for. Next is the page body, which is the major body of your website that includes your primary messaging, visual material, and so on. The navigation menu is located in the body of the page, and it can appear as a sidebar, hamburger menu, sub header, mega menu, scroll-triggered, sticky, or fixed menu, among other formats. Then, regardless of height or length, the website footer will always appear at the bottom of the page. Footers typically include links to social media platforms, copyright disclaimers, and privacy policies, in addition to other optional elements like a copy of the menu text from your header and call-to-actions like "subscribe," "contact us," or even a submission form.

Moving on, the lecturer has brief on the five different website layouts:

1. Single Column Layout 

- The primary content of single column layouts is displayed in a single vertical column. The large-sized photos are clear and sharp, and there is an abundance of white space surrounding the content, making scrolling easy. The page's primary material appears so thorough and detailed because of this creative use of white space.

2. Two Column Layout

- A page with two vertical parts or columns that divide the screen into two portions (which may be equally wide or unevenly divided) is referred to as having a two column layout. For pages with two primary pieces of content that are equally important, two column layouts are advised.

3. Split-screen Layout

- When the primary content area of a page is split into two or more vertical sections, this is known as a split-screen layout. 

Split-screen layouts can provide your users with an unparalleled viewing experience if they are divided logically and systematically.

4. Asymmetrical Layout

- This comprises full-sized images, images with filters, plain squares with a background that is solid, and text that is centered. Naturally, the full-width video background slideshow is also diverse since it incorporates a variety of media, including both genuine footage and graphical videos.

5. Grid Layout

- A grid layout gives you the chance to display numerous images and artistic creations in a single interface. The task of balancing various color contrasts is a constant difficulty in web design. This design decision, which begins as a modular grid and transitions to a hierarchical grid structure approximately halfway down the page, informs users as to which work might be more prominent within the portfolio.

WEEK 4 PROGRESSION (A1)

PRACTICAL (WEDNESDAY, 13 MAR 2024)

Website Banner Digital Sketch

Website Banner Final Design

LECTURE (FRIDAY, 15 MAR 2024)

On the fourth week lecture of the semester, the lecturer brought the student through how to create a good website by designing layout and content, in this sense means images. Choosing a good image is very important in executing the website design, it gives a visual impact to the audience on the first impression. The good used images can help in connecting the designer with the targeted audiences, but if is utilised wrongly it will bring a wrong meaning or message to the audience. 

There are 4 types of images that can be used in a website design. 
1. Logo 
2. Photos

3, Illustrations

4. Charts, Tables and Infographic

Few of the important rules when it comes to design a website layout, a visitor should be able to understand the purpose of the website and how it can help them as soon as they land on it. In order to entice visitors to learn more, use compelling, impactful images on the home page and other landing pages that clearly communicate the site's goal.  Furthermore, use high-quality photos at all times. Take note of the size and quality of the photographs on your website. Lighting and composition are two crucial components of photography that work together to create stunning images. The Rule of Thirds is one of the most important rules to remember when shooting pictures. Images that are characterized by a particular feeling of order appeal to us. One of these entails placing the topic at or along one of the divides made by dividing photos into thirds. The rule of thirds is useful for cover pages on the web. 

This is due to the fact that a headline and call to action will frequently accompany an image. Select a picture that makes the call to action stand out. 

Besides from photos, software has used icons for many years as a visual indication to users to complete tasks. However, they also offer a useful means of giving your website's users options when there are plenty to choose from. Last but not least, Data can be communicated in an interesting way with the help of charts. Create an infographic with charts, pictures, and brief text if there is a lot of data. Infographics remove the need to read and comprehend convoluted textual rows and columns.