MY RESEARCH
Web Design Pioneers
Google slides – for presentation
Facebook Messenger – Exchanging information and way of contact with the group
Blackboard Collab – seeing each other face to face for discussion on the PowerPoint.
Ideas for slides:
• HTML- Tim Barnes Lee
• W3 Web Standards
• First official websites
• Development
• PHQ
• Java
• Python
• Design fundamentals
• Alignment
• Contrast
• White Space
• How Web has influenced to world
• Amazon
• PayPal
• Communication
Design Fundamentals
• PURPOSE / OBJECTIVE- Before touching any web-building application, you first need to clearly define your website’s main purpose or objective. best web designers are carefully tuned to the needs of their users and have a firm grasp of each website’s purpose, the type of content that should live on each page, and how each page should interact and relate to the rest of the website.
• GESTALT PRINCIPLES :
1. PRIORITY/ VISUAL HIERARCHY- Determine their rank based on how closely aligned elements are to the main purpose or objective of the website.
2. SIMPLICITY- To alleviate the frustration, follow the K-I-S-S rule and keep your website simple, direct, and easy-to-use.
• NAVIGATION- To alleviate struggle, it is key to employ a clear, simple, and easy-to-use navigation.
• MOBILE FRIENDLY/RESPONSIVE DESIGN- Web design that aims to provide to site viewers the best viewing experience possible across a wide range of devices. It is important to consider building your website with a responsive layout where your website can adjust to different screens.
• USABILITY- it’s the designer’s job to make absolutely sure the website functions well and is easy to use and become more interactive
White Space
• WHAT IS WHITE SPACE- White space is the area between design elements. It is also the space within individual design elements, including the space between typography glyphs.
white space does not need to be white. It can be any colour, texture, pattern, or even a background image. white space is a great tool to balance design elements and better organise content to improve the visual communication experience.
• MICRO AND MACRO WHITE SPACE-
1. MICRO- Find it between lines and paragraphs. It includes the space between grid images and that used to separate menu links. Micro white space has a direct impact on content legibility.
2. MACRO- Large space between major layout elements, and the space surrounding the design layout. Macro white space acts as a container of the overall design.
• PASSIVE AND ACTIVE WHITE SPACE-
1. PASSIVE- To improve the aesthetics of the layout without guiding the user through a specific reading, flow, or content order.
2. ACTIVE- Used to enhance page structure and help guide the user through the page’s content.
Alignment
• WHAT IS ALIGNMENT- Alignment is all about the positioning of your elements, including text and imagery, as well as buttons, and content boxes. Alignment means to position the elements within a straight line, or in the correct positioning.
• WHY IS ALIGNMENT IMPORTANT- There are Three crucial reasons why Alignment is important within web design.
1. RESPONSIVE DESIGN- From a device with a smaller screen size, such as a smart phone, the layout and structure will change to something that you have pre-planned.
2. FUNCTIONALITY- In general, your website elements need to align for full functionality. Misaligned text and imagery can also be very off putting, and become difficult to concentrate on. Text that is aligned in all different ways will certainly be difficult to read. The right alignment can avoid all of these issues, and keep your potential customers or clients happy.
3. PROFESSIONALISM- Using the right alignment in web design can be crucial for projecting the right image of professionalism and quality. Your website is a visual extension of your company that is displayed online.
Contrast
• WHAT IS CONTRAST IN WEB DESIGN- A web design is made of many different elements, Some elements share a relationship, while others are not related at all. Contrast comes in to communicate visually and effectively. Contrast is the difference between two or more elements. visual interest and direct the attention of the user.
• WHERE DOWE FIND CONTRAST IN WEB DESIGN- Contrast can be achieved by creating differences in three aspects of design: colour, size, and alignment.
1. COLOUR- Establishes the content as being different and even more important than the other areas. Even though the principle of contrast is not limited to colour, it can go a long way in helping the user differentiate page elements from one another.
2. SIZE- Creating contrast through size becomes very important when you can’t rely on colour. In other words, make some things bigger than others. Establishes a hierarchy,
3. ALIGNMENT- Good alignment plays a big part in creating a quality web design. Things just look better when they line up. This is why I think using different alignments to create contrast is tricky and should be used sparingly. However, when done well it can be very effective in creating separation.
REFERENCES AND WEBSITES I USED
https://graybox.co/knowledge/blog/the-fundamentals-of-effective-web-design
https://www.techrepublic.com/blog/web-designer/effective-design-principles-for-web-designers-alignment/
https://www.interaction-design.org/literature/article/the-power-of-white-space
Powerpoint Points
White space
• What is White Space?
• White space is the areas that are between the Design elements and also in individual design elements such as the space between typography. White space doesn’t have to be white; it be a different colour, pattern or a background image.
• Why use White space?
• It allows a sense of balance and visual communication.
• What is Micro and Macro white space?
-Micro: The white space between lines and paragraphs along with the space between grid images.
-Macro: The space between bigger elements along with the space surrounding the main layout.
• What is Passive and Active White Space?
-Passive: Improves the visual layout but doesn’t guide the user through content flow.
– Active: Enhances pages structure and has a User friendly guide flow to the content.
Alignment
• What is Alignment
– Alignment primarily focuses on the positions of the design elements such as text, images and web buttons. Alignment is putting these elements into the correct positioning and within a straight line.
• Why is Alignment important
– There are three important factors that makes Alignment crucial in web design:
1. Responsive Design- when viewed on a smaller screen, alignment is needed to make sure that web design is accessed by that user.
2. Functionality-To create functionality, you need to make sure all website elements are fully aligned as the right alignment helps avoid potential issues and keeps users satisfied.
3. Professionalism- With the correct alignment, it helps input the level of quantity in your web design, along with portraying the right image to users.
Contrast
• What is Contrast within web design?
– Contrast helps in identifying elements that are related to those who aren’t. This helps in visual communication and helps direct the users attention.
• Where do we find contrast in web design
– There are three different aspects of contrast in web design: colour, size and alignment.
1. Colour- it is a massive contributor to establishing a huge difference between elements as it is very clear to the user to see contrast.
2. Size – If you can’t rely on colour, the use of size becomes crucial as making certain elements bigger and smaller than another can help establish a hierarchy to the user.
3. Alignment- Having good alignment is very helpful in web design, however though it could be tricky and shouldn’t be overdone, using alignment for contrast could be very effective to show separation.
Link to PowerPoint
https://docs.google.com/presentation/d/1wvCAAd_U5v8vEXFhee_cATX0eHQvdOL3VafS4Rdb0vo/edit#slide=id.g100610218c1_1_526