A Quick Review of Color

In the graphic and web design, designer really must consider the colors used in the design to set the right mood and to convey a deliberate feel or emotion that supports the information within design. Let’s take a look at the color wheel for a quick review of color!

types_of_colors (1)

The three primary colors are: red, blue and yellow.

primary-color

And the three secondary colors are orange, green and violet. The secondary color are created by combining two adjacent primary color.

secondary-colors

Then, if you combine a primary color with a secondary color, you will get what’s called teriary color. Example: Yellow and green create yellow-green, red and orange create red-orange,…

teriary-colors

So, What happens when you add white to a color? Well, you get what’s called a tint. The more white you add to a color the lighter the tint. Similarly, when you add black to a color, you get what’s called a shade. The more black you add, the darker the shade. Here’s a look at the complete color wheel with all of the primary, secondary, and teriary color along with each of their tints and shades:

color-wheel

Some Color harmonies:

  • Monochorme: Monochrome color represent a single color and all of its interations from white to black, example:

monochrome-color

  • Complementary: Complementary color represent a pair of color at opposite ends of the color wheel, example: red vs green, violet-red vs green-yellow:

complementary-color

  • Split complementary: Split complementary color harmonies are created when you select a main color like yellow-orange, and the choose two colors on either side of that first color’s complement, here is blue and violet, or instance is red vs green-yellow and blue-green.

split-complementary-color

  • Analogous(adjacent): Analogous colors or adjacent colors, are created when you pair any 2 or more colors that are right next to each other on the color wheel, example: orange-yellow vs yellow, or blue, blue-violet, violet:

analogous-colors

  • Triad: Triads are any three colors that are equally distant on the color wheel, like violet-red, orange-yellow, and blue-green, or red-orange, green-yellow and blue-violet, …

trias-color

8 Basic Elements of Design

In Design school, graphic and web designers often learn about the formal principles and elements of design. These concepts can and should be used as guides in making important aesthetic decisions that can help youcrate mor unique designs. So what are the elements of design? How many elements of design do we need to learn?

Untitled-1
The main difference between principles and elements is that principles are like the rules you should follow while elements are the things that will help you follow those rules for the best outcome. How many elements of design do we need to learn? There is some debate over how any elements there actually are. Depending on who you talk to, some six, some say ten,..  So for out purposes with regard to designing for the web, we are going to say that there are eight elements of design and they are in no particular order:
  • Texture
  • Value
  • Color
  • Shape
  • Space
  • Type
  • Form
  • Line
Notice: if you’re like me, and you have trouble remembering huge lists, you might want to use an pneumonic device, that you can easily reorder these words in any way that makes sense to you to make up an easy to remember sentence like this one that I made up:
remember
And first letter of each word corresponds to one of the words in the eight elements of design.

4 Basic Phases of Web Design

There are numerous steps in the web site design and development process. From gathering initial information, to the creation of your web site, and finally to maintenance to keep your web site up to date and current. But, this post only focus to “How to create a Website?”.

web design word cloud on blackboard

Phase One: Plan your content

Planning good content is arguably the most important phase in web design. This is also the stage that can take the longest amount of time, but it is worth doing it well. A good content plan will increase the presence and usability of your site as well as speed up web development.

business plan with cup of coffee

Some key points to keep in mind are to know your audience, short and concise is usually better, think about how others will search for your site, and organize content logically.

Certain things to consider are:

  • Purpose
    What is the purpose of the site? Do you want to provide information, promote a service, sell a product… ?
  • Goals
    What do you hope to accomplish by building this web site? Two of the more common goals are either to make money or share information.
  • Target Audience
    Is there a specific group of people that will help you reach your goals? It is helpful to picture the “ideal” person you want to visit your web site. Consider their age, sex or interests – this will later help determine the best design style for your site.
  • Content
    What kind of information will the target audience be looking for on your site? Are they looking for specific information, a particular product or service, online ordering…?
Phase Two: Wireframe your design

A wireframe is a blueprint, or an abstract visual representation, of a website that makes it easier for you and your team to collaborate during the design and planning stage. Wireframes can be simple diagrams drawn by hand for quickly getting ideas down wherever you are, or they can be a more complex definition of a website's navigation and functionality.

athayde-homepage

Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. If you've yet to use wireframing, it's time to get your feet wet.

Phase Three: Create web pages

Now it's time to put that great design and planning into action. To bring a conceptual plan to life, it is important to understand the languages of web design. The main focus for this series will be on HTML and CSS with a sneak peek into JavaScript.

HTML, or Hypertext Markup Language, is used to create the overall structure and content of the pages in your website. CSS, aka Cascading Style Sheets, is used to style visual properties of website's content and customize the layout. JavaScript is a popular language you can use to add functionality and interactivity to web pages.

At this time, your web designer will take all of the individual graphic elements from the prototype and use them to create the actual, functional site.

This is typically done by first developing the home page, followed by a “shell” for the interior pages. The shell serves as a template for the content pages of your site, as it contains the main navigational structure for the web site. Once the shell has been created, your designer will take your content and distribute it throughout the site, in the appropriate areas.

Phase Four: Publish your website

Once you are ready to publish your website for the world to see, you'll need a few things. First, you'll have to get a domain name, or web address. You will also need dedicated space on a web server and the connection details – FTP is a common way to connect to a web server. If you are creating a website for your company, you can get this information from your IT web admin. If you are publishing your own site, you can get this information from a web host provider.

What is CSS?

When you look at a web page, you might wonder how it is made. To display a web page, your Internet browser reads and interprets a special set of instructions. These instructions are written primarily in two languages: HTML and CSS. So Whai is CSS?

1412671460-thiet-ke-web-voi-bo-cuc-html (2)
CSS stands for Cascading Style Sheets . CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once . External stylesheets are stored in CSS files. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
Web pages display content and have an underlying structure defined by HTML. The content can include text, images, links, or even audio and video. Most HTML elements are written using opening <element> and closing </element> tags that tell the browser what type of content to display. The tags are written in a specific order to define the structure of the page.
Notes:
  • The style definitions are normally saved in external .css files.
  • With an external stylesheet file, you can change the look of an entire website by changing just one file!

What is HTML?

When you look at a web page, you might wonder how it is made. To display a web page, your Web browser reads and interprets a special set of instructions. These instructions are written primarily in two languages: HTML and CSS. So what is HTML?

1412671460-thiet-ke-web-voi-bo-cuc-html (1)

HTML is a markup language for describing web documents (web pages). HTML is a formal Recommendation by the World Wide Web Consortium (W3C) and is generally adhered to by the major browsers, Google Chrome, Mozilla Firefox, …, which also provide some additional non-standard codes. The current version of HTML is HTML 5.

Web pages display content and have an underlying structure defined by HTML. The content can include text, images, links, or even audio and video. Most HTML elements are written using opening <element> and closing </element> tags that tell the browser what type of content to display.The tags are written in a specific order to define the structure of the page.

The follow examples shows some the most common HTML5 structural elements.

html5_doc_sections

Or:

html5-markup1

How to install Java JDK7 on Ubuntu

Using Oracle Java 7 is not formally supported by Ubuntu. There's plenty solutions for installing it, listed on https://help.ubuntu.com/community/Java .
java_00_thumb
There is a simplest way to install Java7:
1. Open Terminal by “Ctrl+Alt+T”.
2. Run follow code:
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java7-installer
This will keep newest java 7.
3. Set up Java 7 environment variables JAVA_HOME and PATH:
sudo apt-get install oracle-java7-set-default
Well done!