republic of iraq ministry of ... - university of babylon · lect. (2) rafid sagban...
TRANSCRIPT
Republic of Iraq
Ministry of Higher Education and Scientific Research
University of Babylon
Information Technology College
Information Networks Dept.
Lect. (2)
Rafid Sagban
Ph.D Information Technology
University of Babylon,
Faculty of
Information Technology
2017
Color theory
z A primary color is a color that cannot be made from a combination of any other colors.
z A secondary color is a color created from a combination of two primary colors.
z Tertiary color is a combination of three colors (primary or secondary).
Color Symbolism
z Use Color to convey meaning:
y Black: power, stylish, timeless
y White: purity, summer
y Red: action, confidence, courage
y Green: life, nature
y Blue: Loyalty, truth, peace
z Print:
y CMYK: cyan, magenta, yellow
and black
y Subtractive or Reflective colors
z Screen display:
y RBG: red, blue, green
y Additive colors
Colors’ systems
Web colors: screen display
z Pixel (picture element): x & y coordinates
z Color depth (resolution):
y 1-bit 2 colors (black & white)
y 8-bit 256 colors
y 16-bit thousands of colors
y 24-bit millions of colors (true color)
Web color: HTML
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Color value: Hexadecimal notation
Color name: Black, coral…
z Build hierarchy, structure, organization
z Create context
z Enhance content
z Draw attention
z Provoke emotions
z Convey meaning
z Visual communication
z Aid to metaphor, navigation, label, logo, graphics...
Importance of Colors & Typography for the Web
The Web canvas
z As a web designer, you’ll always need to keep image dimension in mind. Your
canvas (the computer monitor) contains fixed display dimensions ranging
from 640x480 to 1280x1024. Most people keep their monitors at 1024x768 or
more.
z If you know you’re designing for an 800x600 screen (which is the norm),
you’d also want to subtract some space for the browser.
z Examples: Sizes to use to account for screen and browser dimensions
Screen Dimensions Browser Dimensions
800x600 775x420
1024x768 1000x600
The Web canvas
History of web typography
z 1990: HTML:
z HTML was invented in 1980 by Tim Berners-Lee.
z In 1990 he wrote web browser software.
z It was up to the web browser’s preferences to show the desired font style.
z 1995: INLINE TAGS:
z Netscape Communications Corporation created the inline font tag which only worked if the desired font were installed on the user’s computer.
z Standard fonts earned the term “web safe.”
History of web typography
z 1998: FONT DOWNLOADING:
z CSS was first introduced in 1996.
z It allows web designers to set a specific font by either be installed on the computer or set as an image. The problem with setting the fonts as an image was that the load time.
z In 1998, CSS2 allowed fonts to be incorporated without having to be installed on the user’s computer in a program called font downloading. This concept was still big to load, so it did not get much use, and web designers were still sticking to web-safe fonts.
History of web typography
z 1999: CSS3:
z After 1999, thousands of custom fonts is created and made available online.
z The problem was how to protect embedded commercial fonts from being downloaded and freely distributed.
z Because of this font licensing problem, many websites didn’t break away from standard, web safe fonts.
z 2004: SIFR:
z In 2004, an open source JavaScript and Adobe Flash dynamic web fonts implementation called SIFR was invented.
z It was too big to load. This increase page loading time.
History of web typography
z 2008: SUBSCRIPTION HOSTING:
z In 2008 a company called Typekit started hosting custom fonts for a subscription fee.
z TODAY: BROWSER EMBEDDING:
z With the rise of mobile devices, web browsers after 2008 started to allow font embedding.
Example: Google’s typography
As a practice, it has
been around for
thousands of years
In the US, it grew into
a profession after
WWII.
Graphic design applications
It shares aspects of
engineering, but with
aesthetic, communicative
aspects and consumer appeal.
Web design
z Web design is the creation of a new solution to a problem in
the web medium. It includes some or all of the following:
y Logo design
y User interface design
y Copywriting
y On-site SEO
y Social media promotion
y Information architecture
y Navigation design
y Design for accessibility
y HTML/CSS mark-up
y Design for ease-of-use
(usability)
y Selecting content imagery
y Flash animation
y JavaScript coding of UI
elements
y Pay-per-click advertising
What you need for web graphic design?
z You will need a source for graphics or be able to create your own. The flexibility of knowing how to design your own graphics is preferable. Adobe Fireworks, Adobe PhotoShop, Adobe Illustrator, Adobe InDesign or any other graphic design application are great programs for creating graphics, retouching photographs, designing text and building animated GIFs.
z To create the individual pages of a web site you need to be familiar with a web authoring program, or be knowledgeable in HTML and CSS.
z Although it’s useful to know HTML and CSS, it’s not a necessity for web design. With the tools and software programs today (such as Adobe Dreamweaver) you can create a web page or add pictures and text to a page without typing a single line of code.
Web design & graphic
Web Page Anatomy
• Containing Block
• Logo
• Navigation
• Content
• Footer
• Space 18
Containing Block
every web page has a container. This could be in the form
of the page’s body tag, an all-containing div tag, or a
table. Without some sort of container, we would have no
place to put the contents of our page. The elements would
drift beyond the bounds of our browser window and off
into empty space. The width of the container can be
liquid, meaning it expands to fill the width of the
browser window; or fixed, so that the content is the same
width no matter what size the window is.
19
Logo
when designers refer to an identity, they’re referring to
the logo and colours that exist across a company’s
various forms of marketing, such business cards,
letterhead, brochures, and so on. The identity block that
appears on the web site should contain the company’s
logo or name, and sit at the top of each page of the web
site. The identity block increases brand recognition and
lets users know that the pages they’re viewing are part of
a single site.
20
Navigation
it’s essential that the site’s navigation system is easy to
find and use. Users expect to see navigation at the top of
the page. Whether you plan to use vertical menus down
the side of the page, or a horizontal menu along the
page’s top, the navigation should be as close to the top of
the layout as possible.
21
Content
content is king. A typical web site visitor will enter and
leave a web site in a matter of seconds. If visitors can’t
find what they’re looking for, they will undoubtedly
close the browser or move on to another site. It’s
important to keep the main content block as the main
point of a design so that precious seconds aren’t wasted
as visitors scan the page for the information they need.
22
Footer
located at the bottom of the page, the footer usually
contains copyright, contact, and legal information, as
well as a few links to the main sections of the site. By
separating the end content from the bottom of the
browser window, the footer should indicate to users that
they’re at the bottom of the page.
23
Space
The graphic design term space (or negative space) literally
refers to any area of a page that’s not covered by type or
illustrations. While many novice web designers (and most
clients) feel a need to fill every inch of a web page with
photos, text, tables, and data, having empty space on a
page is every bit as important as having content. Without
carefully planned Space, a design will feel closed in, like a
crowded room. Space helps a design to “breathe” by
guiding the user’s eye around a page.
24
Thanks you
25