A (not so) jilted English professor’s guide to creative web design

h2 {font-size:15px; font-weight:bold;}

a not so jilted English professor's guide to creative web designResponsive design has some definite buzz of late, and with good reason. It promises to simplify the increasingly complex task of adapting websites for the countless new devices multiplying by the minute.

By considering a few common variables like screen size, adapting a site to its visitors’ particular needs becomes a matter of some clever CSS planning and Javascript rather than the detailed design of numerous, parallel sites. For anyone whose faced the logistical minefield of multi-site coordination, responsive design is, to put it mildly, a very good thing.

As you may know, the concept itself is actually borrowed from architecture, another discipline that focuses on the relationship between people and created environments. The crossover makes sense.

According to Steven Johnson’s book Where Good Ideas Come From (2011), this kind of conceptual cross-fertilization has been responsible for numerous key breakthroughs throughout the history of thought and invention. This insight gave me an idea. Although I’ve been casually designing sites for almost as long as the internet has been around, until about six months ago most would have thought of me primarily as an English professor. A recent career shift to full time developer/designer, in combination with my background in literary studies, has given me a unique and perhaps weird perspective on the world of design.

Now I wish I could pause here to blast the cold-hearted bastards that swore I’d never set foot in a university again, because that would be so badass, but the fact is I actually left teaching on purpose and on good terms. I did it to explore the relationship between technology and culture, something that has fascinated me at least since I first sat down and played King’s Quest II in 1986. When I was asked to write this article, I got to thinking about the productive cross-fertilization between design and architecture. I wondered what — if any — concepts from literary studies might be usefully applied to web design.

After some musing, I’ve compiled a list of six possibilities. These represent only a first pass at the question, but I hope they can at least be suggestive and perhaps provocative. In literary geek terms, I’m doing a little ratiocination. On with the concepts…

1. Metaphor

This one’s almost too obvious, but last I checked metaphor is still largely the expertise of English professors. Brace yourself for one of those annoying zingers people always says about their profession: believe it or not, the web is all metaphor! Burn! (No, not really). Metaphor — a comparison using two items that appear to have no relation — is the chief (and some would say only) paradigm we use to process new technical media.

The idea of a link is a metaphor — it could have just as easily been called an IP transfer node, but that would take the average non-technical user much longer to understand. When Tim Berners-Lee was trying to conceptualize the Internet itself, he explored metaphors of mines and meshes. The Web, Windows, Tweets, Digg, Facebook, Canvas — these are all metaphors (and Reddit’s a pun).

Here’s really the main thing to take away from this one: being aware of one’s metaphors is a great route to successful design. The secret of numerous well-known websites is that they are fully aware of the metaphors they use: they pull ideas down to earth from the ether of code (interestingly, at least to me, the point of comparison in a metaphor is actually called the “ground”). Metaphors appeal to people’s visual and tactile senses, and this makes them much easier to remember, particularly because we live with increasingly visual and tactile technologies.

To make the word more palatable to the executive ear (tsk, tsk), you could introduce it as “visual coherence” or “tactile consistency.” They would eat it up like a dog’s breakfast (oops, simile).

2. Signature

When I used to teach first year composition classes, signature was the single most important concept I worked on communicating. It doesn’t just mean putting your John Hancock at the bottom of something. It refers to the unique trace of the person that peaks through the words and ideas. Closely related is the idea of voice: the vital, unique force that speaks through a particular project.

Best practices can take you a long way, but good design usually has a clear signature and a voice, and again, the best coders are the ones who are conscious of their unique style. While a cranky client may seem to relish nothing more than the thought of destroying your signature entirely, it peeks through in everything from color palate to font to layout to cross-browser solutions (and, yes, even your particular implementation of responsive design). It’s not quite the same thing as brand, because it is always implicit rather than explicit. To look for its traces think about how you’d redesign Google or Facebook.

If that’s all a little too abstract, you can always see how the buzzwords “design subtext” or “sub-theme” or “implicit scheme” or “subscaping” roll off your tongue.

3. Busting the Cycle

Okay, this one’s not strictly from an English classroom. I actually stole it from an episode of The Show with Ze Frank, but I often applied it to lessons on how to write A+ papers. The most brilliant papers are those that not only identify current ways of thinking but also take them a step further.

