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.
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.
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.
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.
Page 1 of 2312345...»Last »