Web Design

Popular Code-Free Design Tools for Designers and Developers

May 30, 2014 by Guest Blogger

The standard way of building websites is by using codes. It still applies today but with advancements in software development, there are now the so-called code-free web design tools that designers and developers can use.

By code-free, it simply means that designers even without the help of developers can easily create attractive websites without having to bother too much with codes and getting them right. There are advantages and disadvantages to using this latest software but it won’t hurt if you try them.

Muse

Adobe’s Muse is a great tool that easily creates websites. On the other hand, the experts have observed that its automatically generated code contains lots of “div” tags. As such, it can be a challenge to update the code when needed. [Read more…] about Popular Code-Free Design Tools for Designers and Developers

Capture and get the message across with these web tools

September 29, 2012 by Sophia Lucero

Have you ever reached the uncomfortable, frustrating situation where you and your designer just can’t seem to see eye to eye? A lot of time can be wasted when you have this vision of how you want your site to look but words can’t adequately express what you ultimately mean. Even though I can’t stress enough to trust, or at least understand, a designer’s choices when he or she presents a proposal to you, it can also help to be a little more proactive on your end in articulating your needs and preferences. So here are a few web apps and tools both you and your designer can use in capturing ideas, styles, and virtual swatches for building that ideal website.

Pick a color scheme

Picking just the right shade of green might be daunting, so it’s a good idea to get exposed to the color combinations that might be more suitable to your liking. Browsing through the patterns, photos, and interfaces on Colourlovers that are inspired by the different color palettes can also help you brainstorm the possibilities.

Choose a font

Dozens of font sites abound, even providers of web fonts specifically, but I think it’s best to start browsing on the likes of TypeKit. On its sidebar you’ve got helpful controls that let you filter typefaces that will fit particular needs and styles. You can check wordmark.it, a web-based interface that lets you browse through your own locally-installed fonts.

Clip anything

Springpad website

There’s an abundance of bookmarking tools that let you save any type of content from websites that may strike your fancy, and I’m not just talking about images the way Pinterest does. You’ve got the heavyweights like Evernote and Springpad, as well as Clipboard, Zootool, and Gimme Bar. Most of these even have mobile apps so the curation doesn’t stop on the desktop.

Responsive Web, One Web, it’s the Web

August 30, 2012 by Sophia Lucero

Responsive Web Design, like the word “HTML5”, has entered buzzword territory even beyond the web development scene. The advantage, of course, is awareness and appreciation: more people want to know what works best in getting their message out there, not only for the desktop web browser, but also in mobile devices such as tablets, cellphones, and other gadgets that can access the world wide web.

But the disadvantage is hype: people jumping on the bandwagon just because it’s popular, just because they heard from someone who heard from another one that it’s the in thing right now, or at least it’s what they just have to do, without actually understanding what it means.

One myth is that Responsive Web Design consists merely of refitting your current site layout for different window widths. It may be one of the definitive technical features of the term, but RWD speaks of a broader philosophy, one that’s overlooked when it’s mentioned in passing by people who are not in the business of putting it to practice.

From Ethan Marcotte’s A List Apart article, in which he coins the term:

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach.

But that kind of design thinking doesn’t need to be our default. Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”

So RWD is also about becoming aware of context: do your customers access your site on a device with less-than-ideal internet browsing speeds or a cramped screen that prohibit navigating through large chunks of information and imagery? Would they be looking for the same information on your website on a device they whip out when they’re on the road versus when plunk down in front of a notebook or a desktop computer, or should you not presume this for them? Becoming aware of Responsive Web Design—hopefully mobile web design in general—should encourage you to ask these questions and plan accordingly.

But this frame of mind is just the beginning, as RWD opens up to the conversation about the One Web, the idea where all content must be accessible to the user regardless of the device or browser capabilities. That it’s okay to optimize and emphasize what you’re serving up on a smaller, less powerful screen, as long as they have a way of accessing the rest.

This, in turn, represents what the Web is all about (particularly relevant in the native mobile app vs. mobile web debate right now): it’s not about having a Blackberry or an iPhone, or running Linux or Windows. You shouldn’t need to have to download an app to access content, which is often limited at that.

But what does this all mean for me?

The next time you decide on how you’re going to build your website, consider your choices beyond the metrics of profit and popularity. Understand what it actually means to build responsively, openly, and on the Web. Put yourself in your users’ shoes and paying attention to the content you create.

Getting a sense of good typography with these web and iPhone games

May 17, 2012 by Sophia Lucero

Typography is quite the intimidating universe to get into, but even if you’re not a designer it’s worth understanding even just a fraction of its principles. Your end game, after all, is to create a genuine connection with your audience, and at the heart of your campaign, be it a website, banner, or book, is your message. One that has to be presented in the clearest, most effective way possible.

