Aetles + design   219

Khroma - The AI color tool for designers
Discover, search, & save color combinations you'll love.

Make it yours

By choosing a set of 50 colors, you'll train a neural network powered algorithm to generate colors you like and block ones you don’t, right in your browser.

Browse infinite combos

Khroma has learned from thousands of the most popular human-made palettes accross the internet to produce great combos. Browse as typography, swatch, gradient, palette, or image.
colors  design  webdesign  tools 
september 2017 by Aetles
Apple’s Icons Have That Shape for a Very Good Reason
Apple products are described as minimalistic, but ‘minimalistic’ shouldn’t be confused with ’simple.’ There’s nothing simple about the surfacing efforts on their hardware products. It’s not something the average Apple product owner is likely to be aware of unless pointed out by their Industrial Designer friend.
A ‘secret’ of Apple’s physical products is that they avoid tangency (where a radius meets a line at a single point) and craft their surfaces with what’s called curvature continuity. Once you know how to spot it on products, you’re likely to start seeing it (or more likely the lack of it) all around you.
The spotter’s guide to good surfacing.
Here are two products that are basic rectangular boxes with a rounded edge (the one on the left also has some unpleasant drafted walls, but that’s another article about how to become a hardware design snob). Look at the beginning and end of that rounded edge on the main surface. See how there’s a sharp shift in highlight? That’s the result of tangency.
apple  design  industrialdesign  products  userinterface  icons 
april 2017 by Aetles
Diverse UI
Diverse UI is a free set of user images that can be used in personal or commercial projects.

We built Diverse UI because who we assume our users are, and how we represent that in our visuals, affects who those users turn out to be. We want those users to be diverse. For more information, we wrote a blog post about why we think diversity in UI mockups is important.
design  ui  photos  diversity  mockup  webdevelopment  webdesign 
april 2017 by Aetles
Color fonts! WTF? 🌈
They are the next big thing in graphic design
They bring multiple colors, shades, textures and transparency to type 
They include vector shapes, bitmap images or even both into font files
color  typography  fonts  webdesign  design 
march 2017 by Aetles
Learn CSS Grid | Jen Simmons
People are starting to ask: where can I learn about CSS Grid?

There are a lot of fantastic resources out there. When it comes to the technical how-to, most of what’s out there was written by Rachel Andrew. If you don’t know her work, take some time to get to know her and follow her.

So here are the links to resources I recommend. I will keep updating this list:
css  design  grid  webdevelopment  webdesign 
february 2017 by Aetles
Google Web Designer
Create engaging, interactive HTML5-based designs and motion graphics that can run on any device.
design  web  google  webdesign  webdevelopment 
december 2016 by Aetles
Create a logo with Affinity Designer | Creative Bloq
Affinity's Dale Cook walks through how to use this popular new design software to create, adjust and export a unique logo.
design  mac  webdevelopment  webdesign 
december 2016 by Aetles
Sans Francisco
A collection of tools to help designers craft delightful experiences.
design  tools  webdevelopment  webdesign 
september 2016 by Aetles
Solitaire Cards – Areaware
Susan Kare’s original artwork for the Windows 3.0 Solitaire game is featured on our new set of playing cards. The release of these cards coincides with the 25th anniversary of the original Solitaire computer game. This deck includes two jokers, designed by Kare exclusively for the Areaware release.
cards  villha  design 
june 2016 by Aetles
Adactio: Journal—Hamburger, hamburger, hamburger
Now that we’ve established the three criteria for evaluating an icon’s effectiveness, let’s see how the hamburger icon stacks up (if you’ll pardon the pun):
Representation: It depends. Is it representing a stacked list of menu items? If so, good. If not, reconsider.
Usage: it depends. Is it being used as an excuse to throw literally all your navigation behind it? If so, reconsider. Prioritise. Decide what needs to be visible, and what can be tucked away.
Clarity: it depends. Is the icon labelled? If so, good. If not, less good.
So there you go. The answer to the question “Is the hamburger icon good or bad?” is a resounding and clear “It depends.”
design  ux  webdevelopment  webdesign  interface 
february 2016 by Aetles
A Conversation With Erik Spiekermann
Erik Spiekermann has forgotten more things than most successful and creative people know in their lifetime. Now in his sixties (68), the German-born designer and typography guru remains as excited about the future as ever.

Erik Spiekermann is one of the most well-known and creative thinkers in design. A type, information and graphic designer by trade, he began his career teaching at the London College of Printing in the 1970s. In 1979, Spiekermann co-founded MetaDesign in Berlin, and in the 1980s, at the cusp of the PC revolution, he co-founded FontShop, a distributor of electronic fonts. He has designed fonts such as Berliner Grotesk, ITC Officina, Nokia Sans and FF Meta. He is also the co-founder of design house Edenspiekermann. He divides his time between Berlin and the Bay Area.
design  typography  mac  history  print  apple  web  reading  ebooks 
february 2016 by Aetles
The Ten Most Popular Web Fonts of 2015 (And Fonts You Should Consider Using Instead) → Typewolf
Welcome to the third annual edition of the ten most popular web fonts of the year as featured on Typewolf. Based on font usage data from 365 websites featured over 2015, these are the ten fonts that were used the most often. You can check out the previous year’s lists for 2014 and 2013 as well.

