Agenda

  • Quick History
  • Layouts
  • UI Design
  • Images
  • Fonts & Typography
  • Elements
  • Closing

A Quick History

Software, interwebs, and everything else.

Layouts

The little things that we don't notice.

1- Grid Layouts

http://www.flickr.com/photos/juhansonin/2979046798

What's not a grid?

Description
MCInet.gov.ma

What's not a grid?

Description
MCInet.gov.ma

What's a grid?

Description

Make your own grid.

Bootstrap.

http://www.flickr.com/photos/14487597@N03/1474412691

Code time ...

getBootstrap.com

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

2- Better Landing Pages

http://www.flickr.com/photos/hdworld/10529726374

Bad/old landing ...

Description
Chase.com (early 2013)

OK landing

Description
Chase.com (now)

Good landing

3- Mega-navigation menus

http://www.flickr.com/photos/autorenphotographie/8027348676

Mega-site, micro-menu

Description
hespress.com

Mega-site, Mega-menu

Description
Mashable.com.com

4- Less clicking, more Scrolling.

http://www.flickr.com/photos/omegatron/1582284317

More Clicking ...

Less (no?) Clicking

How to?

FullPage.js

<!-- ... -->
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>    

<!-- This following line needed in the case of setting the plugin option `scrollOverflow` to `true` -->
<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>

<script type="text/javascript" src="jquery.fullPage.js"></script>
<!-- ... -->
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
$(document).ready(function() {
  $.fn.fullpage();
});
    

5- Parallax

http://www.flickr.com/photos/51035816082@N01/1359933304

Parallax Demos

How to?

Stellar.js

UI Design

The BIG things that we see.

6- Flat UIs

What's Flat ?

How ?

7- Skeuomorphism UIs

/ˈskjuːəmɔrf/

http://www.flickr.com/photos/rififi_plush/3679044906

What's Skeuomorphic?

How to ...?

Images

The <img></img>s

8- Blurred Styles

http://www.flickr.com/photos/philippena/12099296695

9- SVGs

How?

Fonts & Typography

Helvetica, Arial, and Comic Sans MS.

10- Non-boring typography

http://www.flickr.com/photos/38986545@N02/3588960550

How?

Elements

Beyond the simple forms.

11- Hero Areas

http://www.flickr.com/photos/24853832@N00/303344704

12- Expanded Search Bars

13- Featured detail lists

14- Quick user registration

http://www.flickr.com/photos/cushinglibrary/4685361197

15- Large video elements

Closing

<Thank You!>