Answer My Query

There are so many techniques when it comes to web design, it’s hard to get a full grasp on all of them. Minimalism is one of the few which stand out from the crowd in a seemingly ubiquitous flow. The trend follows the concept of keeping things simple and easy to work with.

Removing clutter from pages helps users focus their attention on the things that really matter. Page content, images, contact information, and the presentation hierarchy that removes gradients and web 2.0 distractions. Check out a few of the ideas below in regards to minimalistic designs and see how you can incorporate these into your own projects.

How Does Minimalism Work?

The idea of minimalism in designs is not a new one. In fact, it’s been present in the art community for centuries. With the move into digital design we find things to be a bit different as the objects we’re designing are constantly changing.

Minimalism works by playing on your visitors keen attention, or rather lack thereof. Most visitors who visit your blog or website will not spend more than a few seconds on the page, maybe a few minutes if you’re lucky. This isn’t because they truly don’t care or hold apathetic viewpoints towards your content. Rather in our world of fast-paced action users know how easy it is to jump from one website to the next in almost an instant.

Playing on these pieces to your users attention span by placing content is easy to read layouts is the basis behind which minimalistic designs are built. You will frequently see much more typography and white space with fewer images and buttons as distractions.

Although there isn’t any guidebook for running minimalistic designs there are plenty of guidelines to follow. Additional white space is one such idea, along with the removal of unnecessary page elements.

Less is More – Adding Space for Readability

Designs where “less is more” often don’t turn out too good. Most commonly you’ll see designs like this running blank white pages with black text and a logo – not exactly the most exciting website around.

When grasping the concept of minimalism you have to understand how white space ties into your content. All that additional padding and space where there isn’t anything to look at – that’s called white space. It gives the reader’s eyes a break from so much content and helps them skim through text a lot easier.

A good way to envision this is to consider a common textbook, maybe one from your favorite History course in high school. Generally these will contain large blocks of text with images and diagrams placed every so often. These are good examples of layouts with almost no white space (and they’re pretty hard to read, go figure).

One of my favorite blogs is written by Fred Wilson at http://www.avc.com/. His design is one such example of utilizing white space to enhance the appearance of text on a page. Although I wouldn’t label his blog theme as entirely minimalistic it does hold attributes of proper padding and white space, all key properties of minimalistic designs.

Elements of Simplistic Typography

Digital text is truly the most important aspect of any website. Unless you’re running a video or photo-viewing application the reason you have visitors to your page is to read content, so that content had better be presentable.

From a minimalists view of things content should be the main focus. This means all of these flashy newsletter signup boxes and live Twitter feeds are just distractions from what visitors really want. These elements aren’t totally bad or should be thrown out the window. They just don’t hold a place in true designs based on the concepts minimalism.

The two main elements when it comes to typography are headers and paragraph text. They both require plenty of white spacing as mentioned above, but they also need to stand out to your readers. Adding margins to your headers will visually separate them from the rest of your text. Contextually you may consider adding different properties to your headers such as italics, underlines, resizing or recoloring, too.

Paragraphs will generally stand out on their own as large blocks of text. You can make them easier to read by increasing font size and adding more space between lines (known as line-height). Keep your font colors much darker than your background but not so dark they contain deep contrast and hurt your eyes when skimming. Mess around with color choices to find the perfect in-between before moving on.

Keep your Layouts Unique

The truly exciting principle which keeps minimalism alive and thriving is how unique layouts can be. When all you (as the designer) have to worry about is context you are free to move things around at will. No longer are you stuck to a rut of 2 or 3 column layouts. You can break out of the mundane and really show off some creativity!

This doesn’t imply you can just throw elements together and come out with a beautiful design; far from it. We can consider as an example the portfolio of Berit Somme, an illustrator based out of Norway. His design boasts a powerful header and footer area with central content containing his digital works on display. All of the basic webpage elements are still there in one form or another, but it’s how they are applied in a creative way that truly makes the design.

When looking back on these styles there are only a few things to consider. Ensuring your goals have been met is a big one. Page content should also be easy to read and easy to skim through. There are plenty of showcases for minimalism to be found all around the web. These can be very helpful when looking for inspiration to get started.

