Adobe Muse?
› create a website without a single line of code
› simple way to create website that looks great
› customize in easy way similar to Indesign

    Default › Desktop / 960px

   
    Web diagram › plan the number of pages that we have and how they relate to each other.

1. add pages - [+] on the right of the Home page.
2. add sub-pages - [+] at the bottom of the page.

    Under the category Menu, choose Horizontal and drag and drop it on the page.
    Muse will automatically create a menu.

• Design › add elements, images, text, menu, slideshow and lightbox widgets

1. Image

    - File › Place and insert the image and resize
 
    2.   Slideshow and lightbox
    - Remove the default images and insert your own (Double click on the thumbnail image and delete)
    - Select transition options

• Preview › uses the webkit engine to show what it looks like in a browser

    Preview renders the website that we’ve designed so far into a simulated browser.
    - File › Test Site in Browser to test the application in your default browser

• DESIGN TIP

    Could be designed in different versions for mobile and desktop, etc.
    All of those pages should belong to each other (consistency),
    But They have different needs at the same time !

What is user interface?
The user interface (UI) is everything designed into an information device with which a human being may interact -- including display screen, keyboard, mouse, light pen, the appearance of a desktop, illuminated characters, help messages, and how an application program or a Web site invites interaction and responds to it.

Searched on dribble.com
Great place to see what other people has done and learn from them.
Great place to get inspiration for my own design.

Adobe Edge code would make designers feel much easier to design their website. Every single words had to be typed and found how to code for creating their website before. But now every single code would be highlighted on the browser at the same time. It would let us know what it is for on the browser.

In addition, Adobe Edge Reflow CC also intended for the responsive website with various features. One of the features is colour bar. It helps UI designer break down what happen in their layout that should be differentiated every different devices.

Why create a Style Guide?
The major reason why a style guides need to be created is that a style guide for any kind of design is
part of planning for consistency. The style guide shows the individual handling the technical side of the website,
such as how graphics, logo, icons used. For example, the social media icons with dominant colour could be changed to simple colour that suits to an entire webpage. When rollover the icon, It would change back to original colour. These rules might affect usability and visitor satisfaction.


What elements I need to include in the Style Guide?

• Page information
• Layout

• Uses of colour - background, text, text box, and so on.

• Fonts     

         - serif , sans-serif, italic, bold, underline, and so on.
         - point size
         - upper or lower case

• Graphic treatment

         - line, pattern, repetition, and so on.
         - crop, shape, button.

• Navigation
• Interactive elements
  

       

    Images for web

• Crop & resize
• Reduce noise, smart blur & smart sharpen
• Levels, curves, Hue / Saturation & colorize
• Adobe Illustrator graphics / save for web / icons to transparent PNG's
  

    JPEG = Joint Photography Experts Group

• Crop & resize

• Hue / Saturation & colorize

    Hue/ Saturation can change overall hue.

    or Colourise.

• Save for web

    Small size is better for network including web, mobile, etc.
    When you choose the quality of an image,
    › Is that okay or damaged ?

    + PNG

PNG's advantages for Web application: Transparent graphics works well on different backgrounds, and it is widely used on the web. Even though both PNG and GIF formats can produce transparent effects, the PNG format really has three main advantages over GIF: alpha channels (variable transparency), gamma correction (cross-platform control of image brightness), and two-dimensional interlacing (a method of progressive display). PNG also compresses better than GIF.

Resources from Source Tec Software - http://www.sothink.com/page/logo-design/png-logo.htm