Site Elements

  • Site Elements
    Designing a Modular User Interface Kit in PhotoshopFancy web app ui retina
    The role of Photoshop in web design is becoming more modular. Instead of composing a pixel-perfect layout of an entire web page, it's perhaps more sensible these days to concentrate on general styles, color schemes and specific interface elements. Today we'll be looking more closely at designing UI elements, pulling together our own UI kit in the process.Read More…
  • Site Elements
    Reveal Content When Needed With an Expanding FooterFooter retina
    During this tutorial we're going to build an expanding footer; a user interface pattern which allows the user to click on expandable footer regions if they wish to see more content. The end result is comparable to the accordion effect sometimes applied to lists and you can find it used on sites such as Additionally, we're going to be using Emmet to help us write our HTML at lightning speed.Read More…
  • Site Elements
    Your Logo, as a Web Font LigatureLigature retina
    Let's look at an alternative approach for displaying logos on a web page. Normally, you'll approach the challenge by using an <img> tag. Perhaps you'll use image replacement through CSS, perhaps you'll even venture into SVG files, but have you considered what's possible by designing your own web font ligature?Read More…
  • Site Elements
    Quick Tip: Give Your Website an iOS Home Screen IconNew waffle
    With more mobile web users than ever, it's important to keep your branding strong. Let's go one step further than the standard favicon and help your website stand out by creating icons for use on iOS and Android home screens.Read More…
  • Site Elements
    Design a Modern Pricing Table in PhotoshopPreview
    We're going to create an enticing and informative pricing table. During this screencast we'll tackle the design stage in Photoshop, then next week we'll complete the process by building the HTML and CSS version, ready for web deployment. Let's dive in!Read More…
  • Site Elements
    Responsive, Retinafied Google Map ImagesPreview
    How's that for a keyword-packed title? Let's take a look at Google Maps - more specifically, an alternative way to include them in your websites. We'll be working responsively (of course) and we'll take a look at a media query which will help us out with Retina displays too.Read More…
  • Site Elements
    Styling Dark Select Dropdown With Dropkick.jsPreview1
    HTML select elements with their option tags cannot be completely customized using CSS, but what if we want to style a dropdown just as easily as <div>, <a>, <ul>, and <li> elements can be styled? Today, we'll style the Premium Pixels Dark Select Dropdown using DropKick.js to help us do just that.Read More…
  • Site Elements
    Creating a JavaScript-Free Radio Toggle in CSS3Preview
    You'll often find yourself using toggle sliders as a trendy alternative to checkboxes. Today we'll be creating one using plain CSS3 and HTML. Read More…
  • Site Elements
    Quick Tip: Design a Countdown Clock in Under 15 MinutesPreview
    In this Quick Tip I'll demonstrate how to design a countdown clock interface in Photoshop. We'll go over some simple techniques and, in under fifteen minutes, we'll have a great finished product to show for our efforts. Let's jump in!Read More…
  • Site Elements
    Smarten Up a Slick Login Form With CSS3Preview
    Let's create a minimal and slick login form using basic HTML5 then enhancing it with some CSS3 techniques. Time to transform some simple elements into something beautiful..Read More…
  • Site Elements
    Create a Customized HTML5 Audio PlayerPreview
    During this tutorial I'm going to be introducing you to HTML5 audio and showing you how you can create your own player.Read More…
  • Site Elements
    Skin Orman Clark's Video Interface Using jPlayer and CSSPreview
    Coding up Orman Clark's Premium Pixel designs is great fun, this time we'll have a look at his Video Player Interface! We'll build it using an awesome HTML5 video library called jPlayer along with some HTML and CSS.Read More…