Site Structure | Web Style Guide 3
The success of the organization of your web site will be determined largely by how well your siteโs information architecture matches your usersโ expectations. A logical, consistently named site organization allows users to make successful predictions about where to find things.
Figure 3.2 โ Examples of the โGoldilocks problemโ in getting the site structure โjust right.โ Too shallow a structure (left) forces menus to become too long....
๐
7 Rules for Creating Gorgeous UI
7 Rules for Creating Gorgeous UI
The Rules:
Light comes from the sky Black and white first Double your whitespace Learn the methods of overlaying text on images (see Part 2 ) Make text popโ and un-pop (see Part 2 ) Only use good fonts (see Part 2 ) Steal like an artist (see Part 2 )
๐
HSL Color
With practice, this new mental map of color will become instinctive: youโll likely find that it is much easier to create and manipulate color specified in HSL in your stylesheet code than hex or RGB.
See also Three Ways You Should Be Using HSL Color In Your Site Today.
๐
(image)
(via iPhone 6 Screens Demystified | PaintCode )
See also The Curious Case of iPhone 6+ 1080p Display
๐
(image)
Not all technical debt is born the same, because A Mess is not a Technical Debt .
(via TechnicalDebtQuadrant )
๐
Foundation | The Most Advanced Responsive Front-end Framework from ZURB
Foundation | The Most Advanced Responsive Front-end Framework from ZURB
Responsive design gets a whole lot faster for users.
Itโs now crazy fast for designers and engineers to code and learn too.
๐
(image)
The way to mitigate these unintended effects is to replace Personas with models that enable cohesive stories. These models are called Characters .
What would make sense for the brain is a believable story which explains that purchase. This is what we can use Characters for. A Character is someone who:
Has anxieties & motivations. Experiences purchase-progress events. Encounters purchase-progress situations. (via Replacing Personas With Characters โ Medium )
๐
(image)
Size templates for Twitter images.
(via Baixe modelos de imagens para o Twitter )
๐
(image)
โUI design starts with words.โ
(via How Do You Design Interaction? | Smashing Magazine )
๐
(image)
(via Copa do Mundo e sua relaรงรฃo com Design. | Leandro Soler )
๐
(image)
(via Logo da copa do Mundo no Brasil em 2014. Como e quando foi criado. | Matutando )
๐
Codrops
Codrops
Tutorials
In this section you will find in-depth how-tos involving common web development and web design techniques.
Playground
In this category you will find experiments, plugins and articles related to web development and programming. Here we present some new ideas and inspiration for solving problems and tackling challenges around web development.
Blueprints
The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration....
๐
(image)
(via Why Itโs Important to Sketch Before You Wireframe โ UX Movement )
Where by โCodeโ you should really read โPrototypeโ.
UI/UX design artefacts
Compare and contrast different design artefacts (sketch, wireframe, mockup, and prototype) in terms of their fidelity, speed, cost and use cases.
๐
(image)
uxdtoday:
โWhen you donโt consider UX /UI in design: These pencils were withdrawn from US schoolsโ
โ @raju
๐
(image)
userexperiencehub:
Design Process Diagram
by Todd Warfel
๐
(image)
At Realmac we went this route with Ember, but we built in a slight twist. We try and guide the customer so they can get help or make a feature request rather than leaving a review on the App Store that we canโt respond to. If they are unhappy or confused we want to know about it and help them, if they are happy they can let us know and perhaps more importantly leave a review....
๐
Favicon Generator – Generate favicon pictures and HTML
Favicon Generator โ Generate favicon pictures and HTML
Generate the favicon pictures and HTML code that work on all major browsers and platforms.
๐
Convert Photoshop Drop Shadows to CSS3 Box and Text Shadows
Convert Photoshop Drop Shadows to CSS3 Box and Text Shadows
This tool creates CSS3 Box Shadows based off of Photoshop Drop Shadow settings. After stumbling upon the Recreating Photoshop Drop Shadows in CSS3 and Compass article by Grady Kuhnline, I wanted to build a tool that would allow the rest of us not using Compass to have the same ability to convert for CSS3.
๐
Responsivator
Responsivator
View & share how sites look at different screen sizes
Works with localhost too.