Although I’m still in love with the curvaceous joys of CSS3′s “border-radius” attribute, for instance, I noticed that Twitter’s new rollout actually did round corners in a scaled-back, toned down, 3px kind of way. Along these lines, very few designers have explored the possibilities for asymmetric curves in an effective way (somebody get on that!).

True creative talent resides in the ability to spot and explode a cliché — to swerve at the last moment away from the creative dead end. If you’re just copying what’s out there, then you’ve already fallen behind. The people who designed current hot sites are already working on their next phase.

There’s only one sure-fire method for spotting the clichés and busting the cycle: research. Before you groan and writhe in agony, just stop and realize that research in this case means surfing a lot of what you consider to be really fantastic websites. Steven Johnson notes that research is so effective because it leads to improved generation of what’s called the “adjacent possible” — the possibilities that lay just beyond the limits of current ways of looking at things.

I’ll term this one “predictive development” or “proactive design” or “tactical border-trashing”, just for kicks.

4. Nonce Taxonomy

What, you may be asking yourself at this point, does this guy have for all these random terms? Let me explain.

The term “nonce taxonomy” is borrowed from a woman who died way too soon, my literary-critical hero Eve Kosofsky Sedgwick. Nonce means “for the once”, and a taxonomy of course is a system of naming. So a “nonce taxonomy” is a system of concepts and terminology that’s tailor made for the project at hand, and disposed of or redeveloped as soon as it becomes cumbersome or meaningless.

Not only does this way of thinking about a project allow for a good supply of fresh ideas, it also allows you to tailor each project to the particular (and peculiar) demands of the client. A simple way of inventing a nonce taxonomy is to work for awhile and then whiteboard a list of terms, themes, ideas, recurring patterns, and code elements that seem most relevant to the project at hand. See if these lend themselves to any further patterns or terms, and regularly add and subtract from the list as you see fit. The idea here is to befriend the mobility and flexibility necessary to any creative project.

As a further note, XML and OOP languages are nonce taxonomic systems of sorts, though they’re obviously a little more rule-bound. In terms of more specific practices, nonce taxonomic design can be incorporated into everything from variable names to documentation, and certainly can be used to spice up client interactions (Jargon is sexy). You could say it provides a “soul” for the project, if you’re into that kind of thing. I’d come up with a feisty buzzword here, but I think this one’s a thing of beauty in itself. R.I.P Eve.

5. Contact Zone

This term was developed by a critic named Mary Louise Pratt in response to the idea of frontiers (as in Wild West frontiers). She claimed that frontiers are the wrong metaphor for the situation, because they only suggest that action occurs in one direction from one perspective. The fact is that even in situations of extreme power imbalances, such as that between cowboys and Indians, multiple perspectives and motives from both sides shape the outcome. By acknowledging the influence of these multiple desires, a more realistic assessment can be made of what leads to successes and failures in a given situation.

So what does this little revisionist history lesson have to do with web design? A web site is a contact zone in the sense that you have a designer and a user, and it is generally a very unbalanced interaction. Although Web 2.0 sites offer a bit of theme customization, and of course platforms for communication, they are a far cry from handing over the reins to the code and letting anybody do whatever they want. So why do some fail and other succeed?

The strength of a site like Reddit is that its creators keep its users in the loop of creation and modification. It is as unintrusive of a site as possible in terms of privacy and even layout, and thus the feel of its being a contact zone remains at the forefront. I mean, have you ever really looked at Reddit? There’s nothing there (but thousands of Redditors). The designers and users create a feedback loop that self-designs the site.

Although the term “contact zone” is pretty decent on its own, let’s throw out a few more fun design buzzwords: “permeable interface” or “generative feedback.”

6. The medium is the message

Famous techno-visionary Marshall McLuhan articulated the idea of “hot” and “cold” technologies. If a technology is “hot”, it gives you almost all the information you need, leaving little up to the imagination — think 80 inch large screen TVs or 3D movies. The colder a technology, the more it requires participation and involvement (Reddit is cold…so cold, babe).

When McLuhan said that the medium is the message, he meant that media transform the way we think and know the world. As we become so totally immersed in cold technologies on the web, they literally start to reshape our perceptions. What’s would the world be without Facebook? I don’t want to live in that world. Well, maybe. It’s heated up a little much for my tastes lately.

