How to Design a Profitable Landing Page
Good design of a Landing Page (LP) is not just about the emotions you experience when looking at it – it’s actually a much wider concept and the main goal of it is to solve business tasks. Unfortunately, many novice marketers and businessmen make a common mistake and set wrong priorities when designing an LP. […]
Designing Custom iOS App Interface Elements using Photoshop
Free iPhone GUI PSD kits include a lot of the primary elements needed for app design. But sometimes it’s necessary to build your own custom interface elements. I always preferred the older iOS 5-6 UI above the more flat-looking iOS7. Specifically I fell in love with this Microsoft Word app for iPhone created by the very talented Victor Erixon.
In this tutorial I want to demonstrate how to recreate a couple of these same MS Word interface elements from scratch. Building with shapes and paths will allow for an easier process of scaling the graphics to larger sizes. You don’t even need to know a whole lot about Photoshop to follow along with this tutorial. Plus you can download a copy of my PSD file to check out the final result.
How To Design Hover Effects for UI Elements in Photoshop
Designing in Adobe Photoshop is a different experience compared to building websites right in the browser. It requires an understanding of the various tools, effects, and positioning techniques. One major difference is how you would create interactions such as hover and click events.
In this tutorial I want to demonstrate how you might go about designing interactive states with Photoshop Layer Comps. These behave like document states where you can rearrange elements and save a snapshot of each particular style. I’ve also released my PSD file for free which you can download and modify for your own needs.
Building a Mega-Navigation Menu with CSS3 and jQuery
Larger navigation menus will typically include separate dropdown lists to appear on hover. But for some websites it can be necessary to expand this dropdown across the entire page. Designers might call this a “mega navigation” for its influence over the whole menu.
In this tutorial I want to demonstrate a method of creating one unified mega navigation menu. There are many different techniques you can use to achieve a similar effect. I’ll be using jQuery to embed sub-navigation content into a dropdown mega nav box. Take a look at my live demo to see the final design.
Coding a Toggle-Based FAQ Page with CSS3 and jQuery
Company websites often have Frequently Asked Questions for people who don’t know much about the corporation or their services. Larger pages with Q&A listed together will often have a table of contents at the top. I don’t like this method because the pages end up long and sometimes confusing to navigate.
This tutorial is based around a similar idea, but using toggle effects for each question. As the user clicks on a question the answer will slide down and toggle into view. Users can also click already-opened questions which toggles them closed again. This technique is perfect for saving room on the page while cramming together an assortment of helpful information.
How To Code a Forrst API Webapp using JSON and jQuery
Modern development APIs work like agents for sharing information to other 3rd party websites. I’ve written many past tutorials about API development to help anyone new to this process. There are so many web-based services that it’s tough picking something to grab people’s attention.
In this tutorial I want to demonstrate how we can access the Forrst API using jQuery. Some API wrappers actually require server-side code like PHP or Ruby. But it’s often easier to work with JSON objects instead. Then we can parse all the return data using client-side JavaScript. Take a look at my sample demo to see the final product.
How To Code a Hidden Author Bio Display using jQuery
I was browsing through websites one day and came across one really interesting feature. Jennifer Perrin has a small blog on her website which uses a fixed top navbar. In the center you’ll find a profile avatar photo which displays her full author bio(triggered by hover). This is a really interesting feature and I’ve set out to replicate the idea using jQuery.
So in this tutorial I want to demonstrate how we can build a very simple HTML5 webpage recreating a full author bio display. The entire bio container is hidden until the user hovers over the avatar photo. Take a peek at my live demo to see what it should look like:
How To Design Custom Pricing Plan Tables with HTML5 and CSS3
Any company selling a service with payment plans usually breaks up the structure into different packages. Smaller packages will cost less but also provide fewer features. Pricing tables are the perfect UI component to display these packages in an easy-to-compare design.
For this tutorial I want to demonstrate how we can create pricing tables with just a bit of HTML5 and CSS3. Despite the name, I haven’t actually used any <table> elements within the design. You might feel these are easier but they also depend on a rigid formulaic structure. Pricing tables can have many facets including service terms, plan details, pricing details, and of course the purchase/signup button.
