Class Name: Basic Web Design
Soonho Shin, Ph.D.
Email: sshin2@calstatela.edu
Units: 4
Time: 3 hours a week and 10weeks
Web Site:
http://www.designshin.com/, http://designshin.blogspot.com
Purpose
-Mission statement
This class is introduced to the concepts and terms of web design including the Internet, the web, HTML, XHTML, style sheets, JavaScript, and graphic tools. The basics of how the Web works, including the protocols and acronyms. Web design consists of graphic and program parts. There are numerous web design technologies and database management systems (DBMS) available today, but none are as cost effective and robust as the marriage of Dreamweaver, PHP, and MySQL. This course focuses on how these technologies can assist the designer in creating dynamically rich content for the web. Exploration of Cascading Style Sheets (CSS) as they apply to dynamically driven websites will be examined. Photoshop is one of the most popular software and offers designers a rich assortment of editing tools with which to create compelling imagery for the web. Photoshop for the Web covers a wide range of uses for Photoshop in the web graphics workflow. After this course, you will be trained in these specific programs.
Course Objectives
Week 1.Introduce
Web designCurrent designers must envision compelling ways to facilitate rich interactive experiences. This course demonstrates the latest tools, techniques, and technologies used by leading agencies to develop world-class user experiences. Topics include conducting user research, developing user personas and scenarios, and introducing information architecture, system and user interface design, prototype creation, and usability testing and analysis.
Week 2. Learn HTML and XHTM
LHTML, an acronym for Hyper Text Markup Language, is the predominant markup language for web pages. It provides a means to describe the structure of text-based information in a document—by denoting certain text as links, headings, paragraphs, lists, etc.
Assignment: Build five pages for introduction homepage sample by HTML.
Week 3. Dreamweaver
There are numerous web design technologies and database management systems (DBMS) available today, but none are as cost effective and robust as the marriage of Dreamweaver, PHP, and MySQL. This course focuses on how these technologies can assist the designer in creating dynamically rich content for the web.
Assignment: Build five pages for introduction homepage sample by Dreamweaver.
Week 4. Learn style sheets
Those who are new to CSS, or who want to create more efficient and powerful style sheets, will benefit from Dreamweaver CS3 with CSS Essential Training. This class is the entire process of CSS management in Dreamweaver, following a step-by-step workflow. This class covers XHTML/CSS fundamentals, and working with typography, navigation, background properties, layout, and multiple media types.
Assignment: Build five pages for introduction homepage sample with CSS.
Week 5. Photoshop and Illustration
Develop advanced techniques and practical workflows. Learn path building, altering and fine-tuning, type issues, text effects, creating fonts, linked text, color usage and application, gradient mesh, path patterns and brushes, 3D packaging comps, and prepress issues. Projects are built around print identities, visual effects, and other high-level applications.
Assignment: Design Buttons, menus, banners.
Week 6. Flash and ActionScript
Learn Flash's advanced animation and scripting potential, with a focus on techniques to enhance interactivity and the user experience. Explore proper script syntax, logic, targeted objects, and timelines. Object-oriented programming concepts, such as variables, conditional statements, and loops are covered.
Assignment: Design Navigation menu and banner.
Week 7. Web Accessibility
Accessibility on the web has been an issue for over a decade, and it remains a crucial--but often overlooked--element of web design. This class covers how to set up accessibility testing for disabled people, and how to apply accessibility principles to new and existing sites using standards-compliant markup and CSS.
Assignment: Change the CSS for Web Accessibility.
Week 8. Develop a web site
Students develop and present a single comprehensive project for their portfolio that includes usability research and design.
Assignment: Plan and brainstorm for a commercial site.
Week 9. Build and publish a web site
Discuss and critique analyze about the web site.
Assignment: Build the web site.
Week 10. Feed back and analyze a web site
Discuss, critique and analyze about the web site.
Expectation for the Course
Normally at Computer rooms.Students are expected to attend every class session.
For successful completion of assignments and tests.
Know how to utilize the equipment.
If attendance is not possible, please contact the instructor beforehand to attend other sessions.
If you don’t, you won’t catch up with the class.
Reference Books
Adobe Dreamweaver Cs3 W Asp Coldfusion & Php (W/cd)
Author: Bardzell
ISBN: 9780321461063
Learning Actionscript 3.0
Author: Shupe
ISBN: 9780596527877
Friday, April 24, 2009
Tuesday, April 21, 2009
A Core Press of web design
What we are going to learn today is “ Knowing what the core process of web design is.”
I’ll introduce what the core process of web design is.
The core process has 5steps. Those are define, structure, design, build, and measure.
First of all, we must define the purpose for the web site.
The elements of defining are discovery, planning, and clarification. The web site’s main goals gather as much information as you can that are relevant to your project. Then you put it together. If we make a small site, such as my private homepage, we don’t need to work in teams. But, if we make web sites for Cocacola, Macdonald, Vons, Target, etc, we need to work together in teams. Because big sites need to process through marketing, large amount of information design, many pages and the adopting of high technological programs, and good design concepts.
Therefore we have to manage and plan to communicate briefly about the goals with the team. Most of the projects need to be planed by setting a budget, and scheduling are the team members. When the defining steps are clear, it can lead to the rest of steps, such as structure and design.
Phase 2 is about structuring sites.
It is important to understand the marketing address, like domain names, and environment of the client’s contents. Sometime, if we put in too much information together into the site without planning and structuring, this can confuse many users. We want to make very professional and expert sites for clients to earning money. We put in naming, labeling, and necessary user’s contents. Otherwise, the clients want to promote and advertise their company and products. So we need to handle that client view part is addressing content and auditing existing content, outline content and creating a content delivery plan.
Through this process, we can make site maps, settings, menu naming, and other conventions. Site maps are a sort of map for finding out of their connections and functions. For example, when we draw a picture, we sketch very briefly and then we draw very detailed. So now we make a structure for the page view. This process called wire framing, which addresses navigation, naming, labeling, and defining key user tasks.
As you can see, site map is a map for the whole site’s connection and structure. A site map’s structure can be divided into 3 kinds of structures; a tree structure, a web structure and mixed structure. In this case, it is a tree structure. Depending on the contents, the navigation structure changes to a hyper mark up on other pages. A more detailed on the structures information will be provided next time.
So now, if we saw a big tree and map for a web, we need to make a structure very detailed for its pages. Usually, we can compare web sites to print. Try to imagine a fashion magazine, There is a front page, back page, index page, sections for information and advertisements. In the same way, web sites include menus, logos, web site addresses, contents and section for information.
I’ll introduce what the core process of web design is.
The core process has 5steps. Those are define, structure, design, build, and measure.
First of all, we must define the purpose for the web site.
The elements of defining are discovery, planning, and clarification. The web site’s main goals gather as much information as you can that are relevant to your project. Then you put it together. If we make a small site, such as my private homepage, we don’t need to work in teams. But, if we make web sites for Cocacola, Macdonald, Vons, Target, etc, we need to work together in teams. Because big sites need to process through marketing, large amount of information design, many pages and the adopting of high technological programs, and good design concepts.
Therefore we have to manage and plan to communicate briefly about the goals with the team. Most of the projects need to be planed by setting a budget, and scheduling are the team members. When the defining steps are clear, it can lead to the rest of steps, such as structure and design.
Phase 2 is about structuring sites.
It is important to understand the marketing address, like domain names, and environment of the client’s contents. Sometime, if we put in too much information together into the site without planning and structuring, this can confuse many users. We want to make very professional and expert sites for clients to earning money. We put in naming, labeling, and necessary user’s contents. Otherwise, the clients want to promote and advertise their company and products. So we need to handle that client view part is addressing content and auditing existing content, outline content and creating a content delivery plan.
Through this process, we can make site maps, settings, menu naming, and other conventions. Site maps are a sort of map for finding out of their connections and functions. For example, when we draw a picture, we sketch very briefly and then we draw very detailed. So now we make a structure for the page view. This process called wire framing, which addresses navigation, naming, labeling, and defining key user tasks.
As you can see, site map is a map for the whole site’s connection and structure. A site map’s structure can be divided into 3 kinds of structures; a tree structure, a web structure and mixed structure. In this case, it is a tree structure. Depending on the contents, the navigation structure changes to a hyper mark up on other pages. A more detailed on the structures information will be provided next time.
So now, if we saw a big tree and map for a web, we need to make a structure very detailed for its pages. Usually, we can compare web sites to print. Try to imagine a fashion magazine, There is a front page, back page, index page, sections for information and advertisements. In the same way, web sites include menus, logos, web site addresses, contents and section for information.
Thursday, January 29, 2009
Movie review
http://www.youtube.com/watch?v=huBlNu8EcMw
The window
‘The window’ is third short film from Dark Heart Production. I think this movie tried to talk about before die as a new perception. The director is a 23 years young guy. ‘The window’ is talking about a young man (Joy) who was accident with his mother on a street but he didn’t know what happened to him. But he knew his situation the following.
Joy woke up surprisingly and checked time. It was 10: 13 in the morning. He had a medicine after breakfast. He looked very tired. When he went out of home, nobody was on a street. When he entered a restaurant there were many friends and welcomed him. He confused at everything. Further more his father who dead a few years ago was waiting him. The father told him what happened to him. This is unusual story and makes me think about life and die. Also I was impressed movie’s idea. The movie began Joy woke up at 10:13. But the end of movie's time was 10:13. This movie leads many thoughts. I recommend watching this movie. It’s very interesting.
The window
‘The window’ is third short film from Dark Heart Production. I think this movie tried to talk about before die as a new perception. The director is a 23 years young guy. ‘The window’ is talking about a young man (Joy) who was accident with his mother on a street but he didn’t know what happened to him. But he knew his situation the following.
Joy woke up surprisingly and checked time. It was 10: 13 in the morning. He had a medicine after breakfast. He looked very tired. When he went out of home, nobody was on a street. When he entered a restaurant there were many friends and welcomed him. He confused at everything. Further more his father who dead a few years ago was waiting him. The father told him what happened to him. This is unusual story and makes me think about life and die. Also I was impressed movie’s idea. The movie began Joy woke up at 10:13. But the end of movie's time was 10:13. This movie leads many thoughts. I recommend watching this movie. It’s very interesting.
Subscribe to:
Posts (Atom)