Before I retreat too far into the rantings of a fuddy-duddy technophobe here, let me get to why McLuhan’s observations matter. It gives us a new terminology for thinking about the impact of a website. For the most part, as the web has developed, it has turned increasingly from a hot technology to a cold technology, particularly with the surge of Web 2.0 design in recent years. Now you can customize much more of what you’re seeing, and interact with and produce content in ways that were unimaginable a short while ago. It’s not over yet. With smart phones in particular, the medium/message changes again, I think for the hotter because the interface becomes so seamless it’s hard to escape.

There will always be those who crave the opposite of the dominant “temperature”, and this is wise to keep in mind when trying to buck old trends with new web design. It’s also worth considering what the comfortable temperature range is for your clients and their clients — do they want a lot of interaction, or are they the kind who long for the good old days when people would just tell them what to buy? Are they the immersive Flash type? Crazy for the dynamic content offered by PHP and others? Or throwbacks to some good old-fashioned static HTML? As you approach design for a new medium, it may also be valuable to consider questions of how the medium itself transforms the user’s expectations and capabilities and how this affects the overarching purpose of the site.

If we need a design concept here, perhaps we could call it something like “media gauging” or “hot messaging” and “cold messaging.”

Parting Shot

All in all, the genius of responsive design is the way it imports a foreign but uncannily relevant concept into a completely new context. When you do this, old ideas spring to life in new ways. The cross-fertilization of ideas is what drives forums like TED, IFTF, and this very eZine. If you spend too much time cycling through the same buzzwords over and over, you stagnate and your work suffers — things must evolve or die. By offering these ideas up here, it’s not at all my intention to try and force unwanted suggestions on a field of already smart and motivated designers. The main aim is just to be a little provocative. If we expanded this type of cross-disciplinary exploration into Philosophy, History, Politics or Psychology — those oft-disdained liberal arts — just imagine the host of new concepts that would become available.

Article Source : http://www.webdesignerdepot.com


Seven Basic Principles to Follow when Creating a Website

The Internet is home to millions of websites dedicated to the most amazing subjects; this is why it should come as no surprise that we can find websites about mostly anything, with detailed information. If you are thinking about creating a website, then you should not be in a hurry to start your project but rather do a little bit of research first. Otherwise, you will risk not reaching your target audience or not being successful enough with your final creation. Let’s see the seven basic principles to follow when creating a website.

Definitely, the article is created mostly for the beginners and intermediary level but I strongly encourage the more specialized ones to read it and add up their contributions.

1.Pick a theme/subject/niche

Pencil Vs Camera

It might sound like the obvious thing to do but the truth is that, without a good theme or subject, you will not be able to reach a large segment of the Internet population and establish a successful online presence. Because there are so many websites dedicated to one single subject, it is definitely recommended that you will search for a niche that is unique by definition. Find something that people love and do your research, so as to make sure there is very little information about the subject present on the Internet. With a well-chosen niche for your website, success will surely come about.

2.Catch up with the terminology

Pencil Vs Camera

At first sight, it might sound simple to create a website but the truth is that there are a lot of things you need to know about the subject. Do not be quick to start making the actual website or you will end up making a lot of mistakes and losing precious time. Instead, start by gathering and understanding the terms that are usually used in the field of web design; once you know them by heart, you will know that it is safe to proceed further. For example, you need to become familiar with terms such as applet, content, CSS, DHTML, domain, font, layout and the list could go on for a really long time.

3.Tutorials exist for a reason, use them!

Pencil Vs Camera

Even if you know a thing or two about creating a website, this does not mean that you possess all the knowledge in the world and that you do not need to learn any more. On the contrary, on the Internet there are hundreds of tutorials made by some of the best specialists out there, tutorials that can teach you a lot of great things about making websites. There are tutorials recommended for both beginner and advanced website designers, so you can really find something that is suitable for you. Do not be quick to believe that you do not have any more knowledge to acquire, because there will always be something new and useful to learn.

4.Do not over-complicate your design

Pencil Vs Camera