While reviewing the data for this year, I noticed something a little disconcerting: this year’s top ten list is almost identical to the top ten list from 2014. Other than swapping out Franklin Gothic with Brown, these are exactly the same ten fonts that were featured the most on Typewolf last year.

I curate all the sites featured on Typewolf – so I may be partially to blame for this – however, the sites I feature tend to be a solid representation of what is popular in the design community. About one-third of the sites featured are submissions that people send to me while the remaining two-thirds are sites that I find featured on other popular design gallery sites, Designer News, Twitter, etc. Overall, I think this list generally shows what fonts are most popular with designers at the moment.

So in the spirit of hopefully making type a little more diverse on the web, I decided to list four alternatives for each of the ten fonts featured here. The alternatives all fit a similar aesthetic yet aren’t used quite as much. They may be worth looking into if you want to stand out a little from the crowd.

As always, this is an independent source of data that includes all fonts regardless of where the fonts can be purchased (including indie foundries that don’t make their fonts available on popular services such as MyFonts and Typekit).

Ok, on to the top ten!
design  fonts  typography  webdevelopment  webdesign  webfonts 
january 2016 by Aetles
Animation in Responsive Design ◆ 24 ways
Animation and responsive design can sometimes feel like they’re at odds with each other. Animation often needs space to do its thing, but RWD tells us that the amount of space we’ll have available is going to change a lot. Balancing that can lead to some tricky animation situations.

Embracing the squishiness of responsive design doesn’t have to mean giving up on your creative animation ideas. There are three general techniques that can help you balance your web animation creativity with your responsive design needs. One or all of these approaches might help you sneak in something just a little extra into your next project.
css  design  animation  rwd  responsivedesign  javascript  webdevelopment 
december 2015 by Aetles
newsletter | Brain Pickings
Brain Pickings has a free weekly interestingness digest. It comes out on Sunday mornings and offers the week’s most unmissable articles across creativity, psychology, art, science, design, philosophy, and other facets of our search for meaning.
art  science  philosophy  design  psychology  creativity 
december 2015 by Aetles
mo · js - Motion Graphics For The Web
Fast
Silky smooth animations and effects for staggering user's experience.
Retina Ready
Screen density independent effects look good on any device.
Simple
Simple declarative APIs to master your motion project with ease.
Modular
Custom build for the current project's needs. Bye bye large file size overheads.
Robust
1100+ unit tests and ci techniques help us to carve & backstrap the reliable tool.
Open Sourced
Great growing community refines mo· js fast and ships frequently.
design  javascript  library  js  animation  webdevelopment 
november 2015 by Aetles
How to Get Pixel-Perfect Designs in Adobe Illustrator : Medialoot
Pixels are not what most designers are thinking about when they launch Adobe Illustrator, but there are some pretty awesome things Illustrator can do with them. By default Illustrator is set up to be a resolution independent vector drawing and print layout tool — in short, not for pixels — but in this tutorial we will go over a few techniques which can add pixel-perfect design to it's list of uses.
As regular Medialoot visitors will know, I have previously posted a few articles discussing the advantages of using Fireworks instead of Photoshop for certain design tasks, this tutorial will hopefully do something similar for Illustrator by demonstrating it's widely unknown ability to work well with pixels.
illustrator  tips  tutorials  pixels  webdesign  design 
september 2015 by Aetles
Start Developing iOS Apps Today: Tutorial: Basics
This tutorial takes you through the process of creating a simple user interface and adding the custom behavior that transforms the interface into a working app. The finished app will run on iPhone and iPad.

This tutorial teaches you how to:

Use Xcode to create and manage a project
Identify the key pieces of an Xcode project
Run your app in iOS Simulator
Create a basic user interface in a storyboard
Preview your user interface
Adopt Auto Layout to add flexibility to your user interface
apple  design  ios  programming  apps 
september 2015 by Aetles
Color Hunt
Color Hunt is a curated collection of beautiful colors, updated daily.
We collect and bring you the best color schemes you can use for anything.
By creating smart and simple compositions of several tones, we provide beautiful palettes of colors that work together.
colors  design  webdesign 
august 2015 by Aetles
The Language of Modular Design · An A List Apart Article
Start with language
Language is fundamental to collaboration. In her book How to Make Sense of Any Mess, Abby Covert says that the biggest obstacle teams face is the lack of a shared language. To help establish that shared language, she suggests that we discuss, vet, and document our ontological decisions in the form of “controlled vocabularies.”

