0359733 Interactive Design -task 1- exercise
Interactive Design -task 1- exercise
week1 -week15
Bachelor of Design (Honours) in Creative Media
WEEK 2
The design process is typically a systematic approach used to develop creative projects, products, or solutions to problems. In this phase, the emphasis is on understanding the needs and emotions of users, clients, or target audiences. Designers need to actively listen and observe to build a deep understanding of them. This often involves interviews, surveys, and observations.
In this stage, designers organize and analyze the collected information to define problem statements or project objectives. This helps ensure that design work focuses on addressing key issues.
The ideation stage is the core of creativity, where designers generate various possible solutions, freely presenting various ideas and concepts. This often involves brainstorming, sketching, and model making.
These steps and principles help designers ensure that their work is purposeful, user-oriented, and ultimately meets user needs. The design process is typically iterative, with designers revisiting previous steps multiple times for improvement and optimization.
WEEK 3
Header:
The header is typically located at the top of a web page and is the first section users see when they enter a website.
The purpose of the header is to provide users with quick access to key information and navigation on the website, allowing them to easily find the content they need or perform desired actions.
Well-designed headers contribute to brand recognition and enhance the overall user experience of the website.
Footer:
The footer is usually situated at the bottom of a web page and is what users see after browsing the page's content.
It includes important information such as copyright details, links to privacy policies, contact information, social media links, and more.
The footer may also contain navigation links that enable users to quickly access other essential pages of the website, such as the "Contact Us" or "FAQ" pages.
The footer serves as a fitting conclusion to the web page, providing users with additional information and navigation options.
Headers and footers are two vital components of website design, playing a crucial role in providing information, navigation, and enhancing the user experience. Designers typically strive to ensure that these elements maintain consistency in layout and appearance with the overall design of the website to deliver a unified user experience.
WEEK 4
Basic Code Knowledge and Some Classroom Exercises
HTML is the foundation of web development, used for creating webpage structure and content.
Classroom exercises may involve creating HTML tags such as <html>, <head>, <body>, <p>, <a>, etc., to build webpages.
WEEK 5
In the fifth week of class, the teacher explained to us what CSS is and it is a method to use in HTML documents. It separates content from design, allowing developers to define styles such as fonts, colors, spacing, and web layout. It promotes responsive design, animation, and the creation of visually appealing and user-friendly websites, CSS uses selectors to target specific HTML elements, and supports the concept of cascades, where rules can overlay each other according to specificity and order.
WEEK 6
Cascade: "Cascade" means that when multiple CSS rules are applied to the same element, they are stacked according to specific rules. This allows you to apply different styles to the same element, with some coming from a global style sheet and others potentially from local styles for specific pages or elements.
Selectors: CSS uses selectors to target HTML elements for applying styles. Common selectors include tag selectors (e.g., p for paragraphs), class selectors (e.g., .my-class for elements with specific class names), and ID selectors (e.g., #my-id for elements with specific IDs), among others.
Box Model: In CSS, elements are treated as rectangular boxes with properties such as padding, border, and margin. These properties can be controlled through CSS to determine the size and positioning of elements.
List style：
ul {
list-style-type: disc;
}
This example selects unordered lists (<ul>) and sets their list marker style to a solid bullet point.
WEEK 7
The <div> is mainly used to organize the structure and layout of the web page. Typically, the <div> element has no specific semantics, but is used to group other elements and provide style control. For example, you can use <div> to create the header, sidebar, footer, and other structural components of a web page.
<div class="header">
<h1>aaaaaa</h1>
<p>aaaaa</p >
</div>
The <span> is primarily used to style or add additional semantics to a portion of text or inline elements. It is often used to precisely control the style of text, such as changing colors, bolding, italics, and so on.
The <span> element usually does not affect the overall layout of the page, as it only affects the content it wraps around. <div> and <span> are common tools in HTML for organizing content and applying styles. <div> is used for block-level elements, usually for layout.
WEEK 9
In this week, we welcomed the arrival of the final project, marking our last task in this course. Mr. Shamsul introduced us to the theme and knowledge of this assignment, outlining his expectations. This will broaden our practical application skills, focusing on design elements and user interface interactions relevant to daily life. We are required to apply these concepts and transform them into HTML and CSS to create a new web design.
This demands both patience and precision as we intricately weave these elements together to form a cohesive webpage. This final task serves as a crucial practical application of the knowledge acquired throughout the course, preparing us for future work in the field.
WEEK 10
In Week 10, we began the preparations to decide on the theme for the final project. We were required to explore well-designed websites for visual references in crafting our own work. Additionally, following the instructor's instructions, we needed to select the protagonist or subject for whom we wanted to create the website. This step is crucial as the content presented on the final webpage will be associated with the chosen protagonist and theme.
WEEK 11
In Week 11, the instructor discussed the need to integrate the finalized layout design and apply the design patterns using HTML and CSS code. Web design and code are interrelated, requiring a well-crafted layout to effectively showcase the visual aesthetics of the website.
WEEK 13
In Week 13, concerning new knowledge, we delved into the use of various editing tools and the addition of buttons in the design of relevant pages. Additionally, we applied all the knowledge acquired to our current project, as per the instructor's requirements. This not only enhances the overall aesthetics of the page but also lays a better foundation for future courses.
LECTURES
Exercise 1
Instructions:
Select TWO (2) websites from the provided links. Carefully review the website you've chosen, paying attention to its design, layout, content, and functionality. Identify the strengths and weaknesses of the website and consider how they impact the user experience. Write a brief report summarizing your findings and recommendations.
What to Include in the Analysis:
Consider the purpose and goals of the website and assess whether they are effectively communicated to the user.
Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
Assess the functionality and usability of the website, including navigation, forms, and interactive elements.
Evaluate the quality and relevance of the website's content, including accuracy, clarity, and organization.
Consider the website's performance, including load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:
Write a brief report summarizing in no more than 500 words. You can include a screen capture of each section or page of the website for illustration. Ensure that the report's formatting is clear, including headings and subheadings.
Exercise 2
Instructions:
Your task is to replicate the main pages of TWO (2) existing websites provided in the link below to gain a better understanding of their structure. Choose any two from the provided link. Follow the width and height dimensions of the existing websites. This exercise will help you develop your design skills using software like Photoshop or Adobe Illustrator and gain insights into web design best practices. You can use images from a stock image library or free stock icons. The images you use do not have to be exact replicas of those on the original websites; you may replace them with similar images. Focus on replicating the layout, typography, and color scheme. To find similar fonts, you can download fonts from Google Fonts. You may need to take screenshots of the websites and then begin replicating the pages.
For the second exercise, I believe it's an opportunity for us to expand our understanding of how to create the internal pages of a website. I choose to use Adobe Illustrator for this exercise, and I will source relevant images based on the websites provided by the instructor.
Figure 2.1 Morgan Stanley's Original web page
评论
发表评论