For someone who has experience when it comes to creating websites, it does not seem that impossible to keep it simple. However, beginners and especially those who are accumulating a lot of information really fast, have the tendency to add more elements to a website than it should have. The final result can be disastrous and no one wants to visit a website without useful content; you can avoid this trap by keeping things simple and always remembering the purpose for which you are making the website. Good content can come in a simple package, keep that in mind.

5.Pay attention to the fonts that you use

Pencil Vs Camera

This is simple advice but it is actually very important, because, if you go wrong with the type of the font or its size, then you won’t have any people coming to your website and thus no traffic to guarantee your success. Make sure that the font you have chosen for the content present on the website is readable and big enough, so that your readers are not forced to squint their eyes in order to read. Also, make sure that you bold out the ideas that are the most important and use a different font for the titles, so that they stand out. Every little detail matters and this is especially valid when it comes to chosen fonts.

6.Smooth navigation is the key to success

Pencil Vs Camera

When making a website, the most important thing is that you put yourself in the shoes of your visitors. In this way, you can think about how simple or how complicated it would be for them to browse your website. While there are many elements that you need to take into consideration, it is of great importance to organize the website browsing menu in a way that smooth navigation is guaranteed. If the user has to go through a lot of web pages until he reaches the one he desired in the first place, then there is a very good chance he will lose interest and leave the website all together. A menu that guarantees easy navigation will also contribute to keeping your visitors loyal.

7.Keep on making changes or improving your website

Pencil Vs Camera

Do not believe that once you have create a website that there will be no more work involved. On the contrary, good web designers know that there are always changes that can be made in order to improve the website or adapt to the current demands of the targeted market. New things appear on a regular basis and if you do not learn how to stay abreast of the current changes, then you will risk being swallowed up by the competition.

And the conclusion…

There are many more things that could said about making a website but you need to understand that you must do a lot of preparation and research in order to come up with the best results. If you feel like there are other principles that one should follow when creating a website, feel free to use the comment form and let others know your own opinion. Sharing knowledge can help in many situations and this is definitely recommended here. So, what do you say, are you ready to start making your very first website? The answer is obvious!

Article Credit : http://www.2expertsdesign.com

A Guide on Layout Types in Web Design

A Guide on Layout Types in Web Design

One of the most variable aspects of web design is the way in which we approach width and height in terms of measurements and flexibility.

For many years, we have rotated between the benefits and pitfalls of using fixed, elastic, and liquid measurements in a quest to give optimal viewing experiences in highly varied situations, while balancing our need to control things in our web pages.

But, as Bob Dylan proclaimed a long time ago, “The times, they are a-changin’,” and with these changes come a variety of new ways for laying out your website’s pages and an even more variable landscape of methods for viewing websites.

In this article, we will examine web layout types — old, new, and the future. We will explore the subject in the context that websites are being viewed in a diverse amount of ways, such as through mobile phones, netbooks, and touchscreen personal devices like the iPad.

About Your Options

Let’s set our objectives for this exploration of layout types:

  • We shall examine the variety of options that exist
  • For each layout type, I’ll try to suggest some situations they are best used in
  • The pros and cons of a layout type compared to others

We will discuss 10 types of web layouts.

About Your OptionsWhile pixel perfection is a pipe dream, there’s more to layouts than fixed, liquid or elastic!

The main lesson to take away from these choices is to think carefully about why an option is suitable for a particular situation and how your choice will affect your audience.

Let’s dig in, starting with absolute layouts.

Absolute Layouts

One of the least commonly used methods of measurement employed in web design is absolute measurement (i.e. inches, cm, mm and picas). Absolute units and positioning is traditionally found in print media, which natively use these units of measurement.

The conversion of print to web format can be seen in word processing software such as Microsoft Word, which still uses these conventions when formatting text and sizing the dimensions of a document in order to make it appear as close as possible to printing on paper.

Absolute layouts have limited use in web designs.

Absolute LayoutsA use for absolute layouts on the web is for PDF documents where content remains static.

Of course, just because it isn’t popular doesn’t mean it doesn’t have its place on the web designer’s bevy of options.

If you are someone who utilizes printer-friendly stylesheets — yes, people do still print web pages — the absolute measurements of cm, mm, inches, and pt can help you prepare a page layout for printers more accurately.

Relative Layout

Relative positioning and layouts adjust in size depending on the size of the user’s browser viewport.