It’s a truly diverse world out there as the field of web design advances into the future. Consider the ideals of a minimalistic viewpoint when starting your next web design, even if you don’t plan to go all-out. Many of the concepts held within minimalism can be applied to all website projects to relieve clutter and clarify the purpose of your design.

The hot topic in design news is all about usability. Developers must concern themselves with properly functioning interfaces and applications via the web. However as designers we must tackle projects from a different angle, trying to design beautiful webpages which also run smoothly from a user’s standpoint.

It’s not to say these ideas haven’t been around over the past few years. It just so happens that recently the web has undergone a paradigm shift and we’re entering a powerful new information era.

This adds the values of user experience into the creative process and as designers we must keep up with the trends. I’ll be going over a few tips for how to do this and show how simple it is to integrate usability into your design.

Begin by Envisioning your Website Wireframe

This is the first step during the creative process and also the most energy-consuming. Creating a beautiful design out of thought alone can seem like a difficult task. However a shift in your perception of design may help move the creative process forward.

Sketching out a basic wireframe is the easiest way to tackle any design project. Initially starting in software such as Adobe Photoshop or Fireworks limits much of what you can or can’t do. Old fashioned pen & paper have never limited anything. The only limits you face are the edges of your creative mind!

Considering usability, you may start out by listing elements you want to see on the page once it loads (above the fold). These could include a main navigation menu, search bar, blog categories, contact information… truthfully any number of items. Keep the list small and scaled since there’s only so much room.

From here it’s much simpler to draft up a webpage mockup since you know what you’re aiming for. You may also consider showing your mockup draft(s) to others and getting a few opinions on the design. Gaining an outside perspective is always helpful as it is your goal to create fluid, accessible layouts for your visitors.

Implement a Plan for Mobile Design

This idea would have seemed a bit far-fetched just a few years ago but we’re in a booming era for mobile development. Between the iPhone, Blackberry, and now Android powered devices it seems these days everybody is running a smartphone in their pocket.

Designers have already begun using this to their advantage by planning ahead. Mobile stylesheets are becoming the norm for most popular web applications. And with a bit of simple JavaScript you can easily catch what browser your visitors are using and apply any style accordingly.

A really useful tool for mobile design is Mobify Studio. They develop JS libraries which check to see if your visitors are running a mobile browser and redirect the stylesheet accordingly. They offer paid plans containing analytics and other powerful features, but for the basic user you can sign up free and still benefit from everything their scripts offer.

Structure your Typography Carefully

Typography is another whole can of worms included in the subset of design. You don’t need to master creating your own font or how to display individual custom letters in digital text. However as a designer holding a basic understanding of typography with usability tactics can work wonders.

A poisonous myth passed around the design community is how great smaller font sizes are. Arial set to 11px may look clean and professional but it’s awful when it comes to user experience. Setting your paragraphs to a more-than-readable size is highly recommended, especially with mobile users growing.

Be sure to add plenty of breathing room between your page content as well. Nobody wants to try and read 15 paragraphs of tightly bunched-up text split by a few headings. The CSS line-height property is a very useful yet under-utilized setting. This property sets how much space is placed between each line in a paragraph or in headings and other typographic elements.

When you get into developing page styles with CSS the workload is much simpler. By this I mean it’s much simpler to change a numerical value in your CSS compared to editing an entire PSD document. Try messing around with different values of line-height to see which works best for your design.

Headings must be Brash, Bold, and Beautiful

Don’t let your page headers fall to pieces within your design. Most visitors will come to your blog or website just to skim content, so your headings may be the only elements they read.

A distinguishable change could be in font color or differing typography (from sans-serif or serif, and vice-versa). Heading elements are set by default to appear much larger and bolder than text content. This helps readers get through content easier and pinpoint defined markers in your writing.

You could consider removing the bold weight and mess around with other properties. Italics, underlines, borders, and letter spacing are all fun to play with and see how they fit. Although depending on your design a straight underline could be easily confused with a hyperlink, so use creative judgement here.

Testing, testing, testing!

The area where many designers fail to show improvement is with the final stage in the creative process. Once you’ve completed a design and you feel comfortable with the outcome it’s easy to pass it along and move on.

This is where attention to details may fall apart as you could miss crucial errors in design judgement. Always test your website in as many different environments as possible. Modern operating systems can run numerous browsers. And with tools like IETester it’s never been easier to run tests for compatibility across the board.

