!      .      
 

 

 

 

  

 

 

 

 

 

 

 

 


    , , -  -,     ,       . ,  ,       -!    ,      ,     !     ,   .     .





!      .      



   Smashing Media GmbH.



   



 The Smashing Book #3  Redesign the Web, 2012

 Smashing Media GmbH, 2012

 . , , 2013

    , 2013


* * *




    


       ,    .  ,     ,  .     .

     .      ,     - ,     .

 ,            ,          .

       .

        .       ,   ,        .

                 ,      .

   ,     , JavaScript    .   HTML5  CSS3    .

   ,    .     -,    .

     Java-.  ,     JavaScript     .

      ,      .  ,        .  ,          .

     ,   html-,        .

           ,      .

    ,    .                -.         ,          ,   ,   .   ,       .

!



 iAGE,
  -
(iage.net (http://iage.net/))




   


    ?   ,    ?              .

     ,   ,   .     , ,    (landingpages),  .              ?   ,    ,         ?

    .  ,   ,     ,   ,     (responsive) ,   ,  HTML5  CSS3    .             Flexbox.      .

             (  )  ?     ,   ,       ?

       ,     ,       .        , ,  .   .



 ,
-  -  (LeadMachine.ru (http://leadmachine.ru/))






:   


      ,       . ,  :        -  廠   .       -       .

          ,    ,      .         ,     ,          ;        ,       ,     (-),     ().         ,  ,  ,  , ,   ,   , ,     .

    ,       .       ,      .

         CSS-.  ,       .             .        .

   ,      ,        ,    ,    ,  ,  .    ,         Smashing Magazine.      ,      .

        ,     ,    ,  .    -    ,  HTML5, CSS3 and JavaScript,     ,  ,     .          (     ). , ,     ,   ,    ,  ,  ,     .

   ,     Smashing Magazine,       .  ,      ,   , , ,  ,  ,     ,             CSS,  -,  .




-   

:  

:  



     ,            .   Photoshop,    CSS3       ,      . ,    ,    ,     .

      ,      ,               .

    -   .

      ,  ?  .  -       ,    ,        ,     . ,    ,      ,         ,       .  ,     ,     ,    .

             ,            .     :

    .

  .

  .

 .

   .



,       ,  ,      .




    ?



        ,     . -    !   ,    !  ,       ,         .

        .      -              .   ,     .

-       .    ,   ,     .         ,      .

   -       -  ,    .




     


  ,       ,         ,      .

   :

        ,  ,     .    .

       - ,        .           ,     , ,         .

      .    ,        Facebook,    [1 - Facebook Changes Confuse Users, as a Major Overhaul Looms // The Washington Post (http://smashed.by/fbc), smashed.by/fbc (http://smashed.by/fbc)].

         ,         .

       ,     .

           .

               .




   ,    


 2005           ,     .      ,       :         ,     ,    -.



      ,     ,    - .

 

 ,            ,      .        ,       -.     ,       .

   ,        - .    ,        .         ,          .       .  ,       .




   ,   


         (.. ),     ,       Headscape, -    .  ,   ,       ,       ,     .   ,             .        .        .

            .   ,         ,       .     . -,        ,    .



  ,      ,  ,      


  ,     [2 - Nielsen, Jacob. Fresh vs. Familiar: How Aggressively to Redesign (http://smashed.by/Nielsen), smashed.by/nielsen (http://smashed.by/nielsen)],   :

 ,        .

 ,    ,      . -            .            .   ,      .        .         .        ASP[3 - Active Server Pages    -  . . .],   . NET[4 - NET Framework   .      CLR,     ,    -. . .]. CSS-[5 - Cascading Style Sheets           ,      (, HTML). . .]    ,      .      ,   ,     ,      .

 ,      ,     .                 .

       ,        .

  ,   ,    ,    .




   


    ,    ,     ,  :           .

     .        ,    ,   ,       .          ,    .

        ,       .  ,  ,      ,        ,    .

,        ,       .        -        ,       .

  -,   ,      ,    .       ,       .  ,      ,      ,      .

, ,     ,         .       .        . ,      ,     ,           .

   ,           .     ,   . , ,        ,     ,  .




  


    [6 - Moll, Cameron. Good Designers Redesign, Great Designers Realign (http://smashed.by/realign), smashed.by/realign (http://smashed.by/realign)]  ,    - ,    , .      -.

    :

  .

 -.

 .

       .

  .

,          ( ,   ),   ,      .  ,         - ,            ,   .

      .      ,    .   ,       ,    ,    .

         ,    ,  ,      .     ,            ,     -        .

 ,      .




    



      ,      .  ,    .        ,            ?

 ,         ,         .  ,         .       , -      ,   ,  ,     .

   ,      ,      16    -:

  .

     .

    ,    .

  .



     .




    


       ,  :    !    .

      .    .    -,    ,       .       ,    .

       ?        : .            .

,      ,      ,     .        ,      .        ,    .

      .   , ,  ,  ,        .

      ,         ,    .        ,      .

     ,       .           .   ,         .        ,   .

        :

    ,       .

      ,       .

         ,       , .

          .




     


  ,   - ,  - :     Facebook.      Facebook.  , Facebook    .     :     .        -- .

  ,        ,  ,   ,  ,        .    ,     .  -,    ,    ,    .

   ,        . ,          ,       .        ,  -     ,       , ,   ,         .

           : ? ,      ,  .   ,    ,     .          .

    ,    . ,   ,    -  .       ,   ,      .

     ,      ,     .




     


   ,     , , ,   ,   .        ,       .     ,     ,    .  (   )    .            ,       .     ,   .

,       ,      .             ,     .    ,              .      .      ,      . ,     .

   ,      .        .

, ,  ,       :    .    -   ,      ,   .      ,    .      ,        .        ,   .

      ,     ,   .            :   .




    


    ,         .       ,     ,      ,   .       ,     ,      .

 ,       .     ,     ,       .     ,     .

 ,        ,       Digg.   ,          ,          .       .     ,     ,       .   ,     .        ,         .

      ,    ,      .

-     ,     ,     .   -      ,      .

         . -,                 .       ,     - .

-,        ,   .   ,        .       - ,      .

, ,     ,      ,     .   ,      .    . ,            .

,     ,      . ,          ,       ,       ,   .

  ,     .       ,   .  ,         .

     .              .       ,     .




   !



    ,          .     . -,    ,        .       .   ,     ,    ,      .




    ?


  ,          . -,       . - (, ,   ),    ,      .

       ,  -, ,      ,      ,    ,   .

,        ,   ,     .     ,       -,     ,   .

,     ?




    ?


        .  ,     - .         .        , :

   ?

    ?

     ?

      ?



 -,       ,       . -      .

     -   .     ,         .     .

     ,   .                   -.             .

,   -,   ,    -         . ,            .

 -   ,      . ,   -     ,               . ,  -      e-mail ,    ,     ,    .

    -     ,    .      ,       .         .




   


        ,     .    ,      (, -),    (,  ),        -.



     :

  -   -

     -   ,     ,      .               ,      - .

    

 -       .      ,       .     ,       .     ,  ,  , , ,      .

  

 ,       .    ,     ,    .      ,      .

 ,   ,   , ,     ,         .       ,              .

    ,     

            ,   ,     ,   .      .           ,   .



        ,                 .

        .       ,     .




 ,     


        - .          ,       .           ,       .              .

,      ,      (       ):

 

   ,    .            .             ,   ,    ,  .

 

 ,   ,        .   ,          ( 1  3).     ,      .

 

    ,   ,     .           .

 

            .       . ,   ,       .           .



       .          ,    .      ,    ,    ,   .     ,     .



  ,   ,         .   ,       .  ,   ,         .




     



 ,       , .       .



  -    :

       .

 ,       ,  .

        .

       . - ,    ,     ,    .

       ,     .



         ,      ,         .

     ,     ,   , ,      .

   ,         .

-,      .    ,    ,         .      ,       .

-,      .           ,       ,  .

, ,     ,   ,         .   ,  ,        ,   ,       .            .




    


      , , ,     .             .        ,   .         .

       :



   

     ,    ,     .     ,    , ,   ,   ,   .       .

 ,   :     ,     ?      ,      .

   

         ,     .         .     . ,             .        .

  

      (    )    (wireframe).       .          ,   ,        .     ,  .

 

      ( HTML-),      ,         .           ,      .



   ,          ,     .          ,             .   :    ,     ,       .       .




 


  ,        ,   ,       .         ,      ,  ,    ,     ,         .

    ,   ,     ,    .

  ,          ,     ,   .

              .     .  ,   ,       .       ,    .  ,         .

 ,         .    , ,      .    ,       ,   .     ,        .

       JavaScript  ,  ,  .   ,      -,      . ,       ,  ,     ,       .




   



     .   ,   .     ,          .

       ,   .  ,    ,      .        ,       ,     !

             .     ,   ,        -  ,    .    ,      .  , -  .    .

   ,        .   ,      ,       .       .

 ,        ,  ,      .    ,     ,      ,     .               .

,           .      ,     MySpace[7 -    . . .].     ,    .

  ,    ,    ,          .            .

     .            .     .    ,          -,      .

            ?




  


   ,       .       .          .   ,       ,   ,          .      ,       .

-,      .  ,              .   ,         .

-,       .        .    ,      ,    ,     .                ,      .

 ,         .   ,    .       .

       ,        .




   


   ,     .    ,     .

  -          .        .       ,          .

  ,     ,    .      ,          .

           ,     .

     :

     ,    .

    ,      ,   (,      ,   ?).

 ,        .

    (      ).



   (  ,  ),    - ,  .      Verify4  WebSort .5.     ,      ,       .




    


      .  ,       .               (20  ).        .    ,           -.

          (   )       .    ,   ?   ,  ,     ,   .  ,   ,    .     ,  ,        .

, ,      .        .  ,   .  ,            .    ,      ,       ,    .

-      .           .       .

        ,      . ,          , ,  , -  .         ,  ,    .       .       ,             .




-


,           (-).    ,         ,    .      ,     ,          .

   ,   -          .           ,       .          ,    .

           .     ,  ,      .    .




   


,            ,      .  ,            .      ,    .

-              .  ,         ,   .

           ,     .    ,       ,    .      ,       .             .

        ,            .   ,        ,   .        ,       .

  ,          .    ,      ,          .




    


        ,           .

   ,  :   ?         ?         .        ,       .    :

   ,       ?

     -,   ?

    ,   ?

         ?

       ?

   ,   ,  ?



    .          , ,     ..,     -   ,    .

     .           ,       .  ,       .

      ,        .    ,      ,           .

   ,     ,      . ,         ,   .    ,       912 .

   ,        ,     .  ,      ,    .

        ,   ,        .

     ?.    ,  ?      .

           ,   -.  ,       ,       .    ,  ,      ,   .          .




 



  ,   -            ,       . ,     .

      .       ,     .         (,     ),      .

     ,    (    ),     (    ).         ,     .     ,         .




    


   ,     ,     .   -         .   ,    .

              .     .         ,  ,     .              .

     ,         ,  :  ,       .  ,            .    -,     .      ,  ,   .

             .    .




     


  ,       -.     ,     .    -.

  -   :    ,     .        ,       .

-    .        ,   CSS, HTML  JavaScript,       :  JavaScript      HTML,       HTML,  ,   ,     ,        .    :      .        .    ,  ,        -.

 ,  ,      ,   .  -,       ,     .         ,          .




  .


   .

   ,     (https://www.litres.ru/aaron-uolter/idealno-kak-sozdat-i-peredelat-svoy-sayt-pravilnyy-podhod-i-peredovye-tehniki-razrabotki/)  .

      Visa, MasterCard, Maestro,    ,   ,     ,  PayPal, WebMoney, ., QIWI ,       .



notes








1


Facebook Changes Confuse Users, as a Major Overhaul Looms // The Washington Post (http://smashed.by/fbc), smashed.by/fbc (http://smashed.by/fbc)




2


Nielsen, Jacob. Fresh vs. Familiar: How Aggressively to Redesign (http://smashed.by/Nielsen), smashed.by/nielsen (http://smashed.by/nielsen)




3


Active Server Pages    -  . . .




4


NET Framework   .      CLR,     ,    -. . .




5


Cascading Style Sheets           ,      (, HTML). . .




6


Moll, Cameron. Good Designers Redesign, Great Designers Realign (http://smashed.by/realign), smashed.by/realign (http://smashed.by/realign)




7


   . . .


