Let's talk about Web Design

  • View
    1.989

  • Download
    1

Embed Size (px)

Transcript

  • Application !Design

    Graphic!Design

    Web Design

    20150413 Abby Chiu

    Lets talk about

  • Abby Chiu UI/UX! UI/UX Designer

  • Mobile app design Package designillustration

    Web design Infographic designProduct design

    Graphic design User experience

  • Web Design

    Abby Chiu

    Slideshare

    F2E

  • 1. Web !

    2. !

    3.

  • !

    + HTML & CSS + javascript

    Photoshop illustrator sketch

    HTML & CSS javascript

    Designer Front-end

    + Sense of beauty

  • New Tab

    Web Design

    Web

  • Speckyboy.com

  • UI Designer!

    Visual Designer!

    UX Researcher!

  • UI Designer!

    Visual Designer!

    UX Researcher!

    or

  • Web

  • Web ! Web

  • Web

    a. !

    b.

    1. Web

  • a. !

    b.

    1. Web

    (1). Web Web Design Trends !!(2). User Experience

    Web

  • Web

    1. Web > > Web

    1. Longer scrolling sites 2. Storytelling and interaction 3. Absence of large header background images 4. Removing non-essential design elements in favor of simplicity 5. Fix width centered site layout 6. Professional high quality custom photography 7. Flyout/slideout app-like menus 8. Hidden main menus 9. Very large typography 10. Performance and speed

    10 Web design trends you can expect to see in 2015

    thenextweb

  • Web Longer scrolling + Parallax scrolling

    53Sony

    1. Web > > Web

  • Web

    1. Focus on typography 2. Card-based design 3. Almost-Flat Design 4. Big Photographic Elements 5. Decrease In Page Height 6. Storytelling and interaction 7. Use of high-resolution moving images 8. Responsive 9. Fix width centered site layout 10. Personalized User Experiences

    Top 10 Web Design Trends that Boom in 2015- 2016

    perceptionsystem

    1. Web > > Web

  • Web Focus on typography

    Google Fonts

    1. Web > > Web

  • Web Use of high-resolution moving images (Cinemagraphs)

    Cinemagraphs examples

    1. Web > > Web

  • Web Responsive design

    2010 5 Ethan Marcotte A List ApartResponsive Web Design ! fluid grids media queries scalable images !

    1. Web > > Web

  • Web Responsive design

    Skinnyties

    1. Web > > Web

  • Web Responsive design navigation bar

    Skinnyties

    1. Web > > Web

  • Web Responsive design navigation bar

    Skinnyties

    1. Web > > Web

  • Web Responsive design

    Foodsense

    1. Web > > Web

  • Web layout

    1. Web > > Web

  • Web layout

    1. Web > > Web

  • Web

    Designer Front-end

    1. Web > > Web

  • Web

    a. !

    b.

    (1). Web Web Design Trends !!(2). User Experience

    1. Web

  • User Experience

    1. Web > >

  • User Experience

    1. Web > >

  • User Experience

    1. Web > >

  • User Experience

    Design the product Design the experience

    1. Web > >

  • User Experience

    From Yahoo!s Eye tracking studies ! People scan the main sections of a page to determine what its

    about and whether they want to stay longer. ! They make decisions about the page in as little as three seconds. ! If they decide to stay, they pay the most attention to the content

    in the top part of the screen.

    1. Web > >

  • User Experience Z - Layout : Z

    Understanding the Split Layout in Web Design

    1. Web > >

  • User Experience

    !Web

    1. Web > >

  • Web

    1. !2. !3. !4.

    1. Web > >

  • Youtube Pinterest

    1. Web > >

  • DropboxGoogle

    1. Web > >

  • Codecademy

    1. Web > >

  • Spotify

    1. Web > >

  • Web

    a. !

    b.

    1. Web

    (1). !!(2). ! Wireframe Prototype

  • 1. Web > >

  • 1. Web > >

  • 1. Web > >

  • Web Sitemap

    1. Web > >

  • Sitemap

    Why You Should Build A Sitemap Before Designing Your Site

    1. Clarify Your Sites Purpose and Goals 2. Avoid Duplicate Content 3. Streamline Your Conversion Funnel 4. Get Everyone On the Same Page

    1. Web > >

  • Sitemap

    1. Web > >

  • 1. !2.

    1. Web > >

  • Web

    a. !

    b.

    1. Web

    (1). !!(2). ! Wireframe Prototype

  • 1. Web > >

    Wireframe

    Wireframe

  • Wireframe

    !! 1. ! 2. ! 3.

    1. Web > >

  • .K8'$4K%-5

    .K8'$4K%-5

    Desktop Pad Mobile

    1. Web > >

  • Grid system

    1. Web > >

  • Grid system

    1. !

    !2. !!3.

    1. Web > >

  • Wireframe

    Moqups

    1. Web > >

  • Wireframe

    Wireframe.cc

    1. Web > >

  • Wireframe / Prototype

    Balsamiq

    1. Web > >

  • Wireframe / Prototype

    Axure

    1. Web > >

  • Photoshop illustrator sketch3

    uiweek

    sketch

    1. Web > >

  • 20px 25px

    Designer Front-end

    20px

    25px

    1. Web > >

  • 20px25px #ec571d1e771d...

    Designer Front-end

    20px

    15px 25px

    1. Web > >

  • 1. Web > >

  • 1. Web > >

  • 1. !2. !3. ! !4. ...

    1. Web > >

  • !!!!1.

    ; !!2. !

    1. Web > >

  • Designer Front-end

    1. Web > >

  • 1. Web!

    2. !

    3.

  • 2.

    MediaTek Cloud Sandbox Maker

    MediaTek Cloud Sandbox

  • 2.

    Sitemap

    MCS home page

    news and updatespersonal dashboard

    navigation bar ( fix )

    profilelogo

    lab.com

    landing page

    brief introductionnews

    sign up / in

    FAQs

    API resource

    API sandboxAPI referenceAPI error code

    KL]LSVWLY

    prototype detail

    user privileges notificationfirmware

    data channels

    prototype information

    edit

    add / deleteprioritytitle / description / type template

    prototype profile

    prototype photoprototype statechip

    title

    create test device

    prototype list

    prototype profile

    prototype photoprototype statechip

    title

    development

    log in / outedit profile

    readcreate prototype ( first time )

    add / delete useradd notificationupload firmware

    edit

    prototype photoselect chip

    title

    create / delete prototype edit

    prototype photoselect chip

    title

    MCS Sitemap

  • Wireframe UI flow

    MCS web UI flow

    MCS 2.0 Flowchart 2014 / 11 / 07

    Sign in page

    sign in

    forgot password

    sign in with fb

    create an account

    input emailinput passwordremember me

    Development

    create product

    prototype photo

    edit

    prototype name / description / state / chip

    detail

    prototype profile

    prototype list

    prototype detail

    edit

    prototype photo

    prototype profile

    prototype name / description / state / chip

    data channel

    user privileges notificationfirmware

    data channel

    prototype information ( tab )

    add component

    data channel template

    edit

    data channel description

    show data record

    data channel name

    test device photo

    edit

    test device name / description / state / chip

    detail

    My devices

    test device profile

    test device list

    My devices

    edit

    test device photo

    test device profile

    test device name / description / state / chip

    data channel

    notificationfirmware

    data channel

    test device information ( tab )

    data channel template

    data channel description

    show data record

    data channel name

    MCS home page

    navigation bar ( fix )

    personal dashboardnews and updates

    side menu ( fix )

    recent activity

    top navigation bar

    logo profile

    log in / outedit profile

    side menu

    home page

    development

    my devices

    API resources

    FAQs

    personal dashboard

    landing page1 2 3

    4

    5

    2.

  • MCS web design

    Home page

    News from Mediatek Cloud Sandbox

    MCS 2.0 is ready now !2014/10/16 15:30

    Welcome to join Mediatek Cloud Sandbox !2014/10/16 15:30

    Hi makers , we have release the MCS 2.0 already. We add a lot of new features on it as following :

    Feather 1 : MT7681 integrationWe are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek .

    Feather 2 : Remote controller appWe are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek We are Mediatek We are Mediatek