Build a Sleek, Dark Mobile App Website: New Premium Tutorial
plus

Build a Sleek, Dark Mobile App Website: New Premium Tutorial

on Jan 19th 2011 with 26 comments
Tutorial Details
  • Topic: Building a website
  • Skills Required: HTML, CSS
  • Difficulty: Beginner-Intermediate
  • Estimated Completion Time: 3-6 hours
Download Source Files
Demo View It Online

Not long ago, on Webdesigntuts+, we demonstrated how to design a sleek mobile app website interface in Photoshop. Today, in this Premium tutorial, we’ll turn that design into a working website.

Become a Premium member to read this tutorial, as well as the hundreds upon hundreds of other advanced tutorials and screencasts from across the Tuts+ network.

Example
Example
Example

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Phototuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Eric Alli, also known as two2twelve, is a web designer, programmer and mobile developer. Eric is one of the founders of TriLab Media and is an active contributor to the Envato network with over 900 sales at ThemeForest! You can find more of his musings on his blog.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • David

    Nice design. Probably worthwile to note to make sure you adhere to Apple’s identity guidelines: http://www.apple.com/itunes/affiliates/resources/documentation/identity-guidelines.html when creating App Store related materials.

  • http://drho.ro DrHo.ro

    Very cool.

    I like how the css is tabbed.

    Do a search for rightright and bottombottom…

  • Graeme

    Where do I find the PSD for this tutorial?

    Went to the webdesigntuts+ tutorial but cant see it.

    Cheers

    • henry

      To find the PSD go to the first tutorial “how to design a sleek mobile app website interface in Photoshop”!

  • http://www.yeahthatapp.com Bioshox

    I love every single tutorial from this site, each website is so elegantly designed, gorgeous!

    Another great tut :3.

  • http://www.teksmartz.com web design company india

    you have o become premium member for downloading source files

  • http://www.nouveller.com/ Benjamin Reid

    “Source files for this tutorial are available to Premium members.”, I’m not a premium, neither am I logged in but there’s a big button allowing me to download the files FYI.

    • Graeme

      I am a premium member, but looks like there is nothing in the Leaflet Source.zip file, i’m sure it will get resolved…

  • Ricardo Nunes

    Err.. I think there is a problem with the Leaflet Source.zip…

    Now to what mathers, tnx for the Tut!

  • http://www.fishmemory.net fractalbit

    Hello, there are some minor glitches in the demo with some browsers. It displays fine in chrome and opera but…

    firefox shows an horizontal scrollbar and IE8 and below shows the whole design left aligned.

  • http://peewee1002.co.uk Peter

    The source doesn’t work through the premium login but you can clearly download it on this page and it works fine.

    Something weird has happened.

  • http://www.twitter.com/netblonde netblonde

    Looks beautiful, I’m so tempted to go premium now

  • http://www.wcpixels.com wcpixels

    This looks absolutely amazing, definately gunna be going premium for this article alone !!

  • http://thewebdevblog.com Zakary Faithfull

    Wicked post, thanks :)

    Please feel free to visit my web development blog at http://thewebdevblog.com

    Thanks

    Zakary Faithfull

  • arnold

    only nettuts keep me from staying on premium. I hope you keep it up the good tuts here..

  • sidd

    Well, I dunno if its app to ask questions here… slightly off topic but in some html templates I see little icons clustered in one .png file and its displayed using this css function

    background: transparent url(images/clustered icons.png) no-repeat scroll -240px -20px;

    Can I get a guide for the code?

    Thanks in adv..

    • http://www.fishmemory.net fractalbit

      Hello, search for “css sprites tutorial” there are plenty on the web :)

      • sidd

        Thank you.. u were a real help! :) :)

  • http://www.leo-gumbo.com THE|BOSS

    This is a great tutorial, I love the design. I wish I could create crisp and shiny designs like this.

  • http://www.bjornline.info bjornredemption

    LOL why is it that every tutorial deals with building a website for an iPhone or iPad or something generally sexy..I’d love to see a tutorial which features a real life example like a middle aged real estate agent or some obscure pizzaria

  • http://www.carlosja.com CarlosJa

    I’d like to see a tutorial with an Android phone and App..

  • http://www.rickgrossman-blog.com Rick Grossman

    Great work but the leaflet source.zip file is blank????

  • AndrewG

    Leaflet zip is blank!!!!

  • AndrewG

    Rick Grossman – I’ve emailed support, but they sent me a screencast of the Build-a-Sleep-Dark-…Zip and it was full. They don’t seem to understand its the Leaflet Source.zip that is empty! I even sent them an image, but by now they probably just think I’m harassing.

    Its really annoying and was not worth me renewing my subscription the same day.

  • http://www.remitechsolutions.com Kevin

    Did anyone else notice that the source file is named “build-a-sleep-dark-mobile-app-website.zip”? Not that it matters, but apparently sleek got translated to sleep somehow LOL.

  • http://www.fmrwebdesign.com/ Fozail Raja

    Love it! I am heading over the app store right now! I see other comments, people were having all sort of problems, have these problems been resolved?