In short, we should start with language, not interfaces.

For about a year now, our team at FutureLearn, an open education platform, has been experimenting with a modular approach. I’d like to share a few ways we have tried to hone a shared language to help our team transition into modular design.
css  design  webdesign  webdevelopment  ui 
august 2015 by Aetles
The Hamburger Menu Doesn't Work - Deep Design
It's a beautiful, elegant solution that gets it all wrong, and it's time to move on
design  web  ux  webdevelopment 
august 2015 by Aetles
Five app prototyping tools compared: Proto.io, Pixate, Origami, Framer & Form — Design + Sketch App — Medium
I recreated the IF by IFTTT user onboarding in five different high-fidelity prototyping tools to get an idea of the differences between them: Proto.io, Pixate, Framer, Facebook’s Origami and RelativeWave’s Form.
design  development  tools  prototyping  webdevelopment 
august 2015 by Aetles
Efficient Web Type, c. 1556
Load fonts with JavaScript

When loading fonts, we have the opportunity to use CSS alone, or to use JavaScript and CSS together. Conventional web development wisdom often suggests that we should only turn JavaScript when we need to. In this situation, JavaScript is necessary to influence how readers perception of how quickly the fonts have loaded, based on the state they are.

A CSS-only approach, recommended by default on Google Fonts and some other services, would have you drop in a <link> tag or use a CSS @import statement:

