Timeline Interface Trends in Web Design
Presentation of content is a big consideration for designers. In fact, design is fundamentally about content and how it works. Form follows function. Many web designers strive to conceive brand new ideas for content organization. The web is a great medium for dynamic content with a fluid backbone. This is what makes timelines so enchanting: […]
Professional Photoshop Shortcuts for Web Designers
Most designers prefer the Adobe suite because it’s popular and easy to learn with sufficient practice. The software is initially complicated but with time and patience you can develop a professional workflow. One such area of professionalism stems from understanding keyboard shortcuts. Every application uses shortcuts but Adobe’s programs are much more complicated and versatile […]
How To Design Magnetic Banner Ads for the Web
Advertising is a massive industry with a lot of money and agencies vying for attention. But the purpose of this industry is generally to drive people towards something whether it’s a product or service. Great ads will draw your attention even if you don’t have a need for the product.
But poorly-crafted ads will come off as revolting and insincere. Nobody wants to deal with the metaphorical used car salesman, and this type of advertisement can be an immediate turn-off.
For this post I’d like to examine a few design techniques for polishing beautifully-magnetic advertising banners. Although designs can vary from each website the general techniques remain the same. Take a look at the BuySellAds marketplace to see some of the most creatively and well-designed banner ads online today.
Attaining Balance in your Website’s Color Scheme
Designing for astute balance is never an easy task. Although it should be a primary objective in each designer’s mind, balance tends to appear once a composition has reached a state of equilibrium. This requires some idea generation because it’s silly to assume that balance can be achieved from a blank page.
In this post I’d like to cover a few guidelines and general tips for designing a clean color scheme. This stage may undoubtedly be one of the most complex yet significant parts of an entire website. Colors are used to convey a certain mood or attitude in the minds of visitors. Pairing the wrong colors together can be detrimental to the overall website. But with the help of color generators and some useful tips the color-picking process can become much smoother.
Introduction to Grid-Based Typography in Web Design
What do math teachers and city planners have in common aside from indispensable yet low-compensating jobs? A love for grids, of course! This is one of those special topics that seems really important because it is really important but still doesn’t get enough attention. It’s on par with balancing a checkbook and learning to properly mimic funny accents.
Thankfully grids can be useful to many career paths outside of mathematics and architecture. I want to focus on the benefits of grid structure when it comes to designing web typography. A typical layout often uses many small blocks of text which are crucial to a good user experience. This post should offer some introductory ideas for designers who want to create better websites focusing on organized typography.
Using PSD Freebies to Create Fast & Efficient Website Mockups
Building website mockups in Photoshop is a lot like using Q-tips to clean your ears. Not exactly the original purpose but it works great! However unlike the household cotton swab, Photoshop is a large graphics editing program that takes hours of practice to learn even rudimentary tasks. For web designers this process can feel like a hopeless pipe dream.
But one of the quickest ways to start learning Photoshop is by creating your own simple mockups with existing PSD elements. You’ll find yourself editing shapes and colors to fit into a layout while organizing the composition from your imagination. In this post I’d like to share ideas for using free PSD files in Photoshop to get familiar with creating website mockups.
Pixel-Perfect Design using Photoshop on a Retina Display
I recently purchased a MacBook Pro with the infamous retina screen display. Everything does look beautiful and there is a noticeable difference in comparison to non-retina icons. However I noticed a problem using Photoshop that others in the web design field have also likely noticed.
Every new document is shown at half-size while the document view claims to be 100%.
Anyone running CS5 or below should not find this to be much of a problem. But CS6 and CC have been updated to include retina-based icons and interfaces. This creates a pixel-dense display in Photoshop(and other Adobe programs) where new documents appear twice as small instead of “regular size”. Another way to put this is @1x images will appear tiny because retina Photoshop only uses @2x documents.
The Benefits & Drawbacks to CSS Resets
CSS is a well-known language used for styling a website layout and various elements on the page. The specifications have evolved throughout CSS2 and into CSS3, creating a much simpler development process. Resets are used to clear out default browser settings so that each project will be rendered with the same baseline interface.
However these resets will sometimes create problems you never thought about. Removing default properties like padding and borders may lead to adverse effects on input fields and other similar page items. In this article I want to share my own perceptions about the benefits and drawbacks of creating web projects with CSS resets.