Internet users are growing more impatient and spending less time visiting individual pages. Any traffic you do reel in should feel warm, welcome, and at home with no confusion or frustration interacting with your design.

Usability is still a new term for our growing web and it’ll surely be a hot topic in design conferences around the world. These tips are a great starting point but shouldn’t mark the end of your studies. Keep an open eye for new articles and advancements in user interfaces as these are the true elements of web design.

jQuery is the premier library for coding JavaScript page effects. Most popular content management packages run jQuery for both admin and frontend design effects. As a web developer jQuery can be a fun library to spend some time learning and offers tremendous design potential.

It seems there are so many references and guides out there it’s easy to get lost. Below we’ve compiled 19 unique jQuery tutorials to help develop your skills as a frontend developer.

Form validation from scratch

Develop a simple and powerful jQuery script for common HTML form validation.

Incredible jQuery Login Form

Learn how to code a structural jQuery login form with sliding animation. Hide your form out of a visitors view until clicked.

Creating a Digg Style Signup Form

Digg has been an innovator for web apps for years. Learn how to develop a dynamic registration form similar to their signup page.

Color jQuery & CSS3 Sliders

Here you are taught about using jQuery and the new transformation features brought by CSS3 to create a dynamic slider effect.

Working with Events – Part 1

Part 1 of a detailed series teaching about events in jQuery. Here you’ll learn the bare-bones of the jQuery library and how to use events to construct your own functions.

Ajax-based Form Submission

Here you’ll learn how to submit a web form and display the submission result with some fancy fadeOut or slideUp effects. You’ll utilize both jQuery effects and Ajax for form submission.

jQuery Fade-in Spoiler

Practice designing a spoiler system with a fade-in effect using jQuery. This can be helpful in hiding tips or potential plot spoilers in website comments.

Dynamic Page Content Replacement

Design a unique content replacement script with a fade effect. You can run small tabs or links on your page to switch betweet content settings.

Simplify Ajax development with jQuery

Here you’ll learn about the jQuery syntax, discover its features and functions, perform some common Ajax tasks, and find out how to extend jQuery with plug-ins.

Simple Toggle with CSS & jQuery

jQuery can be difficult when first learning about open and close states. This tutorial guides you through the basics of mastering the jQuery toggle states.

Create a unique Gallery with z-index

jQuery development can be combined with the CSS property z-index to create a unique photo gallery effect.

Design Skype-style buttons with jQuery

As a very powerful JS library jQuery can do almost anything these days. Here you’ll create some unique Skype buttons with only some basic jQuery and CSS.

Apple-style Slideshow Gallery

Using basic HTML/CSS and jQuery development we’ll create a simple Apple gallery slideshow effect. Beautiful to fit into any webpage.

From PHP & XML into jQuery

Getting back into PHP backend programming here you’ll learn how to connect data retrieved through the backend and place it into jQuery and Ajax effects.

Manipulating the DOM(code snippits)

Working with jQuery to manipulate the Document Object Model is a powerful skill to understand. Here there’s 10 fantastic code snippits in working with jQuery and the DOM.

Semantic Blockquotes with jQuery

In this tutorial we identify text needed as a quote and using the DOM insert it into any area content. This helps avoid duplicate content and works well with mobile browsers.

jQuery Basics with Google Maps

In this tutorial you’re guided through how to get started using jQuery inside the Google Maps environment. You can create amazing mashups and creative designs with a simple connecting to the Google Maps API.

Create a Live Updating List

Creating a dynamic list in jQuery is a simple effect which goes a long way for user interface. Here you’ll learn the basics of creating a dynamic jQuery powered list.

Flickr CSS Menu Design

Here you’ll learn a simple step-by-step way to implement an Flickr Horizontal Menu Demo in jQuery and CSS.

As web designers, it is our job to grow with the trends of the Internet. As new technology emerges, it’s our position to jump on board and see where it can take us. This includes trends all over the web, typography being a major player.

Many designers don’t consider type as a field of interest or focus. Ironically, typography is possibly one of the most important parts of our dynamic web. It helps deliver a website’s content to users from all over the world and it truly is an art to study.

I’ll be getting into a few concepts about typography for the modern web. Things haven’t changed too much since the previous years of web design, however many new techniques are being utilized and shared amongst the design community.

Styling Your Main Document’s Text Elements

Consider from a user experience perspective what your main elements of text may be. Of course you’ll need paragraphs and a few headings (h1-h3 mostly). You’d also want to style your links in a certain way, and maybe even include other elements such as blockquote properties.

All of these tags are useful when structuring your site’s content. These can all be styled through CSS properties in any web document with a large amount of precision. The main priority is to consider what each element represents and piece together a puzzle of how you want them to be displayed to your visitors.

Paragraphs are a good place to start as these will contain the bulk of your content. How do you think it’d be easiest for your readers to follow along? Many corporate and business websites use smaller font in paragraphs for a sophisticated look, but in the modern web things have changed.

Most paragraphs seen in blogs or social media sites today will use much larger font for paragraphs upwards of 16px-18px. This makes sense when you take into account the popularity of mobile users reading content on much smaller screens.

Separate Core Content from Headlines

Headings are also an interesting area to consider. You want them to stand out from your main text and be as scannable as possible. By this I mean your visitors should be able to quickly scroll down your page and check out each of your headings along the way with ease.

The best techniques in separating headings is styling each tier differently. Test out all sorts of colors and styles on your headings. Changing font type is another popular technique, for example styling paragraphs with Arial and larger headings with italicized Georgia.

When dealing with h1/h2/h3 elements you can generally get more creative than with simple paragraphs of text. This means adding text shadows, borders or unique underlines, or even messing around with font variants of big/small caps.

Creating a Stand-Out Hyperlink Design

Links are an essential part of any website. Unless your website home page is the only one on your entire site and goes nowhere else, you’re bound to have some hyperlinks somewhere.

What you have to consider here is not only how you want to style default links within your paragraphs or similar text, but how you want to style similar links used for navigation (header, sidebar, footer). Generally links in your paragraphs should stand out on their own. Funky colors and unique hover effects can take care of this nicely.

When specifying links elsewhere in your document you’ll want to remind yourself of the user experience perspective. A good example is with footer links as they don’t generally concern the masses of visitors to your site. They should be simple to read and out of the way, yet easy enough to scan and browse. Contrary to unique link styles in your paragraphs, outside areas work better with simple hover effects – an underline or light color change is perfect.

Utilizing Proper Line Height

Line height is a property many don’t consider when working to style typography. It’s a very important property set in your CSS which determines how much space in the grid is given between lines of text.

When styling elements of type try playing around with more/less white space. This can drastically change an entire design theme, especially within paragraphs. Adding height between lines of text makes scanning text much simpler. From a user’s point of view this is exactly what they’re looking for.

It also makes larger chunks of text seem more manageable as there’s room to breathe between each line.

Headings and other areas of lists or code can benefit from having their line height adjusted as well. Leaving room to breathe beneath and above these elements helps them stand out as foreground from your text. These elements become instantly noticeable as a user is reading through your page, making your content even simpler to browse at a glance.

Consider your Fonts for Mobile Devices

Sizing typography for the web can be tricky. You have to consider browsers such as IE6/7 and mobile devices displaying your text in unnatural ways. The simplest way to handle this is scaling your font sizes equally.

There’s a simple trick in fixing up your font sizes by setting your body element to have a 62.5% font-size. This brings down most fonts to unreadable sizes, but sets you up for a simple em sizing structure.

ems are units used in sizing font for the web, similar to pixels. They’re a great measurement unit to use as they allow for text to grow and expand naturally if your visitors resize the page. This is different from px as they aren’t resizable, and % values can be all over the place in different rendering engines.

By setting your body font-size property to 62.5% you essentially reset the fonts on your page to a scale of 10px. This makes working with ems easier as your font sizes will equate to 1/10th of the original. For example a paragraph with 12px font would be equally set to 1.2em. These also work great with line-height properties on text elements, too, as dynamic resizing is much more functional for those who need it.

Typography has many topics to consider when discussing the modern web. There are countless resources both online and in physical print dealing with these concepts. As a web designer typography should be a core focus during the design process.

If you’re also looking for inspiration there are many free font collections shared around. These can be fun to mess around with and integrate into your logos or concept artwork.

Consider browsing through CSS galleries or inspirational designs for further perspective into the world of typography. It’s a skill that doesn’t take too long to understand yet holds immense power in the hands of web designers.