I first recommend dipping your toes into these resources:

Depending on your interest and goals you probably won’t need to devour every word and concept in there but it’s great to be exposed to possibilities and limitations of the medium. Ideally it would be great for you to understand why blank space (whitespace) is a good thing, when large or small type is appropriate, or why you shouldn’t use the likes of Comic Sans and Papyrus.

But it’s not so easy figuring those things out by simply absorbing material, so some exercises are also worth checking out. Here are some games, both web-based and iOS-based, that will test your typographic sensibilities:

Shoot the Serif

One of the first lessons you’ll learn in typography is figuring out the difference between serif and sans-serif fonts, and more importantly, what qualities each one have. Shoot the Serif, as the name implies, is a shooting game that challenges you to weed out as many serif fonts as possible in a given time.

Kern Type

Even with advanced design tools and typefaces, kerning—the proper spacing between glyphs—should not be overlooked. Kern Type lets you arrange letters to achieve their optimum spacing and appearance. See which typefaces are in use and improve your spatial recognition in this iPad-friendly web app.

Shape Type

From the same folks behind Kern Type, Shape Type lets you edit various letterforms until you arrive at their correct shape. This is pretty advanced stuff for type newbies, but again it’s a great exercise in concepts such as proportion and give you a better sense of how fonts are designed.

Type Connection

Type Connection helps you learn how to pair typefaces in a “dating game” fashion, giving each font family a persona based on the look and feel they exude. Pick a matching strategy, a second font, and see if their “date” prove successful. At the end you’ll get an explanation why or why not the pair works.

Want more?

If you can’t get enough of the typographic goodness, see also The Font Game for iPhone & iPod touch, Typography* Star, and The Rather Difficult Font Game.

Redesign often!

April 25, 2012 by Sophia Lucero

How often should you redesign your website? Probably not as often as you’d like. There are lots of constraints to consider, after all, since time, energy, and money are all precious commodities not everyone is willing to part with on a frequent basis. A redesign seems to be a whole new project on its own, and an opportunity to do a spring cleaning of sorts on one’s website.

But maybe the question shouldn’t be about a redesign that is defined by a complete overhaul, where everything is thrown out and a large number of resources are required each time.

I think the hesitation or the lack of shift in how redesigns can be perceived comes from the general hesitation in the way websites are used. It’s still something technical that requires a limited class of people with a certain expertise.

Still, it’s worth looking at the process of updating a website differently. Try breaking down the activity into smaller, less intimidating chunks. Worry less about having to put the site in maintenance mode and see how feasible it is to tweak in the public eye, where instant feedback is easier to come by than ever and a good way to build a relationship with the audience. The good stuff stays, the bad stuff goes. Think of it as an continuing evolution rather than a halt-then-redo.

This philosophy keeps you attuned to every aspect of the site, and not only when it’s convenient. It helps you look beyond the visual aspect and avoid jumping on the bandwagon with every new trend that comes out. This way you get a chance to really examine whether an idea is effective when it ships.

Of course, for a site to withstand frequent edits it also requires a sturdy enough foundation, from underlying HTML and CSS for the layout to the publishing platform for the features. If your site’s somehow lacking in that department right now, it may be best to go with something solid to build on first.

A rationale for current design trends: an eye for detail, quality, and good taste

March 21, 2012 by Sophia Lucero

In the recent Smashing Magazine feature, Symptoms Of An Epidemic: Web Design Trends, Mr. Brunborg lists the popular design techniques and elements that has hit the community these past few years as the replacement the glossy, glassy gradients of the “Web 2.0 look”. It’s realism and skeumorphism meets textured and traditional. Get your bingo cards ready and check these bad boys off:

Stitching
Zigzag borders
Forked ribbons
Textures
Letterpress
19th century illustration
Muted tones
Justified or centered typography
Skeumorphic features

Taking pride in good design

Buck Turgidson Cocktail Recipe Cards by Alex Rinker — Vintage type treatments on modern products (by Alex Rinker)

I think the perspective missing in that article is that there’s a large sense of pride in creating graphical elements that imitate real life, since those things stir something in casual, non-designy people the same way they like other forms of eyecandy, or candy in general. There’s also a certain rush, a unique treat in the experience of gazing upon and using such interfaces as you are transported to a slightly different era, yet at the same time enjoy all the affordances that current technology has achieved. It’s like the appeal of Steampunk, which is an amusing marriage between the aesthetics found during the steam engine era combined with the bells and whistles of the modern world.

