Www.ednovo.orgPage 1 of TOTALwww.ednovo.orgPage 1 of TOTAL Gooru UX Style Guide 8/3/2011.

Slides:

Advertisements

Similar presentations

Copyright © 2003 Pearson Education, Inc. Slide 3-1 Created by Cheryl M. Hughes The Web Wizards Guide to XML by Cheryl M. Hughes.

Advertisements

1 Lesson 5. 2 R3 R1 R5 R4 R6 R2 B B A A

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.

Cascading Style Sheets

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.

CSS. Intro to CSS Cascading Style Sheets – styles and enhances appearance of webpage.css extension.

CSS Евгения Ковачева. BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 11pt; BACKGROUND: #ffffff; PADDING-BOTTOM:

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Very quick intro HTML and CSS. Sample html A Web Title.

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

Links.  Styling Links  Links can be styled with any CSS property (e.g. color, font-family, background-color).  Special for links are that they can.

HyperText Markup Language (HTML) Uses plain text to add markup instructions to a file. If you can't produce it with a standard keyboard, it can't go into.

Principles of Web Design 5 th Edition Chapter Nine Site Navigation.

Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.

CSS Link Styling. The Anchor Element: Link text between the opening and closing can be styled using CSS. Some of the properties that can be set are: font-family,

Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.

1 Module 6. More on File Management. 2 Update banner.jpg file from File Management. The banner must be 940px wide. Step 1. Click on the File Management.

1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.

CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.

Cascading Style Sheets Based on Castro, HTML for the WWW, 6 th edition Ron Gerton, Fall 2007.

CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.

Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.

Part 3 Introduction to CSS. CSS Text Text Styles h1 {color: green} // rgb(0,255,0), #00ff00 h2{letter-spacing: 0.5cm} // 2px h3 {text-align: right} //

Diliev.com & pLOVEdiv.com  DIliev.com.

กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.

Unit 20 - Client Side Customisation of Web Pages

Designing a Poster Difference between content, layout and styles Miss Allgar.

Difference between content, layout and styles Miss Allgar

1 Home Tab Font Group 5 6 To change the font shape: 1- select the text you want to change 2- from font type drop down list choose any type.

MAINTAINING A WEBSITE If you build it, will they come?

CSS Properties on Parade PropertyValid valuesExample font-familylist of fonts (separate with commas, end with generic font: serif, sans-serif, fantasy,

7 Selecting Design and Color Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2.

MS-Access XP Lesson 5. Creating a Query with Expression Builder Eg. Consider the following table. Table Name: Overtime Fields & Data types: Emp No (Number),

FORMATTING TEXT. OBJECTIVES Change the font Change size, color, and style of text Use different underline styles and font effects and highlight text Copy.

Guidelines for Preparing Slides Presentation title Speaker name, credentials.

Presentation Guidelines. Topics No more than one topic per slide If necessary, one topic may be continued onto another slide.

Tips for Developing Your PowerPoint Presentation The following recommendations are easy to implement and result in better communication of the educational.

Continued BrokersLink Redesign. General Changes All Headlines, Main Nav options and Sub Nav options will be in the Google font Roboto Slab (Normal 400.

LESSON 4 Formatting a Worksheet. Borders are often used to separate different groups of data. 1. True 2. False

COLOR In Web Design. Designing with Color Use contrasting colors Using a small palette of colors helps unify and enhance a design Using a dominant color.

How to Create a Clean Website Layout in Photoshop Part 2.

Icons, links and buttons We have a unique icon design principle. Our icons are based on the same irregular circle shape with a clear graphic pictogram.

Web parts, elements and user controls Width: 350 px / Height: 125 px Rounded corners: Rounding 6 px Background color: ? Name text: Arial, Bold, 12 px,

Excel 2010 Formatting Cells. Formatting text To change the font:

Navigation Typography– Mega Drop Down Menu 1 Wide Desktop Login: Arial, Regular, 14 px, #f08c00 Hover: Underline Toolbar link: Arial, 11 px, #999999, underline.

Log in – Header area 1 Lock icon size 14 x 18px. Mobile: Lock icon Tablet, Desktop and wide desktop: Lock icon + text ”Logg in” Log in text: –Font: Arial,

APAN Branding Guideline 18 June Title Slide 01 APAN Version.

Open Office Writer Section 01 - Formatting Document Prepared by: IT Group.

Picture with at least 1000x1000 pixels size

Create a new stylesheet called Hotel Style

Link Label Text Label… Click Here… Image Image Lorem Ipsum Lorem Ipsum

Get folder Find page in folder for “Finding Inspiration in Words”

Click to insert title - Arial 40pt

TITLE PAGE: MAIN TITLE Sub-title

Poster Presentations Loren D. J. Baxter

Speaker Name (Click to insert your text)

Paper Title as it appears on the PDF

Speaker Name (Click to insert your text)

Click to insert title - Arial 40pt

Picture with at least 1000x1000 pixels size

Logo of your institution (if available)

Click to insert title - Arial 40pt

Picture with at least 1000x1000 pixels size

Logo of your institution (if available)

Principles of Web Design 5th Edition

Line images up with equal spacing for a clean look.

Click to Insert Title - Arial 36pt

Select and use different forms of navigation site planning techniques

Logo of your institution (if available)

Presentation transcript:

1 of TOTALwww.ednovo.orgPage 1 of TOTAL Gooru UX Style Guide 8/3/2011

2 of TOTAL Logos Gooru Font: Cambria Colors: #4e9746, #1076bb Tagline Font:Bradley Hand ITC Color:# Ednovo Font: Rage Italic Std Colors: #4e9746, #1076bb Tagline Font:Arial Color:#999999

3 of TOTAL Colors Gooru Green#4e9746R:78 G:151 B:70 Gooru Blue#1076bbR:16 G:118 B:187 Orange#fbb03bR:251 G:176 B:59 Yellow#ffffccR:255 G:255 B:204 Darkest Gray#515151R:81 G:81 B:81 Dark Gray#999999R:153 G:153 B:153 Light Gray#ddddddR:221 G:221 B:221 Lightest Gray#e7e7e7R:231 G:231 B:231

4 of TOTAL Fonts Arial Use: Default for all text, Ednovo tagline Rage Italic Std Use: Stylized and Specific Situations, Ednovo logo Cambria Use: Gooru logo Bradley Hand ITC Use: Gooru tagline

5 of TOTAL Building Blocks Links Default: #1076bb, undecorated Hover: Underlined Active: -- Visited: -- Buttons Default: Color: # Weight: Bold Rounded Rectangle: 4px Radius Background Color: #e7e7e7 Border: 1px solid # Hover: Border: 1px solid # Background Color: #dddddd Background Gradient: #dddddd to #e7e7e7 Active: Color: #e7e7e7 Background Color: # Visit Site

6 of TOTAL Building Blocks Page Titles Font Size: 40px Color: # Section Titles Font Size: 16px Color: # Weight: Bold Special Section Titles Font Size: 16px Color: #4e9746 Weight: Bold Page Text Font Size: 12px Color: # User Input Fields Font Size: 12px Color: #000000

7 of TOTAL Icons