Absolute LayoutsThe area inside the red border is the browser’s viewport. You can change the size of the viewport by resizing the window. Different monitor sizes have various maximum sizes for the view port.

Typically, this type of layout relies on everything working at 100% width, whether it’s a small screen (like a netbook) or a 24-inch widescreen desktop monitor. This means that the layout will scale according to the viewer’s situation.

Absolute LayoutsVery few sites make use of 100% widths, but it does work.

Fixed Layout

Commonly regarded as one of the least flexible methods of laying out a web design, the use of pixel-based measurements has almost a digital resonance associated with it that transfers across from the print industry, in that the medium relies on fixed/static measurements.

This unit of measurement is accurate and leaves little guessing as to how a web design will appear across different web browsers and has become exceptionally popular among sites that favour control and predictability over optimizing the layout for the audiences’ particular viewing situation.

Absolute LayoutsA fixed width layout is used on Six Revisions.

We all know that problems can arise from having to scroll in all sorts of directions, and the fixed measurement of a px-based layout has this general issue in spades.

While many people seek out some sort of ideal width to ensure maximum compatibility, it’s worth mentioning that if you use a lot of elements that require fixed layout rules like non-repeating background images or borders with other non-relative elements, fixed measurement layouts can do the job well and act as the best all-around solution.

Elastic Layout

One of the most used methods of laying out a design’s content is using the relative em unit of measurement.

Commonly referred to as an elastic layout design (due to the way it flexes by growing and shrinking to meet the content’s needs), it has shown a great deal of appreciation within the web design community due to its ability to scale content, text sizes, and such.

Unlike with fixed units of measurements where absolute-unit elements like images are best suited (due to maintaining without distorting), elastic layouts work best when flexible content (such as text blocks) takes the front seat (though there are ways to have images scale elastically as well).

Absolute LayoutsPopular for its elastic nature, em measurements are recommended for font sizes.

Of all the methods listed, the elastic layout type is the most subservient to your content as it gives the content itself the deciding position as to how the layout should scale.

Making the text smaller in such a design will reduce the width or height, and enlarging the text will have the opposite effect.

This unique attribute allows the layout to resize based on the content rather than the needs of the layout.

Using an elastic solution is perfect if you want the layout to be determined by the content, but it can have issues if the text scales beyond the viewport (causing unwanted horizontal scrolling).

Scaled Layout

One of the latest methods in CSS3 allows the manipulation of the available viewport around certain device orientations (i.e. portrait and landscape).

Depending on the way in which the device is held, the design has the potential to alter its visual layout (altering the amount of space given to the content itself).

Unlike the others, this type of layout does not rely on measurement units, but rather a specific layout type. However, this notion shouldn’t be underestimated as a way of dealing with complex columns on small screens.

Absolute Layouts10 years ago, we wouldn’t have considered a screen’s orientation. How the times have changed!

Scaled layouts truly shine in the smartphone market where the display can be rotated or moved frequently (such as the iPhone, for example).

Scaled LayoutThe iPhone adjusts orientation of your websites on-the-fly.

With such limited space being available on handheld mobile devices, you cannot only maximize the way your pixels are allocated, but you can also allow people the option to choose whichever method they prefer to visualise the information.

Each person will use his or her web-enabled mobile device in a different way, and by allowing your design to relate your content in a transformative way depending on the orientation, you can maximize the usability of your content.

Liquid (or Fluid) Layout

The most relaxed method of providing a dynamically expanding or contracting design makes use of the ever-popular percentage (%) unit measurement.

This layout type has gained mass popularity because it is the ultimate way of allowing the total opposite of a fixed layout where the content will simply take whatever space is available to it.

Absolute LayoutsPercentages require careful calculation as you can’t give more than 100% without issues!

The limited guarantees you hold on the viewport being used goes beyond screen resolutions (imagine your site on a 6-inch screen versus a 100-inch screen, even just at 80% width).

Though it goes without saying that a liquid layout is useful in almost every web-based situation because it adjusts its width depending on how big or small the user’s viewport is — so it’s definitely worth looking into.

Equated Layout

The next method of laying out content we shall look at is the equated layout, which makes use of a new CSS function called calc (see W3C calc spec).

Absolute LayoutsWhen this measurement capability reaches browsers, a new level of control will exist.