<link href="http://typefound.ry/css?family=Klinic+Slab" rel="stylesheet">
@import url(http://typefound.ry/css?family=Klinic+Slab);
Despite this, choose the JavaScript-based option. If you are using a web font service that asks you to drop in a CSS link tag, there is probably an “Advanced Option,” too, that lets you paste in a JavaScript snippet. The later is going to be more beneficial to you.
typography  history  design  webdevelopment  webfonts  fonts 
july 2015 by Aetles
LukeW | Dropdowns Should be the UI of Last Resort
All too often mobile forms make use of dropdown menus for input when simpler or more appropriate controls would work better. Here's several alternatives to dropdowns to consider in your designs and why.
design  ux  ui  webdevelopment  webdesign 
july 2015 by Aetles
Drop Downs Should be the UI of Last Resort (with images, tweets) · lukew · Storify
All too often mobile forms make use of drop-down menus for input when simpler, more appropriate controls would work better. Here's a few alternatives.
design  dropdown  interface  ux  ui  webdevelopment 
june 2015 by Aetles
Responsive Typography with Sass Maps
Managing consistent, typographic rhythm isn’t easy, but when the type is responsive, things get even more difficult. Fortunately, Sass maps make responsive typography much more manageable.
Writing the code is one thing, but keeping track of font-size values for each breakpoint is another — and the above is for paragraphs alone. Throw in h1 to h6s, each with variable font sizes for each breakpoint, and it gets cumbersome, especially when the type doesn’t scale linearly.
css  design  typography  sass  webdevelopment 
june 2015 by Aetles
Modern Design Tools: Using Real Data — Design Insights from Bridge — Medium
I believe one of the biggest flaws of today’s tools is their failure to allow designers to easily work with real data. Because of this, designers often fill their mocks with idealized information that is anything but representative. Beautifully composed photos. Perfectly sized bits of text. Just the right amount of content to fit. We spend an inordinate amount of time making our pixel-perfect fabrications. We then make sub-optimal decisions based on this, considering only our single, perfect state. We are surprised when our designs are implemented because we forgot to solve a variety of edge cases and problems. When we don’t work with real data, we deceive ourselves.

In contrast, when designers work with real data they design in reality. They allow data to inform and constrain their work. Their decisions are wholly informed; implementation details carefully considered; edge cases solved. They build empathy for how their users will actually experience things in a variety of contexts. They are not surprised when their designs get implemented because they’ve been using real data all along.
data  design  ui  ux 
june 2015 by Aetles
ish. yet another viewport resizer.
I’m happy to introduce ish. 2.0. For the uninitiated, ish. is yet another viewport resizing tool. It’s called “ish.” because it focuses on general ranges (small-ish. medium-ish. large-ish.), rather than popular device widths. It’s our jobs as web designers to make sure our interfaces look and function across all screen sizes, and ish. is here to help.
css  design  webdesign  webdevelopment 
june 2015 by Aetles
The PLAY button is not optical alignment — Medium
Lots of people say that you can not center align the play button,the physics center is not the visual center . Well,actually I think you can,the key is to find the real center of the triangle.
design  ui  ux  webdesign 
june 2015 by Aetles
Solved by Flexbox — Cleaner, hack-free CSS
CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity.

Finally, thanks to Flexbox, we have a solution.

This site is not another CSS framework. Instead, its purpose is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. And with the recent release of Internet Explorer 11 and Safari 6.1, the latest Flexbox spec is now supported in every modern browser.

Check out the demos below. View the styles in the Web inspector or dive into the source to see just how easy CSS layout will become once Flexbox becomes mainstream.
css  design  layout  flexbox  webdevelopment  webdesign 
may 2015 by Aetles
The Apple Watch: User-Experience Appraisal
Summary: Smartwatch apps should rely on gestures more than on navigation elements, prioritize the essential, support handoff, and create tailored, standalone content.
apple  applewatch  ux  ui  design 
may 2015 by Aetles
How To Make a Letterpress Texture Effect in Photoshop
I’ve received a few questions recently about how I create the letterpress style texturing that appears on pretty much every retro/vintage design I make. Today’s tutorial will show you a quick and easy way to give your logos and typography that ink stamp style effect that originated from the old letterpress style printing technique.
design  photoshop  grunge  vintage 
may 2015 by Aetles
LukeW | There Is No Fold
On the Web, people use the concept of “above the fold” to support layout decisions, call to action designs, ad placements, and more. Here’s why most of these arguments don’t fly.
design  fold  webdesign  ux  webdevelopment 
april 2015 by Aetles
LukeW | Obvious Always Wins
It’s tempting to rely on menu controls in order to simplify mobile interface designs —especially on small screens. But hiding critical parts of an application behind these kinds of menus could negatively impact usage.
design  ux  navigation  webdevelopment  webdesign 
april 2015 by Aetles
Motion Blur Effect with SVG | Codrops
A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG blur filter.
css  design  animation  svg  webdevelopment 
april 2015 by Aetles
Flat Color Icons | Icons8
312 free icons for personal and commercial use. No credits required.
design  icons  webdesign  webdevelopment 
april 2015 by Aetles
Typewolf → A Comprehensive Guide to Smart Quotes, Dashes & Other Typographic Characters
A comprehensive guide to using proper typographic characters, including correct grammatical usage.
design  typography  mac  osx  writing 
march 2015 by Aetles
famfamfam.com: Flag Icons
“Flags” are 247 icons — in GIF and PNG formats — representing most countries in the world as small pixel icons. These flag icons are available for free use for any purpose with no requirement for attribution.
design  icons  webdevelopment 
march 2015 by Aetles
Harnessing Flexbox For Today's Web Apps - Smashing Magazine
Although the syntax might be initially confounding, flexbox lives up to its name. It creates intelligent boxes that are stretchable, squeezable and capable of changing visual order. It provides simple solutions to layout paradigms that CSS has always struggled with: vertical centering and equal heights. Flex items are truly accommodating and a pleasure to work with.
css  css3  design  flexbox  webdevelopment  webdesign 
march 2015 by Aetles
It’s Only Color
Working with color while designing is really about creating another dimension in your medium. Choosing a successful palette creates a foundation for adding meaning and hierarchy to your design. Although it may seem overwhelming at first, choosing a palette can be a very straightforward process.

I’ve found that three colors are all you need – and choosing them doesn’t have to be arduous. Equally, putting them to use shouldn’t be stressful. In this post I’ll introduce some basic color theory and share a few tips I’ve learned along the way. Hopefully, it will help inform your choice and use of color – enjoy.
color  design  webdesign 
march 2015 by Aetles
Semantic UI
Semantic is a UI component framework based around useful principles from natural language.
css  design  framework  webdevelopment 
february 2015 by Aetles
wordmark.it - helps you choose fonts!
The Process

Choosing the ideal typeface for what you are trying to communicate can be frustrating with the available font browsing interfaces. Wordmark.it is designed to help with this font selection process by quickly displaying previews of any text with the fonts installed
on your computer.

Type a word or a phrase in the text box 1 and click the load fonts button.
Scroll through the previews and choose the ones you are interested in by clicking on them.
Click the filter selected button 2 to isolate selected previews.
Finally note down the names of the selected fonts to be used in your image or text editing software.

You can also:

Adjust the size of the previews by entering a pixel value 3 or by clicking the smaller / bigger buttons 4
Invert preview colors 5 to test the fonts on a dark background.
Toggle between lower case (aa), Title Case (Aa) or UPPER CASE previews(AA) 6
Adjust letter spacing (tracking) of fonts in selections (<> button when you move your mouse over preview tiles)
Zoom in to explore intricate details of fonts in selections (+ button when you move your mouse over preview tiles)
Drag and sort the order of previews in selections to compare similar fonts side by side.
How It Works?

Wordmark.it detects the fonts installed on your computer with the help of a simple Adobe Flash script and displays the results using HTML and JavaScript. You need to have Flash plugin installed and JavaScript turned on. Font rendering relies on browser's capabilities and some of your installed fonts may not show up due to their names not being recognized by some browsers. Wordmark.it also works on iPhone and iPad without Flash, make sure to give it a try.
fonts  design  typography 
february 2015 by Aetles
Gridset | Fully-custom grids for responsive layouts
Gridset for design
Designing grids with Gridset is as easy as dragging guides in Photoshop or Fireworks. Gridset provides whatever you need: PNGs, a comprehensive cheat sheet and CSS.
Gridset for prototyping
Put the calculator back in the drawer. By simply adding classes to your HTML, Gridset allows you to build responsive prototypes fast, without doing any maths.
Gridset for production
Gridset provides all the measurements and tools you’ll need to integrate with your existing markup, without the need for any new classes or HTML.
css  design  grid  webdesign  webdevelopment 
february 2015 by Aetles
Frere-Jones Type | Typeface Mechanics: 001
Our conscious minds want to draw one shape, but our eyes need to see another. Part of typeface design is managing this eternal friction between logic and optics. It’s always there, no matter the style.

This new series of posts will explore what I call “typeface mechanics”, the behind-the-scenes work that makes typefaces visually functional. It is what placates the stubborn oddities of human perception, helps or hinders the user, and informs long-standing conventions of design.

The typeface design process has many counterintuitive moments. One of the earliest pertains to vertical position and size, which we expect to be consistent among letters. We could simply pick a measure and apply it everywhere. But this straightforward and logical plan would fail, thanks to our eyes and brains.

Square shapes like H have a simple and stable relationship to the baseline and cap height. Their upper and lower edges coincide with these boundaries and stay put. But only a narrow sliver of an O is the full height, and the rest of the shape falls away. The parts that are too short greatly outnumber the parts that are big enough, so we conclude — wrongly, but very reliably — that the round shape is too small.
design  fonts  typography 
february 2015 by Aetles
Number off-center in notification bubble - meta - Atom Discussion
braver11d
Yeah, this is basically just a nightmare in CSS. Most fonts are made to sit on a line, not in the middle of a box. CSS however somehow wants to have them in the middle of the "line-height", a concept that didn't previously exist. So while fonts are drawn in a box, that box doesn't need to be filled fully and there was previously no reason for that box to have the same amount of space at the top as it has at the bottom: as long as it sits on the baseline it used to be fine. Most fonts we still use, like Helvetica (1957) or Courier (1955), are pretty much ancient.
This creates problems: a font might not visually sit in the vertical middle of a box in CSS. In fact, it may vary wildely between fonts (i.e. Helvetica,Arial,sans-serif could go all over the place depending on the font selected).
In my experience Safari on OS X is very reliable, perhaps because compensates for a lot of fonts. The rest is basically a crap-shoot and you're left making presumptions about sizes and relative amounts of padding required.

So there is no right way, frustratingly. Safari implements it in accordance with the intention of CSS in a way you can actually make stuff look right. Font rendering on Apple software is still ages beyond the rest in every possible way. The others are perhaps more "straight" but in a way that's almost impossible to work with.
webfonts  fonts  css  design  webdesign 
february 2015 by Aetles
Entypo
What is Entypo+?
Entypo+ is the third version of a free suite of premium quality pictograms. It’s released under the license CC BY-SA 4.0. Each pictogram has been drawn for pixel perfection at a size of 20 x 20 pixels and with a very consistent style. The difference between this version of Entypo and previous ones is that the suite now only consist of SVG images. There is no fonts or PSD.
design  fonts  typography  icons  webdesign  webdevelopment 
february 2015 by Aetles
Inspiration for Text Input Effects | Codrops
Some inspiration for effects on text inputs using CSS transitions, animations and pseudo-elements.
css  design  forms  webdesign  webdevelopment 
january 2015 by Aetles
Google Web Fonts Typographic Project
HAND-PICKED TALES from
ÆSOP’S FABLES
with HAND-PICKED TYPE from
GOOGLE FONTS
There are over 650 Google Fonts available for free. But, pairing typefaces isn’t easy and many of those fonts don’t work for typical websites. Part of the 25x52 initiative, this collaborative, ongoing project offers inspiration for using Google’s font library.
design  fonts  typography  webdesign  webfonts 
december 2014 by Aetles
Color Template
How do you choose the right colors for your designs?
design  colors  webdesign  webdevelopment 
july 2014 by Aetles
Cotton Bureau – How it Works
You’re a designer, web brand, agency, conference, start-up, app developer, or community. You’d love to make t-shirts, right? Of course you would. So why haven’t you? We’ll tell you why...it’s hard. Finding a good print shop is hard. Learning about screenprinting is hard. Customer service is hard. Shipping is hard. It’s all a big pain in the butt.

What if you could post your t-shirt design for sale in a high-quality, design-focused online t-shirt shop and have someone else take care of all the dirty work for you? No buying hundreds of shirts upfront. No inventory. No shipping. No customer service. No risk. Sounds great, right?
THAT'S WHERE WE COME IN. HERE'S HOW IT WORKS.
print  tshirts  design 
may 2014 by Aetles
Why Users Fill Out Less If You Mark Required Fields - UX Movement
Are most of your users skipping the optional fields on your form? You might not need that extra information, but having it could help you learn more about users and give them a better experience. If you want more users to fill out the optional fields on your form, avoid marking required fields and mark optional ones only.
design  forms  ux  ui 
april 2014 by Aetles
Design+code: Learn iOS design and Xcode
Design isn't hard to learn. That's because most of us are already building products and are familiar with what design means. What used to be complex and confusing is now simple and effective, thanks to Sketch, an app that is entirely focused on user interface design. Unlike Photoshop, you don't need to worry about photo editing and the hundreds of other settings that are noises to designing a simple application.

Sketch uses one unit, styles only relevant to UI design, a built-in iPhone previewing tool called Mirror and Artboards, the most efficient way to template multiple screens.
Everything is already in vector, so you don't have to worry about designing for multiple devices. And delivering assets is a breeze.

It's only been one year since Sketch has completely changed my design workflow. As a design application that I spend 8 hours a day on, there is no other tool that has influenced my life more than Sketch. The growth that I see for Sketch is out of this world; new resources and plugins are coming out almost on a daily basis. This tiny team of 4 is innovating at a faster rate than the gigantic team building Photoshop.
design  graphics  webdesign 
april 2014 by Aetles
Side Drawer Navigation Could Cost Half Your User Engagement
The friendly and wonderfully helpful Google Play team suggested that navigation drawers (which I’m referring to here as a side menu or side navigation) were the new way to go and would be the preferred design pattern for our Android app.

And so about six months ago, we decided to take the plunge and switch to a side navigation. To make sure people knew about all the available views and options we had the app start up by showing the navigation drawer open:



When we launched the new version the user reviews were great (“Love the new design, 5 stars”).

But when we looked at our analytics, it was a disaster! Engagement time was halved!

It looked like “out of sight, out of mind” really was the case.
design  ux  navigation  webdevelopment 
april 2014 by Aetles
Why “Simple” Websites Are Scientifically Superior — Design / UX — Medium
In a study by Google in August of 2012, researchers found that not only will users judge websites as beautiful or not within 1/50th — 1/20th of a second, but also that “visually complex” websites are consistently rated as less beautiful than their simpler counterparts

Moreover, “highly prototypical” sites — those with layouts commonly associated with sites of its category — with simple visual design were rated as the most beautiful across the board.

In other words, the study found the simpler the design, the better.

But why?

In this article, we’ll examine why things like cognitive fluency and visual information processing theory can play a critical role in simplifying your web design & how a simpler design could lead to more conversions.

We’ll also look at a few case studies of sites that simplified their design, and how it improved their conversion rate, as well as give a few pointers to simplify your own design.
design  webdesign  webdevelopment 
march 2014 by Aetles
Make a Flippin’ 3D Countdown with CSS & JavaScript | Viget
Since this opportunity only occurs during the slow-motion part of the video, we wanted to make sure users understood that the video would be moving on if they didn't choose a product quickly enough. So, we added a countdown timer to the top right of the screen, which finishes when the slow-motion segment ends.



Codepen Example

I was pretty happy with the final effect, which uses only a little CSS and some JS class juggling.
css  css3  design  javascript  webdevelopment 
february 2014 by Aetles
The Ten Most Popular Web Fonts of 2013 — Type & Grids
The use of web fonts has continued to explode in 2013 – designers are no longer content with using standard system fonts like Arial and Georgia. On my side project Typewolf, I categorize the latest website designs by the web fonts they use. These are the ten most popular fonts I’ve noticed from analyzing font usage on Typewolf in 2013.
design  fonts  typography  webdesign  webfonts 
february 2014 by Aetles
Liquidapsive (Liqui-dap-sive)
Ever wondered what the difference between Adaptive, Responsive, Static and Liquid sites is? Had someone try and explain it only to be left more confused?

Pick a flavor from the drop down on the top of the page then drag your window narrower and wider, taller and shorter. It will make much more sense when you see for yourself how the approach works.
design  webdesign  responsivedesign  rwd 
february 2014 by Aetles
The Pattern Library
THIS ON GOING PROJECT COMPILES PATTERNS SHARED BY
THE MOST TALENTED DESIGNERS OUT THERE FOR YOU
TO USE FREELY IN YOUR DESIGNS.
design  graphics 
january 2014 by Aetles
Ten reasons we switched from an icon font to SVG - Ian Feather
We use a lot of icons on lonelyplanet.com and recently went through the task of transferring them from an icon font to SVG files. I wanted to share why we did this along with some of the current limitations to SVG and how we got around them.
css  design  fonts  icons 
january 2014 by Aetles
Keyboard Shortcuts for Sketch App
A list of Keyboard Shortcuts for Sketch App.
design  sketch  graphics 
december 2013 by Aetles
colourcode - find your colour scheme
Pick colours based on hsl. Scheme-mode with monochromatic, analogic, complement, triad and quad colours.
color  design  webdesign  colors  inspiration 
november 2013 by Aetles
Fix Your Boring Slides - Waxy.org
After running XOXO for two years, and doing a bunch of talks myself at various conferences, I've seen my share of presentation slides from non-designers.

Way too often, they look something like this:



Inevitably, they use one of the two basic Keynote templates — black on white, or white on black.

I get it! You're not a designer. You're a writer, filmmaker, musician, whatever, and even learning how to make these slides was kind of a big deal for you. So you stick with the default templates.

The problem with any defaults is that they're boring and overused, which distracts from your message. They suck any life out of your story, and fixing it is so easy.

So I made a little guide with six simple tips for XOXO speakers to improve their slides in a couple minutes. I thought you might find it useful.
design  presentation  keynote 
november 2013 by Aetles
Spur - A fun and easy way to critique a webpage.
A fun and easy way to critique your web pages.

What is Spur?
Spur is a fun and easy way to critique web designs in ways you’ve never done before. Just paste a URL (or upload an image) and you’ll be able to use seven different tools to help you find what’s working (and what isn’t!).
design  usability  webdesign  testing  tools  web 
october 2013 by Aetles
The Theme Foundry
Handcrafted with care since 2008.

We're obsessed with building beautiful and functional template designs (themes) to use with your WordPress powered website. We'll worry about the design details and clean code so you can stay focused on writing great content and running your business.
design  themes  webdesign  wordpress 
october 2013 by Aetles
BOX DEMO - .work | GMUNK
THE CONCEPT

The piece was essentially grounded on the principles of Stage Magic, invoking five of the basic categorizations of Illusionary.. These Categories greatly informed the conceptual and aesthetic foundation and were fused with a graphic design aesthetic heavy in Minimalistic Form and Illuminated Geometry.. This direction was then placed into a projection-based Physical Installation, where all the 'magic' was captured live and in-camera, filmed documentary-style with no post effects or treatment; in essence the immense technology behind the curtain being completely masked from the viewer by the methods used to capture the performance.. This quote by Science-Fiction writer and Inventor Arthur C Clarke perfectly summarizes the film's foundation:

Any sufficiently advanced technology is indistinguishable from magic.
-Arthur C. Clarke
art  design  animation  impressive 
september 2013 by Aetles
Modulz · Ready-made, customizable, HTML landing page sections.
Ready-made, customizable, HTML landing page sections.

"Finally, a way to quickly build good-looking landing pages without the hassle."
"Looking to build a beautiful marketing site in 5 mins? You need Modulz."
"Modulz is Bootstrap for landing pages. Finally, I can design beautiful sites for my products."
design  html  startup  marketing 
september 2013 by Aetles
5 Lessons Learned from 100,000 Usability Studies - Moz
People get confused, frustrated, and angry while using websites. They sigh, they groan, and sometimes they even shout. I see it happen with my own eyes each and every day.

Over the years at UserTesting.com we’ve literally watched hundreds of thousands of usability studies, which gives us a unique perspective into some of the most common issues that impact users. I’d like to share five of those insights with you.
design  usability 
september 2013 by Aetles
iPhone 6 Infinity
Apple fan fiction is more popular than ever and usually takes the form of mockups of designs for new products and alternate designs for existing products. There's been a recent burst of creative energy unleashed on Dribbble around the idea of an iPhone with a screen that wraps completely around the device (or at least down around the sides).
iphone  ios  concept  design 
august 2013 by Aetles
Absolute Centering - CodePen
Absolute Center.

This box is absolutely centered within the viewport, horizontally and vertically, using only CSS.
css  center  design 
august 2013 by Aetles
Typewolf — Typographic Inspiration for the Modern Web
Typewolf is a curated design showcase that identifies the fonts used in the design. Our goal is to serve as a one-stop resource for designers seeking typographic inspiration for the modern web.
design  typography  web  webdesign 
august 2013 by Aetles
Webfonts Corner - Home
webfontscorner is about
Webfonts on websites
design  fonts  typography  webfonts 
july 2013 by Aetles
NewNet-Soft - CSS Typography cheat sheet
Small roundup on CSS features that will enhance your web typography.
Today I want to write about a few small typography enhancing features in CSS. Most of them don't seem to be inside the mainstream CSS wisdom floating around (perhaps I am just missing them constantly :(...). So I decided to give them a quick shout out so more of you guys can make use of them.
css  css3  design  typography 
june 2013 by Aetles
Why ‘Ok’ Buttons in Dialog Boxes Work Best on the Right - UX Movement
Designers often use dialog boxes when there’s an important message users need to read, or an important action they need to take. The order you place your buttons can affect which action the user chooses. When you place your buttons in an order that is clear and efficient to users, you can prevent them from choosing the wrong action and making a serious mistake.
Button placement is important, but remember to also pay attention to the visual weight and labels you give your buttons. All of these design aspects come into play when users process dialog boxes. Now that you understand the reasons why ‘Ok’ buttons work best on the right, you’ll have something more to refer to when figuring out button placement than the flimsy platform consistency argument.
design  usability  ux  ui 
june 2013 by Aetles
iOS 7 - Matt Gemmell
Earlier this week, Apple announced and previewed iOS 7. As widely expected, it sports a new interface aesthetic characterised by strong, simple lines, areas filled with flat or gradient colours, and a lack of ornamentation.

I’d like to discuss some aspects of the new UI style here, in comparison to iOS 6.

The only surprise for me was that others were surprised. This is an aesthetic change that has been on its way for quite some time; I even wrote about it more than a year ago, where I described it as Augmented Paper.

Whilst much of the rest of the industry has moved to a less embellished UI style (admittedly partly just for differentiation’s sake), iOS remained firmly rooted in the practice of clearly delineating sections of each screen, using pseudo-3D visual effects like gloss and shadows, and mimicking physical affordances.

The thing is, we’ve grown up. We don’t require hand-holding to tell us what to click or tap. Interactivity is a matter of invitation, and physical cues are only one specific type. iOS 7 is an iOS for a more mature consumer, who understands that digital surfaces are interactive, and who doesn’t want anything getting in the way of their content.
apple  design  ios  ios7 
june 2013 by Aetles
« earlier      
per page:    204080120160

related tags

38one  43folders  99design  adobe  advertising  Aetles  alfabet  android  animation  anteckningsbok  användarvänlighet  Användarvänlighet;  app  apple  applewatch  apps  appstore  architecture  arlington  art  artister  aya  backgrounds  badrum  bakgrund;  band  Bildbehandling  Blogg  bok  bookmarklet  bootstrap  bord  boxar  browser  brushes  buggar  bugs  business  cards  carousels  center  china  chrome  Clever  code  cognitive  color  colors  concept  content  control  coolstuff  copying  creativity  css  css3  data  datorer  design  design;  designers  Devello  developer  developers  development  Digitalfoto  diversity  drawer  drawers  drop  dropdown  drupal  ebooks  education  eld  email  favicon  feedback  fire  firewall  fireworks  flash  flexbox  flueless  fold  font  fonts  Form  forms  Formulär;  fotoalbum  fracking  framework  furnitures  future  färg  games  gas  gaslåga  glas  glasbord  glasskiva  global  goodfonts  google  grafik  graphics  grid  grid-based  grids  grunge  gränssnitt  gtd  handdukstorkare  handduksvärmare  handheld  hem  history  home  html  html5  Humor  Hus  icons  idéstadie  ikoner  illustration;  illustrator  Illustrator;  impressive  industrialdesign  infographic  Inhabitat  innovation  inredning  inspiration  interface  Internet  inventing  ios  ios7  ipad  iphone  itunes  javascript  jonathanive  Journal  jquery  js  kartonger  keynote  konst  kranar  land  landmines  layout  layout;  led  library  ljus  load  logga  loggan  logos  logotyp  logotypen  logotypes  lysdiod  lysdioder  lådor  mac  Mactips  marketing  math  miele  mines  misstag  mobile  mobiledesign  mobilesafari  mobileweb  mockup  movies  Musik  musiker  möbler  mönter;  navigation  news  newsletter  newsstand  notebook  någonsin  och  of  ornament  os  osx  patterns;  pediatric  performance  philosophy  Phinney-us  phones  photos  photoshop  pinboard  pixels  poster  posters  postscript  presentation  print  products  programming  prototyping  psychology  publications  publishing  reading  redesign  reset  responsivedesign  responsiveness  retina  retro  Return  rwd  rökfri  safari  sajt  sajter  sass  science  scifi  scroll  seo  service  shadow  site  sketch  skeuomorphism  skivbolag  skrivstil  sliders  smart  smartphones  snyggt  software  space  specialtecken  speed  spis  språk  startup  stevejobs  structure  struktur  success  svg  symboler  symbols  sökmotorer  sökmotoroptimering  tabs  technology  teckensnitt  teckensnitt;  Teknik  testing  textures  the  themes  tips  tog  tool  tools  toshihiro  trends  tryck  tshirts  tutorials  Typblography  typografi  typography  typsnitt  typsnitt;  ui  unicode  url  usability  Usability;  userexperience  userinterface  utdragslådor  ux  vatten  vattenstråle  vector  vektor  video  villha  vintage  väggmonterat  värmeledande  värsta  washingmachines  weather  web  webbdesign  webbdesign;  Webbutveckling  webdesign  webdevelopment  webfonts  website  white  wordpress  writing  x  xcode  öppen  överdesignat 

Copy this bookmark:



description:


tags: