How to Make Your Site Look Half-Decent in Half an Hour

Programmers like me are often intimidated by design – but a little effort can give a huge return on investment. Here are one coder’s tips for making any site quickly look more professional. I am a programmer. I am not a designer. But although I am a programmer, I want to make my sites look attractive. For a very long time after I became a programmer, I was scared of design. But a little while ago, I decided to do my best to hack what it took to make my own projects look vaguely attractive. If I hadn’t figured out some basic design shortcuts, it’s unlikely that a weekend hack of mine would have ended up on page three of the Daily Mail. So, if you are a developer, my Christmas present to you is this: my own collection of hacks that, used rightly, can make your personal programming projects look professional, quickly. One thing to note about these tips, though. With that, on to the tools… 1. If you’re not already using Bootstrap, start now. 2. 3. Then we add these files to our <head>. 4. 5.

Our 50 Favorite Web Development Resources from 2012 Let’s keep it simple: last year, we did a roundup of 50 of the most useful web development resources. Today, we bring to you the 2012 edition, but only better. And what can you expect to find in this years roundup? Pretty much everything a developer could ever need: CSS frameworks & tools, HTML5 resources, JavaScript frameworks & tools, web editors, mock-up tools, application frameworks, responsive layout tools and resources… and on and on. This post does not include any jQuery resources as we published its own round-up last week, you can check it out here Top 50 Useful jQuery Plugins from 2011. CSS Frameworks Base Framework Base is a 12 column 960px grid (max) responsive CSS framework that contains everything you need to get up and running quickly. Bourbon Neat Neat is a simple grid framework built on top of Sass and Bourbon using em units and golden ratios. Kube CSS Framework The Kube Framework is certainly not an overblown responsive CSS framework with multiple layouts and styles. RWD Grid

Web Creme | Web design inspiration 30+ tips to improve your iOS design workflow (in Photoshop) | Radesign I’ve compiled below some of the methods I follow when designing iOS apps in Photoshop. Many of the tips are applicable to UI design in general. Note: The shortcut keys are for Windows; Mac users, please use Cmd for Ctrl and Opt for Alt. 1. Do you design for Retina first and then downscale it to standard resolution? 2. For layer effects that appear immediately on top of other elements use only Normal blend mode (e.g.: drop shadow & outer glow). 3. Want to try out different hues for a gradient button without changing the gradient’s color stops each time? Method 1: Color Overlay on Gradient Layer 1. Method 2: Gradient Overlay on Solid Color Layer 1. 4. For navigation bars use an overlay of radial gradient to make it a little more interesting. Method 1: Radial Gradient Tool 1. Method 2: Bevel & Emboss You can use Bevel & Emboss too. 5. Photoshop allows you to separate the shadow (and any other layer effect) from its layer. 1. 6. 7. 8. This is one of the best improvements in CS6. 9. 10. 11. 12.

Graphic Exchange - The blog of Mr Cup - graphic design, print, identity, products and more... This new deck by Joe White follow the Contraband one. You know Joe and his amazing detailed design as we work together on the (sold out) 2015 edition of the calendar and he designed the front cover. Every single playing card within the High Victorian deck was designed from scratch - even the Aces, Jokers, and court cards exude the grand excess of ornamentation quintessential to the Victorian era. In a word: breathtaking. Antler is a deck designed by Tom Lane, who also creates this year edition of the front cover of the letterpress calendar! I contact Jeff Trish as I love his design of this deck, and I am pleased to say he participates in this year edition of the calendar too! As both Tom Lane and Jeff Trish participate in this year calendar I propose you 2 packs with the calendar (Deluxe or Normal) and their decks.

Freebie iPhone 5 PSD iOS 6 Mockup Collection Our iPhone 5 Cover Actions are a faithful recreation of Apple’s newest Retina display iPhone. These Action will render your 2D artwork, UI/UX workflow designs or wireframes onto a hi-resolution 300DPI glossy 3D product shot that you can freely place into your website, office presentation or marketing campaign. Each Action is approximately 300KB in size, but don’t let this small digital footprint fool you. Each Action in this set will give you a fully layered PSD file @ 300DPI and a resolution of 1150×1860. Allow us to render your mobile app and impress your clients, we have all the popular angles for the new iPhone 5 so we guarantee that your product will look consistent across all angles and positions. Nothing is more important than making sure your app looks as perfect as possible—first impressions matter! Our Cover Action mockups include black and white colours. All iPhones are rendered at the same resolution allowing you to create unique compositions and layouts. iPhone 5 PSD Mockups

How Do Users Really Hold Mobile Devices? For years, I’ve been referring to my own research and observations on mobile device use, which indicate that people grasp their mobile phones in many ways—not always one handed. But some of my data was getting very old, so included a lot of information about hardware input methods using keyboard- and keypad-driven devices that accommodate the limited reach of fingers or thumbs. These old mobile phones differ greatly from the touchscreen devices that many are now using. Modern Mobile Phones Are Different Everything changes with touchscreens. So, I’ve carried out a fresh study of the way people naturally hold and interact with their mobile devices. What My Data Does Not Tell You Before I get too far, I want to emphasize what the data from this study is not. Most important, there is no count of the total number of people that we encountered. Since we made our observations in public, we encountered very few tablets, so these are not part of the data set. What We Do Know One-Handed Use