While the previous layouts we’ve covered rely on specific widths or heights being provided, an equated layout allows you to mix a fixed and relative value by using a calculation like width: calc(50% - 200px).

Have you ever had a situation where you wished that you could make up the full 100% but also account for things like divs with borders and elements that have fixed widths (such as an image)? If you’re anything like me, it’s certainly something that has crossed your mind.

The calc CSS3 function, which has not been widely adopted yet (but is part of the CSS3 spec) may just be the thing you are looking for. While the function still isn’t widely supported by existing web browsers, this can be a future-forward option for building layouts with an added layer of pliancy.

Fluid-Min/Max Layout

A common problem that we have as designers is that whenever the amount of space we have becomes either too wide or too narrow (or too tall or too short), the relatively-measured and flexible content we have gets too diluted or too compressed (which is bad news).

Using minimum and maximum widths (or heights), you can set limits on how much the design can scale so that you can still have flexibility — but only to a certain extent. Rather than spanning the viewport like a liquid layout, this layout type flows only up to where it’s told (‘atta boy).

Absolute LayoutsA fluid/”jello” layout will scale only to a certain fixed width or height.

If there’s one thing that causes problems with layouts, it’s us making assumptions as to the amount of space that we will have available for our design elements.

The benefits of the CSS min-width, max-width, min-height and max-height properties are most widely noticed when you want your layout to be confined within certain dimensions (like within a fixed-width design) but don’t want to suffer the wrath of horizontal scrolling.

For example, if you wanted to have your width scale to 100% for small screens but only up to, say, 1,500px so that your layout doesn’t get too wide for larger screens, then you can use a max-width:1500px.

As this method of laying out a web page provides a safety net that browsers can rely on (based on the min and max values you supply), you can give your fixed work a bit of added flexibility.

Conditional Layout

With the rise in devices like the iPhone, a need has appeared for a way of altering web designs beyond conventional layouts to ensure that mobile device users can have an optimized experience.

The ability to serve a unique stylesheet based on the device or viewport width and height (through CSS3′s media queries) gives rise to an even more flexible and friendly way to represent your site’s content. This layout type is something I’d like to call “conditional layout.”

Conditional LayoutThe above design uses CSS3 media queries to scale the design down as required.

Of all the methods of laying out information that have appeared recently, this is by far the one with the most promise (once the browser compatibility issues are ironed out).

Most website designs rely on a single stylesheet. Using CSS3 media queries (especially with mobile and desktop experiences) can bring conditional layouts to best meet the user agent.

The downside of this is that it means you will need to develop and maintain stylesheets for particular devices — much like how you, in the past, maintained IE-specific stylesheets.

Hybrid Layout

Of course, while mentioning all of these layout types, we can’t forget to mention the most popular layout method of all — the hybrid layout pretty much stands by its name in that the design ends up using a mixture of various layout types. This includes mixing and matching various units and concepts to ensure that the design adapts to the browser’s viewport only when it needs to and still be able to retains a certain level of control over parts of a website that need more fixed structures.

While it requires you to be more thoughtful over your work, it’s possibly the smartest way to design and develop.

Hybrid LayoutMost sites don’t stick to one measurement type, they hybridise based on needs.

Most websites make use of a hybrid layout because certain measurement units are useful for certain situations. While many people still cling to the idea that there is one perfect layout method waiting to be found, I think that the hybrid will overcome situational issues by blending together the best of all worlds.

Perhaps you might end up with an absolute layout in your print stylesheet, and maybe you might have fixed widths using a liquid body with elastic content and a fluid control for the outside edges with scaled and flexible support for certain devices — the combinations are bountiful!

The Bigger Picture

Clearly, there are many options to consider when laying out your web pages, and thus it makes sense — both pragmatically and theoretically — to pay close attention to the details and scope of any design project you undertake.

Which layout type you utilize to produce your website is something that deserves as much attention as the fonts you use or the color theme you put together.

It’s also worth highlighting that there’s no perfect way to deal with every situation and therefore there’s no one type that is universally the best for all situations.

The Bigger PictureThere’s no right or wrong way to design, but careful thought can improve some situations.

Design is one of the most fundamental skills that any web professional must get to grips with. The way the Internet is being consumed is rapidly evolving, with wide disparities in both the devices we employ and the tools we take advantage of.

