10 Great Single Long-Page Website Designs - Apt Design While working on some concepts for a new website I realized that a single, long-page design might be a good solution. That got me looking for some inspiration from others who had done something similar. Now, as a whole I think the single-page long-scrolling webpages are a fancy way for designers and developers to get to show off and be cool. Throw in some hip parallax, give each section a different funky design, and in general get your site as noticed as possible with a lotta gimmicks and show. That’s not always the best way to keep the first things first, and it’s not always the optimum experience for the user (see my last example at the bottom). However, in sifting through the piles of one-page inspirations – especially ones that use a long page method (instead of tabs), I did find some great examples of designs that were original, creative, and still user-friendly. Beatrate Classy, with a little bit of extra eastern-European glitz thrown in. Black Estate Vineyards Bounty Beverages Chleon
Caption Hover Effects | Codrops A tutorial on how to create some subtle and modern caption hover effects. View demo Download source Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. The aim is to keep the effects subtle and provide inspiration for many different variations. Please note: this only works as intended in browsers that support the respective CSS properties. The images used in the demos are Dribbble shots by talented Jacob Cummings. Let’s get started. The Markup The structure of our grid and the figures will be made of an unordered list and each item will contain a figure element. This is the default structure for all the grid examples. But first let’s define the common styles for all effects. The CSS The common styles for all the figures is the following. Effect 1 Effect 2
50 CSS Tools & Resources from 2013 In the article below we have put together a useful collection of our favorite CSS resources, frameworks, UI kits and handy tools, all from this past year, 2013. The main idea of this is to not only illustrate and highlight what a fantastic year it has been for CSS, but to also to offer you a range of production-ready resources that will allow you to rapidly kick-start your next web project. All of the resources have been split into the following categories: Responsive CSS Frameworks, CSS UI Kits, Web Based CSS Tools, Tools to Format & Tidy CSS, CSS Animation Tools, some indispensible CSS Reference Resources, and finally a mixed bag of resources that can’t be categorized. For the most part all of the resources are CSS-only, but there are a few (some frameworks and UI kits) that do require a little Javascript for added functionality. Here we go… LESS Hat 2.0 LESS Hat 2.0 → Preboot Preboot is a comprehensive and flexible collection of LESS utilities. Preboot → Pure CSS Modal CSS Modal → Helium CSS
Planning Your Web Design with Sketches Planning a website doesn't have to be completely digital. Learn how sketching wireframes can help you speed up and innovate your creatives. There are plenty of foundational courses taught in design school. Whether you’ve been a lifelong doodler or have serious sketch ‘chops,’ being able to use paper to explore new ideas is an important skill in the design field. Fear not! In fact, I’ve heard of a growing backlash against wasted billable hours developing fully-rendered Photoshop comps. Whether you’re a big agency or freelancer, being able to communicate ideas to clients with a quick sketch is a valuable tool. Why Sketch? Sketching has some advantages to digital wireframes or even digital drawing. I’ve found, too, that clients tend to find the work informal enough that they can suggest changes and make edits. By sketching, you can do rapid, almost train-of-thought development to get your ideas down quickly. And sketching kills the need for-placement-only (FPO) images. How to Get Started
50 Best Web & Mobile GUI Templates from 2013 Today, for all the web designers out there we bring you a huge collection of the best and most popular web and mobile GUI templates and kits from last year. The kits do come in many different styles, but as you would expect the flat design trend (2013 really was the year of flat!) and the new iOS7 style from Apple are heavily represented. For the most part the kits are primarily available in PSD and AI formats, but we also have some templates in SVG, Fireworks, Graffle and Sketch formats. Here they are: Web GUI Templates Flat Blog UI Kit (PSD Format) Flat Blog UI Kit → Square UI (PSD Format) Square UI → Flat Widget UI Kit (PSD Format) Flat Widget UI Kit → Flat Design UI Pack (PSD Format) Flat Design UI Pack → Flatty UI Kit (PSD Format) Flatty UI Kit → Flat UI Kit (PSD Format) Flat UI Kit → Flat UI Kit (AI Format) Flat UI Kit → Responsive UI Kit (PSD Format) Responsive UI Kit → Flat UI Kit → Flat Rounded Square UI Kit (PSD Format) Flat Rounded Square UI Kit → Gamecenter Pack (PSD Format) Gamecenter Pack →
Starting with HTML + CSS This short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before. It does not explain much of CSS. It just explains how to create an HTML file, a CSS file and how to make them work together. After that, you can read any of a number of other tutorials to add more features to the HTML and CSS files. Or you can switch to using a dedicated HTML or CSS editor, that helps you set up complex sites. At the end of the tutorial, you will have made an HTML file that looks like this: The resulting HTML page, with colors and layout, all done with CSS. Note that I don't claim that this is beautiful ☺ Sections that look like this are optional. Step 1: writing the HTML For this tutorial, I suggest you use only the very simplest of tools. Don't use a wordprocessor, such as Microsoft Word or OpenOffice. Step 1 is to open your text editor (Notepad, TextEdit, KEdit, or whatever is your favorite), start with an empty window and type the following: <! <!
The Best Freebies for Designers (December 2013) Here are the best freebies for designers from December 2013. We have free GUI templates, icon sets, fonts, Photoshop brushes, PSD templates, PS actions… and everything else in between. Free Icon Sets Ecommerce Icons (21 Icons, PSD) Ecommerce Icons → Icon Set (144 Icons, AI) Icon Set → Weather Icons (42 Icons, PSD & AI) Weather Icons → Modern Social Media Icons (344 Icons, PSD & PNG) Modern Social Media Icons → iOS7 Vector Icons (100 Icons, PSD) iOS7 Vector Icons → Smallicons Icon Set (54 Icons, in SVG, PNG & PSD Formats) Smallicons Icon Set → Simple Line Icons (100 Icons, PSD, AI, EPS & SVG Formats) Simple Line Icons → Freecons V2 (155 Icons, PSD, AI & EPS) Freecons V2 → 5 O’clock Shades Icons (16 Icons, PSD) 5 O’clock Shades Icons → UX Gestures (12 Icons, PSD) UX Gestures → Lovicons (124 Icons, PSD & PNG) Lovicons → Round Around (50 Icons, PSD) Round Around → Infinity Space Icons (230 characters, Icon Font) Infinity Space Icons → Free Web & Mobile UI Kits Dark Ui Set (PSD) Dark Ui Set → Flat UI Design Kit (PSD)
Applying CSS | HTML Dog In-line In-line styles are plonked straight into the HTML tags using the style attribute. They look something like this: <p style="color: red">text</p> This will make that specific paragraph red. But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible. Internal Embedded, or internal, styles are used for the whole page. This will make all of the paragraphs in the page red and all of the links blue. Although preferable to soiling our HTML with inline presentation, it is similarly usually preferable to keep the HTML and the CSS files separate, and so we are left with our savior… External External styles are used for the whole, multiple-page website. If this file is saved as “style.css” in the same directory as your HTML page then it can be linked to in the HTML like this: <! Apply! Now change your HTML file so that it starts something like this: <! Save the HTML file.
Media Queries | Popular Sites Simon Collison Stephen Caver Sparkbox Think Vitamin Media Queries Hicksdesign Sasquatch! Spigot Design Palantir Internet Images Be Less Annoying: Reduce Bounce Rates through Better Web Design A properly designed site can reduce bounce rate and increase engagement significantly. In this article, six important elements are introduced that are important for reducing a site's bounce rate. According to the almighty Google, bounce rate is defined as “the percentage of single-page visits or visits in which the person left your site from the entrance (landing) page“. Truly, the real killers of engagement are distractions and annoyances. A properly designed site can reduce bounce rate and increase engagement significantly. Good UIHigh Quality, Relevant ImageryEngaging Color SchemeReadable TypeConsistent BrandingResponsive Feedback 1 – Good UI The quickest way to annoy a user is to design a site that has an unusable or bad user interface. Positioning of typical site elements should be predictable and easy to find. Forms are often a huge culprit in high bounce rates. 2 – High Quality, Relevant Imagery For some reason, it seems like it’s always easy to spot stock photography. Conclusion