Scribd Logo
Upload

Welcome to Scribd!

  • Web Design Tips For A Professional Site

    Uploaded by

    Damon Burton
    9 views1 page
    Web design tips were learned through experience and also teachings from other people. And each web designer has a secret to share (or not). It’s not easy to get a hold of these web design tips that one needs to shape a professional site. But guess what? Utah Sites have it all in here for your convenience. Read it over and thank us later. 1. Codekit for browser reloading. Drive the world forward. Immediately see the changes in your browser without the hassle of refreshing. CodeKit is especially a must when you’re using Mac. It’ll cost only cost a little. So don’t hesitate and change the days of hard browser refreshing. 2. Apply global changes. A great designer tip from Elliot Fienberg himself, use it carefully and sparingly. When you use the wildcard CSS rule with the use of an asterisk, the changes are applied to the entire page. It’s a useful trick to have in your pocket. 3. Set garish outlines. This tip, from Christopher Murphy of Web Standardista, makes cross-platform design easier than before. If you’re working with media queries, an outline garish color is handy. It makes looking at the exact rule easier. 4. Check your character count. Know the generally accepted and safe word count for comfortable reading; it’s between 45-75 characters. You can set your responsive or design support to make sure it resizes within the parameter of the word count. 5. Use typecast with Google fonts. Google and Monotype teamed up to give the public Typecast. It allows you to pick a Google Font on the website and follow it on the Typecast pp. After that, you can now work with the font of your choice and use it for your HTML and CSS. 6. Use Keynote (Mac) to create rapid page prototypes. Create rapid prototypes of landing pages, web pages, or web interface elements without using Photoshop. Create mockups with an underground movement using Keynote. There also exists an online repository covering user interface design templates for web apps. 7. Bury those social media icons. Strategically place your social media icons if you want people to stay on your website. These icons should be placed in the footer. All the work you did is to get the people on your website and not to lead them to your social media. 8. Simplify navigation. Keep it simple. What matters is clearly guiding visitors through your website. Reduce the visitors’ option to help guide them to your website’s most productive content. Remove the multi-tier drop down menus, only skilled mouse users can navigate it, and opt for a few links in the header or sidebar of your website. 9. Step away from the computer. Write down your design plan with a pencil and paper. It makes the process collaborative and helps you iterate through a design. Once the plan is set and concrete, you can start working on screen. 10. Use the squint test. A technique that will help a web designer understand the visitor’s point of view. Step back from your computer’s screen and squint. While everything is a blur, the most prominent features will be noticeable. This is how most designers evaluate their work. source: https://www.utahsites.com/web-design-tips-for-a-professional-site-infographic/

    Original Title

    Web Design Tips for a Professional Site

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Web design tips were learned through experience and also teachings from other people. And each web designer has a secret to share (or not). It’s not easy to get a hold of these web design tips that one needs to shape a professional site. But guess what? Utah Sites have it all in here for your convenience. Read it over and thank us later. 1. Codekit for browser reloading. Drive the world forward. Immediately see the changes in your browser without the hassle of refreshing. CodeKit is especially a must when you’re using Mac. It’ll cost only cost a little. So don’t hesitate and change the days of hard browser refreshing. 2. Apply global changes. A great designer tip from Elliot Fienberg himself, use it carefully and sparingly. When you use the wildcard CSS rule with the use of an asterisk, the changes are applied to the entire page. It’s a useful trick to have in your pocket. 3. Set garish outlines. This tip, from Christopher Murphy of Web Standardista, makes cross-platform design easier than before. If you’re working with media queries, an outline garish color is handy. It makes looking at the exact rule easier. 4. Check your character count. Know the generally accepted and safe word count for comfortable reading; it’s between 45-75 characters. You can set your responsive or design support to make sure it resizes within the parameter of the word count. 5. Use typecast with Google fonts. Google and Monotype teamed up to give the public Typecast. It allows you to pick a Google Font on the website and follow it on the Typecast pp. After that, you can now work with the font of your choice and use it for your HTML and CSS. 6. Use Keynote (Mac) to create rapid page prototypes. Create rapid prototypes of landing pages, web pages, or web interface elements without using Photoshop. Create mockups with an underground movement using Keynote. There also exists an online repository covering user interface design templates for web apps. 7. Bury those social media icons. Strategically place your social media icons if you want people to stay on your website. These icons should be placed in the footer. All the work you did is to get the people on your website and not to lead them to your social media. 8. Simplify navigation. Keep it simple. What matters is clearly guiding visitors through your website. Reduce the visitors’ option to help guide them to your website’s most productive content. Remove the multi-tier drop down menus, only skilled mouse users can navigate it, and opt for a few links in the header or sidebar of your website. 9. Step away from the computer. Write down your design plan with a pencil and paper. It makes the process collaborative and helps you iterate through a design. Once the plan is set and concrete, you can start working on screen. 10. Use the squint test. A technique that will help a web designer understand the visitor’s point of view. Step back from your computer’s screen and squint. While everything is a blur, the most prominent features will be noticeable. This is how most designers evaluate their work. source: https://www.utahsites.com/web-design-tips-for-a-professional-site-infographic/

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views1 page

    Web Design Tips For A Professional Site

    Uploaded by

    Damon Burton
    Web design tips were learned through experience and also teachings from other people. And each web designer has a secret to share (or not). It’s not easy to get a hold of these web design tips that one needs to shape a professional site. But guess what? Utah Sites have it all in here for your convenience. Read it over and thank us later. 1. Codekit for browser reloading. Drive the world forward. Immediately see the changes in your browser without the hassle of refreshing. CodeKit is especially a must when you’re using Mac. It’ll cost only cost a little. So don’t hesitate and change the days of hard browser refreshing. 2. Apply global changes. A great designer tip from Elliot Fienberg himself, use it carefully and sparingly. When you use the wildcard CSS rule with the use of an asterisk, the changes are applied to the entire page. It’s a useful trick to have in your pocket. 3. Set garish outlines. This tip, from Christopher Murphy of Web Standardista, makes cross-platform design easier than before. If you’re working with media queries, an outline garish color is handy. It makes looking at the exact rule easier. 4. Check your character count. Know the generally accepted and safe word count for comfortable reading; it’s between 45-75 characters. You can set your responsive or design support to make sure it resizes within the parameter of the word count. 5. Use typecast with Google fonts. Google and Monotype teamed up to give the public Typecast. It allows you to pick a Google Font on the website and follow it on the Typecast pp. After that, you can now work with the font of your choice and use it for your HTML and CSS. 6. Use Keynote (Mac) to create rapid page prototypes. Create rapid prototypes of landing pages, web pages, or web interface elements without using Photoshop. Create mockups with an underground movement using Keynote. There also exists an online repository covering user interface design templates for web apps. 7. Bury those social media icons. Strategically place your social media icons if you want people to stay on your website. These icons should be placed in the footer. All the work you did is to get the people on your website and not to lead them to your social media. 8. Simplify navigation. Keep it simple. What matters is clearly guiding visitors through your website. Reduce the visitors’ option to help guide them to your website’s most productive content. Remove the multi-tier drop down menus, only skilled mouse users can navigate it, and opt for a few links in the header or sidebar of your website. 9. Step away from the computer. Write down your design plan with a pencil and paper. It makes the process collaborative and helps you iterate through a design. Once the plan is set and concrete, you can start working on screen. 10. Use the squint test. A technique that will help a web designer understand the visitor’s point of view. Step back from your computer’s screen and squint. While everything is a blur, the most prominent features will be noticeable. This is how most designers evaluate their work. source: https://www.utahsites.com/web-design-tips-for-a-professional-site-infographic/

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    W ebDesignTips

    for a
    Professi
    onalSit
    e

    Everywebdesignerhasasecretortwo.Har
    d-wonworkows
    ,hi
    ddenhacks,and
    insi
    derknowl
    edgethatarethemar koftr
    ueexper
    ienc
    eandthes
    tuthatseparat
    es
    greatwebdesi
    gnt r
    aini
    ngfr
    om good.

    C
    ODE
    KI
    TFO
    RBR
    OWS
    ERR
    ELO
    ADI
    NG
    CodeKi
    tenabl
    esyout
    oins
    tant
    lys
    eec
    hangesi
    nyourbr
    ows
    er,wi
    thoutr
    efr
    eshi
    ng

    "
    Ifyou'
    reonaMact
    henCodeKi
    tisamus
    t,"s
    aysKei
    rWhi
    taker
    ,co-
    founderofVi
    ewpor
    t
    I
    ndus
    tri
    es."
    Thebr
    ows
    err
    eloadi
    ngf
    eat
    urei
    swor
    tht
    hes
    mal
    lcos
    tal
    one.Thedaysof
    har
    dref
    res
    hingyourbr
    ows
    ert
    omakec
    hangest
    akeeec
    tar
    elonggone.
    "

    A
    PPL
    YGL
    OBA
    LCH
    ANG
    ES
    Her
    e'sac
    odi
    ngt
    ipf
    rom mus
    ici
    an,pr
    oduc
    erandwebdev
    El
    li
    ottFi
    enber
    gthatc
    anhel
    pspeedt
    hingsupatt
    heear
    ly
    s
    tagesofyourdes
    ignwor
    k.Us
    ethewi
    ldc
    ardCSSr
    ule-
    us
    inganas
    ter
    iskast
    hes
    elec
    tor-andyouc
    angl
    obal
    ly
    appl
    ychangest
    oanent
    irepage.Forexampl
    e,t
    ochange
    al
    lthef
    ont
    sonapaget
    osans
    -ser
    if,youj
    ustneed:
    *{
    font
    -fami
    ly:
    ari
    al,hel
    vet
    ica,s
    ans
    -ser
    if
    ;}

    Thi
    sisagr
    eatdes
    igner
    'st
    ric
    ktohavei
    nyourpoc
    ket
    whi
    leyou'
    regoi
    ngt
    hrought
    hedes
    ignpr
    oces
    s.Ofc
    our
    se,
    i
    t'
    snots
    uchagr
    eati
    deat
    oleavei
    tinyourl
    ivec
    ode,s
    o
    us
    ethi
    str
    ickc
    aref
    ull
    yands
    par
    ingl
    y!

    S
    ETG
    ARI
    SHO
    UTL
    IN
    ES

    Fi
    let
    hisi
    nthe"
    simpl
    eac
    tsofgeni
    us"f
    older-at
    ipf
    rom Chr
    ist
    opherMur
    phyofWeb
    St
    andar
    dis
    tast
    hatmakesc
    ros
    s-pl
    atf
    orm des
    igns
    omuc
    heas
    ier
    ."Whenwor
    kingwi
    th
    medi
    aquer
    ies
    ,setanout
    li
    nei
    nagar
    ishc
    olour
    ,"s
    aysMur
    phy."
    Forexampl
    e:
    {
    out
    li
    ne:
    10pxs
    oli
    dgr
    een/
    red/
    yel
    low/
    blue;
    }.Thi
    senabl
    esyout
    oins
    tant
    lys
    eewhi
    ch
    exac
    trul
    esar
    ebei
    ngappl
    iedt
    owhatyou'
    rec
    urr
    ent
    lyl
    ooki
    ngat
    ."

    C
    HEC
    KYO
    URC
    HAR
    ACT
    ERC
    OUN
    T
    "
    45-
    75c
    har
    act
    ersperl
    inei
    sgener
    all
    yac
    cept
    edass
    afe
    f
    orc
    omf
    ort
    abl
    ereadi
    ng,
    "saysTr
    entWal
    ton,f
    ounderand
    des
    ignerwi
    thPar
    avel
    ."Ther
    e'saqui
    ckt
    ric
    ktoens
    ure
    yourr
    espons
    iveorui
    ddes
    igns
    uppor
    tst
    his
    .Pl
    aceal
    ine
    ofdummyt
    extonyourpagewi
    thanas
    ter
    iskatc
    har
    act
    er
    45andanas
    ter
    iskatc
    har
    act
    er75.Now t
    estt
    hes
    itet
    o
    makes
    urei
    tres
    izeswi
    thi
    nthes
    epar
    amet
    ers
    ."

    U
    SET
    YP
    ECA
    STWI
    THG
    OOG
    LEF
    ONT
    S
    Monot
    yper
    ecent
    lyt
    eamedupwi
    thGoogl
    etor
    eleas
    eanew,f
    reepubl
    icver
    sionofTypec
    ast
    whi
    chc
    anbeac
    ces
    sedt
    hroughGoogl
    eFont
    s.I
    tenabl
    esyout
    osel
    ectanyf
    ontont
    he
    Googl
    eFont
    swebs
    iteandt
    henf
    oll
    ow t
    hel
    inkt
    otheTypec
    astapp.

    Fr
    om t
    her
    e,youc
    anwor
    kwi
    tht
    hatf
    ontont
    extofanyl
    engt
    handus
    eawi
    der
    angeoft
    ype
    c
    ont
    rol
    stobui
    ldc
    lear
    ,readabl
    etypes
    yst
    emst
    hroughadj
    ust
    ment
    ssuc
    hasf
    onts
    ize,
    wei
    ghtandl
    ines
    pac
    ing.Yourwor
    kcanbeexpor
    tedaspr
    oduc
    tion-
    readyHTMLandCSS,or
    PNGl
    es,t
    oshar
    ewi
    thot
    her
    sormer
    gewi
    thc
    omps
    .

    U
    SEKE
    YNO
    TE(
    MAC
    )TOCR
    EAT
    E
    R
    API
    DPA
    GEPR
    OTO
    TYP
    ES
    Youdon
    tneedPhot
    oshopt
    ocr
    eat
    erapi
    dpr
    otot
    ypesof
    webpages
    ,landi
    ngpages
    ,cal
    ltoac
    tionsorot
    herweb
    i
    nter
    fac
    eel
    ement
    s.Ther
    esanent
    ireunder
    ground
    movementar
    oundus
    ingKeynot
    e(t
    hat
    sAppl
    e
    sver
    sion
    ofPower
    Poi
    nt)t
    ocr
    eat
    emoc
    kups
    .

    Ther
    esevenanonl
    iner
    epos
    itor
    ycont
    aini
    ngus
    eri
    nter
    -
    f
    acedes
    ignt
    empl
    atesf
    orwi
    ref
    rami
    ng,pr
    otot
    ypi
    ngand
    t
    est
    ingmobi
    leandwebappsi
    nKeynot
    e.

    B
    URY
    THO
    SES
    OCI
    ALME
    DI
    AI
    CON
    S

    Youdi
    dal
    lthatwor
    ktogetpeopl
    etoyourwebs
    ite,
    andyetyou
    rei
    nvi
    ti
    ngt
    hem t
    oleave?That
    swhat
    you
    redoi
    ngwhenyoupl
    aces
    oci
    almedi
    aic
    onsi
    na
    pr
    omi
    nentl
    ocat
    ionofyourwebs
    ite,l
    ikei
    ntheheader
    .
    Bur
    ythei
    consi
    nthef
    oot
    er.

    I
    fpeopl
    ear
    eonyourwebs
    ite,youwantt
    hem t
    ost
    ay,
    l
    ear
    nandper
    hapsi
    nqui
    reaboutyours
    ervi
    ces
    ,not
    c
    hec
    koutc
    ompanypi
    cni
    cphot
    osandbowl
    ingout
    ings
    onFac
    ebook.Soc
    ialmedi
    ashoul
    dsendpeopl
    eto
    yourwebs
    ite,notvi
    cever
    sa.

    S
    IMP
    LI
    FY
    NAV
    IGA
    TI
    ON
    Reduc
    ingyourvi
    si
    tor
    sopt
    ionsmi
    ghts
    eem c
    ount
    eri
    ntui
    -
    t
    ive,buti
    tcanac
    tual
    lyhel
    pgui
    depeopl
    etoyourmos
    t
    pr
    oduc
    tivec
    ont
    ent
    .Rat
    hert
    hanover
    whel
    mingyourweb-
    s
    itevi
    si
    tor
    swi
    thl
    inkst
    oever
    ypage,s
    impl
    if
    yyournavi
    ga-
    t
    ion.

    El
    imi
    nat
    edr
    opdownmenusandes
    pec
    ial
    lymul
    ti
    -t
    ier
    dr
    opdownnavi
    gat
    iont
    hatonl
    ythemos
    tski
    ll
    edmous
    e
    us
    erc
    annavi
    gat
    e,andgoas
    tepf
    urt
    herbyr
    educ
    ingt
    he
    numberofl
    inksi
    ntheheaderors
    idebarofyourwebs
    ite.

    S
    TEPA
    WAY
    FRO
    MTH
    ECO
    MPU
    TER
    Ibel
    ievet
    hatgooddes
    igns
    tar
    tswi
    thgr
    eatpl
    anni
    ng.
    Get
    ti
    ngyouri
    deasdownonpaperoronawhi
    teboar
    d
    c
    anhel
    pyoui
    ter
    atet
    hroughades
    ign,r
    eni
    ngi
    tand
    addi
    ngdet
    ailasyougoal
    ong.Dr
    awi
    ngonawhi
    te-
    boar
    dcanal
    somaket
    hedes
    ignpr
    oces
    scol
    labor
    ati
    ve
    andal
    low ot
    hert
    eam member
    stogi
    vei
    nput
    .

    I
    t
    sal
    soeas
    ytoer
    asepenc
    ilf
    rom paperormar
    ker
    f
    rom awhi
    teboar
    dandmakequi
    ckc
    hanges
    ,andonc
    e
    youhaves
    omet
    hingc
    onc
    ret
    etowor
    kwi
    th,s
    napa
    phot
    owi
    thyourmobi
    lephoneandgett
    owor
    kon
    s
    creen.

    U
    SET
    HES
    QUI
    NTT
    EST
    Wantaqui
    ckwayt
    olear
    nwhat
    smos
    tpr
    omi
    nenton
    yourwebs
    ite?Bac
    kawayf
    rom yourc
    omput
    ers
    creenand
    s
    qui
    nt.Mos
    tever
    ythi
    ngwi
    llbec
    omebl
    urr
    y,andonl
    ythe
    l
    arger
    ,col
    orf
    ul,mor
    epr
    omi
    nentf
    eat
    ureswi
    llbenot
    ice-
    abl
    e.

    I
    t
    ssai
    dthatt
    hist
    echni
    quehel
    psades
    ignerunder
    stand
    whatar
    st-
    ti
    mevi
    si
    tormaynot
    icewhenhes
    cansyour
    webs
    ite.Wi
    llt
    hevi
    si
    tornot
    icewhat
    smos
    timpor
    tant
    ?

    Pr
    esent
    edby:

    www.
    UtahSi
    tes.
    com

    Source:
    ht
    tp:
    //
    www. creat
    ivebl
    oq.com/web- desi
    gn/
    ti
    ps-
    812580
    htt
    ps:/
    /bl
    og.hubspot.
    com/ marketi
    ng/web-
    desi
    gn-t
    ips
    https:
    //
    pixabay.com/

    You might also like