There’s more to contend with than good usability, accessibility, web copy, color contrast, and so forth. A good website must meet an ever increasing number of needs and thus the search for the perfect layout has become a Holy Grail quest of sorts for web designers.

While times are changing (as do situations), picking the right layout right now should be done methodically.

10 Online Free Photo Editing Websites

This world seems to be getting more expensive with every passing day. Software products and services are unfortunately no exception. At the same time, our dependence on Information Technology and the Internet is growing at a very fast pace. To minimize this dependence is not always an acceptable or wise choice. What we can however do is to support free online websites.

For anyone interested in playing with photos and images, online free photo editing websites and tools can be very useful. Keeping that in mind and to show our support for the growing free software development community, today we bring you 10 online free photo editing websites.

Enjoy the no-cost freedom and let us know in the comments if you know of other similar useful web-based tools.


Pixlr is one of the most popular advanced online image editor in the world.

Free Online Photo Editing Softwares 01 10 Online Free Photo Editing Websites


Create dazzling photo effects for free in your browser.

Free Online Photo Editing Softwares 02 10 Online Free Photo Editing Websites


PhotoFunia is free and very easy to use. Just select an effect you like from over 100 different effects, upload your photo, and PhotoFunia will handle the rest for you.

Free Online Photo Editing Softwares 03 10 Online Free Photo Editing Websites


A free online photo editor featuring fun free photo effects, photo stickers and one click effects for your digital photos.

Free Online Photo Editing Softwares 04 10 Online Free Photo Editing Websites


Phixr is a free online photo editor – a complete imaging solution that works within your web browser.

Free Online Photo Editing Softwares 05 10 Online Free Photo Editing Websites


Picnik makes your photos fabulous with easy to use yet powerful editing tools. Tweak to your heart’s content, then get creative with oodles of effects, fonts, shapes, and frames. 

Free Online Photo Editing Softwares 06 10 Online Free Photo Editing Websites

Pixi Snap

Turn your lifeless picture to awesome photo mosaics or cool Polaroid and make them your desktop wallpaper or Myspace background.

Free Online Photo Editing Softwares 07 10 Online Free Photo Editing Websites


Lots of one-click options to edit your digital photos instantly.

Free Online Photo Editing Softwares 08 10 Online Free Photo Editing Websites

Hollywood Makeover

Try on the newest celebrity hairstyles from short cuts and bangs to long party styles and updos, plus find out how to get the looks yourself!

Free Online Photo Editing Softwares 09 10 Online Free Photo Editing Websites


PicArtia helps you to create your photo mosaic online for free. It is popular for being fast, easy and free!

Free Online Photo Editing Softwares 10 10 Online Free Photo Editing Websites

Amazing 3D-like Animated Photos

“What we describe as animated photography is not animation at all. All that happens is that a long string of snap-shot photographs… are passed at rapid speed before the eye.” – F. A. Talbot “Moving Pictures: How They are Made and Worked”, 1912.

Even if we tend to perceive the movement, it is only an illusion, as the animated photos don’t record the moving object, but different motionless positions of the object, that are later combined using different kinds of sometimes sophisticated techniques to create the animated photography that amazes us so much. Another element of amazement is the 3D-like effect that occasionally makes it more realistic than we could imagine it is possible.

Ok, so there’s a trend lately in photography, maybe you’ve seen something while surfing the internet in one of those restless sleepless nights. It consists of creating 3D-like photos that have an animated element. The effect is pretty amazing and gives the actual impression of dimension and depth, as if the person or object captured in the photo is actually in front of your eyes, at the distance of just a touch.

In the showcase for today we’ve gathered amazing 3D-like animated photos for your enjoyment and inspiration. Take a look and pick your favourite one!

You’ve probably seen hundreds of times those animated avatars on the Internet, but what I suggest you to look through in this collection will change your attitude towards the animated gif…

The New York photographer Jamie Beck, together with the web designer Kevin Burg, have created a series of animated pictures that are a real art on the verge of photography and video. Jamie calls this photos «cinemagraphs», but this is not photography, and still not cinematography. In these photographs Kevin has used some new technology. So here, take your time to contemplate and admire these wonderful pieces of new art. Enjoy!

Images Source:

Behance & Systemsn & designmodo.com