As I am in middle of building my own website and drowning in never-ending design possibilities as well as unfathomable bits of CSS I thought I would share with you some inspiration.
These are sites and tools that I’ve been using either on a daily or weekly basis.
Not just for inspiring my own site but also just to keep up with the latest web design trends and as a resource for my design related posts on the blog.
Whether you’re a beginner in need of some ideas, or you need help articulating a brief to your design team, or you’re a professional designer just looking for a fresh resource, there should hopefully be something here for you.
The site that launched numerous ideas for posts on the blog, Awwwards is the first place I visit when I’m on the hunt for creative motivation.
The site is updated daily with new innovative websites covering a range of categories from entertainment sites, agencies to ecommerce.
CSS Design Awards
Similar to Awwwards above, CSS Design Awards hands out various awards to deservingly beautiful sites, with a skew towards a more “holistic approach to web design”. Yeah I don’t know either, but still… great looking sites.
Described as a “search engine with taste” Niice allows you to collect images from its community’s uploads on your own moodboard. It’s also SFW unlike other image sharing websites.
Designspiration is another great resource for general design inspiration, and again safe for work.
Muz.li is a Chrome plug-in that will replace your default home tab with a searchable database of design inspiration from various sources including Behance and Awwwards.
One Page Love
If you’d like to keep your content to a single webpage, One Page Love offers some good inspiration.
Free graphic resources
Freepik creates free to download graphic resources for designers, including vectors, icons, illustrations and photos.
There are loads of free PSDs and other resources for designers on Freebiesbug.
Graphic Burger offers daily collections of free icon packs, photography, mock-ups and other graphic essentials.
Color. by hailpixel is an extremely easy to use tool for choosing and saving combinations of colours. Swipe back and forth for hue, up and down for lightness and scroll for saturation.
A collection of regularly updated palettes are provided on the surprisingly evocative Pltts. Today I think I will go with Wasabi Suicide.
Bonus tip: when your domain name is already taken, just remove the vowels.
Adobe Color CC
Slightly more sensibly named palette combinations from Adobe Color CC, formerly known as Adobe Kuler. It also has a pretty cool ‘colour wheel’ tool.
Use Pttrns to see how other mobile designers solve UX problems in not only innovative but also user-friendly ways. Filter by device, operating system, year and function.
Here are some different calculator apps for iOS8. Thought I’d go with something different.
WTF Mobile Web
Or ‘what not to do in mobile design’ WTF Mobile Web offers some excruciating examples of poor usability.
I hope Google never finds you again.
Inspect Element – mobile device check
This is more of a tool that I’ve discovered recently that I thought I would shoehorn in here. Did you know on your desktop you can see how any website looks on multiple devices with any network speed?
Go into Chrome, right click on the page, click Inspect Element, then you’ll see a little mobile icon on the top left. Click the icon, then you can select from the device and network drop-down menus to see how your design looks on any screen at any speed.
Econsultancy’s Mobile Web Design Best Practice Guide
If you’re a subscriber, you could download our comprehensive 196 page best practice guide to Mobile Web Design.
Google’s mobile app principles
If you’re getting into the app game, it’s probably best to read this paper very recently published by Google on app UX best practice.
A collection of new and interesting user interface and interaction design. Hover States showcases all of its selections with handy embedded videos.
Little Big Details
For all your micro UX inspiration needs, here is the Gif-loving Little Big Details.
UXPin is a paid for UX design platform, but it does offer some helpful free to download best practice guides (although registration is required). In particular the Web UI and Mobile UI Design Pattern guides.
Behance has a web design community where users can upload their work for display, feedback and network with other designers.
Basically a “show and tell” for designers, Dribbble is a community where you can upload your work and share feedback.
Reading about design
Smashing Magazine publishes helpful in-depth yet accessible daily articles on design, coding, UX and WordPress.
Much like Hacker News but for designers, Design News is a community where professionals share the latest relevant links and news stories.
User Testing Blog
There’s a huge collection of responsive design related articles on the User Testing blog which should clear up any questions you have around RWD.
Although as far as visual metaphors for what will happen to your site if you don’t design mobile first go, this is hard to beat…