It may be easy to create the amateurish version of these elements these days, but the truly dedicated designer will spend hours on end perfecting every pixel. If it’s a rushed, half-assed job, it will reflect on the design, and will tell everyone you were just trying to jump on the bandwagon the same way you wanted a “Web 2.0” site, without even caring to figure out what that meant. If it’s a carefully crafted design, the quality will shine through.

Utmost attention to detail in icon design (by Román Jusdado)

I could even dare say that this trend is an on-going challenge among designers. An unspoken contest where one is able to say “I can pull that off” using these familiar objects as the common ground. Of course a more worthy challenge would be to use every form of inspiration in the universe and not be restricted to these elements, but that’s another context.

On a less cynical or narcissistic note, I like to think that designers, especially those for the web, consider themselves artisans and craftsmen that are very particular if not attached to their creations. When they use these current design trends, they tend to evoke those same qualities: authentic, vintage, nostalgic, imperfect, unrushed, simple, imperfectly polished, organic.

What does this mean for you?

Are you succumbing to the trends just because it's in, or because you believe it's a good fit for your brand? Hipster Branding is a blog that mocks the current "hipster" aesthetic craze by redesigning popular logos into that look.

What does this mean for non-designers, clients, and the like? It means this list of trends is getting to a point where you have to ask: where do you draw the line between being “hip” by adapting such an aesthetic, and being a “fashion victim” by slapping on too many of these styles at a time?

The other, more important question of course: do these design elements fit the message that your company, product, or service is trying to promote? Or are you just blindly following the bandwagon because you feel like it, or your designer feels like it?

How To Build An Effective Content Section For Your Website

October 31, 2011 by Guest Blogger

The heart of any decent website is the content that it produces and while great content will attract users that content must be displayed in a manner that allows users to enjoy and ultimately absorb it.

By properly formatting the content area of your web property you can build a website that users find enjoyable to browse on a regular basis.

Here are several tips that will help your content area stand out from the rest of your websites design, placing the focus on the most important part of your website, the content.

1. Content Area Should Dominate The Website

The content area on your website should be larger than the other combined areas of the site. For example if you feature a left sidebar that is 200px and a right sidebar that is 250px you have already capitalized on 450px of space, at which point your content area should be larger than 450px. [Read more…] about How To Build An Effective Content Section For Your Website

How Color Meanings Can Affect Your Blog

September 27, 2010 by Susan Gunelius

Last week, I published a post about applying color marketing research to blog design strategy where I provided a number of statistics that demonstrate how color can help your blog’s success. The next question bloggers are likely to have once they realize the significant impact adding color to a blog can make is what colors they should use on their blogs.

In a recent study published on Colourlovers.com, it was reported that the online world is dominated by the color blue followed closely by red. Should you also use blue and red in your blog’s design? Keep reading to learn what color psychology tells us that different colors mean.

Blue
Cool blues create perceptions of trust, dependability, fiscal responsibility and security. Blue elicits calm and peaceful feelings and is liked by a wide audience. In fact, it’s arguably one of the most popular colors. It’s not surprising so many brands use blue in their logos!

Red
Red has been shown to cause a physical response in people, including increases in heart rate. Therefore, red is perceived as being aggressive, energetic, provocative and attention-grabbing. It’s not surprising that red is used on stop signs. It is the go-to color when a reaction is desired (which could be positive or negative).

Green
As you might expect from its connection to nature, green creates a perception of health, freshness and serenity. On the flip side, darker greens are often connotations of money and wealth.

Orange
Orange creates perceptions of fun and excitement.

Yellow
It’s fairly universal that yellow is representative of light and the sun. People relate yellow to warmth and positive feelings. Studies show that people see bright yellow before any other color. Ever wonder why yellow is used for road signs that warn you about dangerous curves and road conditions? Yellow stands out!

Purple
Purple is associated with creativity, royalty, sophistication, and spirituality.

Pink
Pink is typically associated with femininity. Bright pinks create perceptions of energy, fun and youthfulness, while paler pinks are viewed as being more romantic.

Brown
If you want a color that creates perceptions of stability and durability, then brown is your go-to color. Just make sure the brown you use doesn’t fall into the trap of appearing dirty.

Black
Black elicits perceptions of power. It’s bold and sophisticated and is often linked to high-end, expensive, classy brands and products.

White
White is the go-to color to elicit thoughts of simplicity, cleanliness and purity. Studies have shown that people’s eyes are strongly drawn to white.

Keep in mind as you choose colors for your blog’s design that colors can have different meanings in different parts of the world. For example, black is considered a color of mourning in the United States, but in Japan white is the color of mourning. In Brazil, the color of mourning is purple. If your blog is targeted at an audience in different areas of the world, take a few minutes to research color meanings in those countries to ensure your choices are appropriate.

Image: stock.xchng

Skip links