Design
Designtrender 2012Single page    Parallex       Mobile       Responsive websites      scrolling       design        design...
8                                   Single Page Websites with SlidersSingle-page websites are becoming more popular among ...
Single Page Websites with Sliders
Single Page Websites with Sliders
Single Page Websites with Sliders
Single Page Websites with Sliders
7                                        Parallax Scrolling   Parallax scrolling is a special scrolling pseudo-3D techniqu...
Parallax Scrolling
Parallax Scrolling
6                                           Mobile Design    Touch is a new paradigm for design. The rapid adoption of tou...
Mobile Design
5                                       Responsive designNow we can make things more flexible. Images can be automatically...
Responsive design
Responsive design
Responsive design
4                                   Impressive Typography   It is always amazing to see how different typefaces influence ...
Impressive Typography
Impressive Typography
Impressive Typography
3                             Big Images & Photo BackgroundsLarge backgrounds make a very impressive visual impact on webs...
Big Images & Photo Backgrounds
Big Images & Photo Backgrounds
Big Images & Photo Backgrounds
2                                              TexturesUsing texture is a good way to add depth, detail, and a layer of in...
Textures
1                 Design Below the Fold / (People Expect to Scroll)Think of a newspaper’s front page above the fold. What ...
Design Below the Fold
Digital kommunikation   Hur man skapar den bästa företagswebbplatsen och kommunicerar i sociala medier
Upcoming SlideShare
Loading in...5
×

Hallvarsson & Halvarsson - Webbdesigntrender 2012

2,419

Published on

Presentation om webbdesign från Hallvarsson & Halvarssons lunchseminarium om företagskommunikation 2012. 9 november 2011.

Published in: Business, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,419
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
16
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Hallvarsson & Halvarsson - Webbdesigntrender 2012

  1. 1. Design
  2. 2. Designtrender 2012Single page Parallex Mobile Responsive websites scrolling design designImpressive Textures of Design belowtypography depth the fold
  3. 3. 8 Single Page Websites with SlidersSingle-page websites are becoming more popular among web designers, both for their own projects andfor client sites. There are a lot of cases out there in which a single-page site makes a lot of sense: if there isn’t a ton of content; if the content is all closely related; or in cases where a particular stylistic element works best on a single page. In any case, single-page sites are cropping up all over the place. But figure out when to use a one-pagedesign and the best way to go about creating one is still a challenge for many. While a lot of general webdesign best practices apply to single-page sites just as they apply to more complex sites, there are some special considerations.
  4. 4. Single Page Websites with Sliders
  5. 5. Single Page Websites with Sliders
  6. 6. Single Page Websites with Sliders
  7. 7. Single Page Websites with Sliders
  8. 8. 7 Parallax Scrolling Parallax scrolling is a special scrolling pseudo-3D technique in computer graphics, where background orforeground moving image create an illusion of depth adding to the immersion. Although its forte was Gaming arena but now its growing by leaps and bounds in Web Designing as well.
  9. 9. Parallax Scrolling
  10. 10. Parallax Scrolling
  11. 11. 6 Mobile Design Touch is a new paradigm for design. The rapid adoption of touch technology affects design in twoessential ways. First and most obviously it changes the way people physically interact with a website. The designer must not only account for direct differences, like their being no hover effects or even a mousepointer, but also more subtle effects like directionality of flow, where with touch, a horizontal rather than vertical scroll may be desired. Similarly the pinch to zoom gesture means that zoom out and pan is now an acceptable way of navigating across a site. Touch is more intuitive than keyboard and mouse and consequently this creates the second effect on design as it changes who is going to use the site. Touch opens up virtual interactivity to new demographics
  12. 12. Mobile Design
  13. 13. 5 Responsive designNow we can make things more flexible. Images can be automatically adjusted, and we have workaroundsso that layouts never break (although they may become squished and illegible in the process). While it’s not a complete fix, the solution gives us far more options. It’s perfect for devices that switch fromportrait orientation to landscape in an instant or for when users switch from a large computer screen to an iPad, iPhone.
  14. 14. Responsive design
  15. 15. Responsive design
  16. 16. Responsive design
  17. 17. 4 Impressive Typography It is always amazing to see how different typefaces influence the overall design and its feel. For thatreason, typography is considered as the backbone of any design. For any web designer, typography is the most fundamental component of designing a website that they always pay attention to. Typography not only used to provide information rather it can improve the user experience as well by improving the web design. Many designers struggle with good and effective typography.
  18. 18. Impressive Typography
  19. 19. Impressive Typography
  20. 20. Impressive Typography
  21. 21. 3 Big Images & Photo BackgroundsLarge backgrounds make a very impressive visual impact on websites. A web designer has the possibility to play with different design variables that are usually used by photographers, such as depth of field orfocus. The background does not have to be just photos, but also any other large illustration or even video.
  22. 22. Big Images & Photo Backgrounds
  23. 23. Big Images & Photo Backgrounds
  24. 24. Big Images & Photo Backgrounds
  25. 25. 2 TexturesUsing texture is a good way to add depth, detail, and a layer of interest to a web design. Whether it’s inbig doses or just a few subtle patches here and there, texture can help give personality to your website.
  26. 26. Textures
  27. 27. 1 Design Below the Fold / (People Expect to Scroll)Think of a newspaper’s front page above the fold. What is the dominant content? On many newspapers it is simply an exciting image or headline to lure readers in. All of the substantial content is embedded within the rest of the paper, but if a reader is compelled by the headline they will gladly search it out. Use this to your advantage. Attract your visitors above the fold, but don’t hesitate to put the good stuffbelow. It simply has to be something compelling; something that will make a winning case for the rest of the site
  28. 28. Design Below the Fold
  29. 29. Digital kommunikation Hur man skapar den bästa företagswebbplatsen och kommunicerar i sociala medier
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×