Concept Dezain

Recently Released Tools to Help Your Site

Ceba Matteo — Sat, 04 May 2013 23:12:50 +0000

When it comes to web development or designing a well-coded and aesthetic website, it can at times become an arduous task, for even skilled web developers.

Web designers and developers continually strive in creating functionally useful and free web applications which may help them to achieve desired results within a given scope of time as well as making the user experience simplified. Fortunately, there are an unlimited amount of free tools which are available and can enable one to gear up their efforts and work within a more efficient and productive way, but when it comes to finding such tools and applications it can be quite a laborious task as well as time consuming.

consuming. Therefore we have collected 5 of the most recently released tools and web applications for developers which will aid users within their web related tasks and keep their websites a step ahead of the competition. We hope you will find a few of these Tools and Applications below handy for your development needs.

1. HTML-CSS-JS Playground : Editr

Editr is a simple and self-hosted app (that doesn’t use any server-side code) for creating a similar interface for editing/improving and sharing any HTML-CSS-JS projects. Sharing can be done by simply embedding an instance on it (this is done with jQuery) to any web page. The app uses the beautiful Ace Editor which can be themed with ease and offers a great experience while editing code.

2. Web Colour Data : Analyze Colors Used on Websites

Web Colour Data is a web service to easily find out “which colors are used on a web page”. It works by simply submitting a URL and the service auto-extracts + analyzes the colors in it. The color palette is presented with a breakdown in percentages and hue distribution. Also, it is a good source of color inspiration as palettes used in many popular websites are displayed as well.

3. bluePen Editor : Web Based CSS Editor

bluePen Editor is a PHP-powered CSS editor that can be installed to any static or dynamic website and makes live CSS editing possible. Once triggered (with a bookmarklet), it opens the editor widget and makes all HTML elements hoverable so that blupePen can locate the CSS rules of them (like Chrome Dev Tools). It has features like color-picker, file manager, ruler, color comparison and more.

4. Pinry : Open Source Web App for Pinterest Like Websites

Pinry, an open source web application, eases building Pinterest-like (dynamic-column-grid-layout) websites. It allows users to register to the app and pin, tag and share media (images, videos and webpages) quickly. And, a bookmarklet exists for saving the content without leaving the pages being browsed. The application is built with Python (Django) and it is a good starting for creating a community around pinning contents or a bookmarking site for personal use.

5. Dabblet

Dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won’t have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others.
It currently only supports modern versions of Chrome, Safari and Firefox. All posted code belongs to the poster and no license is enforced. Dabblet itself is open source software and is distributed under a NPOSL-3.0 license.

A Craft of Consequences: Reader, Writer and Emotional Design

Claudia Somerfield — Thu, 11 Apr 2013 12:33:55 +0000

It is a usual practice amongst many a book readers that even before reading the very first page of a book, they start analyzing it in a myriad of ways without even noticing.

The paper stash, the width of the binding, the fragrance, the color of the type and even the touch of the cover; the entire character of the book gets dissected by the hand in a few minutes of seeing the book for the first time. In this brief second, there is a discourse between the reader and the object. This exchange is delicate and complex, but for most people it is entirely subconscious. This is because we hardly ever think about these things as we feel them instead.

Before this discourse can take place however, the thoughts of the author must be given shape. By investigating the relationship between the form of the book and the information contained therein, we can try to understand as to how these visual and sensory components function. Additionally, such an investigation helps us to forge long-lasting emotional bonds that we may treasure for a lifetime.

Mislead Interpretation

Sometimes things like bulky illustrations, clumsy type-setting tend to offset the aura associated with great books. For instance, The Greatest Show on Earth by Richard Dawkins is one such book that is loaded with potential but lacks hopelessly in form and structure. It explores the mystery of evolution and scientific breakthroughs and also discusses in detail as to how these thoughts improve our society and influence our position on probity and philosophy.

In spite of its brilliant setting and sheer strength of content, the visual and ergonomic drawbacks are more than skin deep as they obstruct the relationship between a writer and reader. Dawkins’ testimony seems less pragmatic, less established and somewhat less wonderful, as the book fails miserably to explain the poetry of its content.

Dawkins’ argument is distorted mostly by these jumbled, boisterous and ill-treated illustrative pages. Whilst he describes the superb and exceptional beauty of life, his ideas start looking ordinary & ugly due to improper sequencing and formatting. The images to the left of the book’s stretch, their harsh and chaotic positioning fail to echo the thoughts of wonder, attractiveness and order that the author writer so expressively describes.

A glimpse through popular commercial bookstores will make it abundantly clear that a multitude of books are treated in a similar way. Each one them has a multiplicity of unnecessary information that are in variance with the author’s purpose. Something critical gets distorted in this journey as the object disrupts vital information during transit.

To understand why these books are not delivering to their potential, we ought to first examine how information passes from a writer to a reader.

The Journey

For a substantial period in the past, the book as an instrument existed for a single purpose to transfer information from one mind to another. Although a lot has changed over the years, there will always be difficulties with this form of communication, and in the human reliance on information relay structures to carefully convey data.

These systems are often employed by publishers, since they have total control over the quality of the binding, the typography niceties, color coding and the overall physical appearance of the idea. All the visual and sensory elements mentioned above, unite together to produce the system by which the idea is given form. However, in case of the majority of books out there, this system destroys and infects the arrangement.

The systems mentioned above constitute innumerable components, like the grouping of typefaces, the paper thickness, use of color-coding, printing forms, length and width of margins, and other typographic details. But the problem surrounding these systems is that they are unable to reflect the ideas of the writer in consonance with the form of the book. They act like a barrier to the data that must travel through to be able to find the reader.

The problem is aggravated further by the use of low-priced paper, terrible typesetting and discomfited binding. But most bookmakers and publishers fail to understand how these elements work together and contribute to the reader’s understanding of the author’s ideas

Emotional Information Exchange

When a visual element precisely expresses the ideas of the writer, it becomes a source of sentimental expression. This aids in the transmission of ideas, and creates a healthy curiosity in the reader’s mind that the content is deserving of their precious time.

It takes more than just a good-looking cover, visual retort or an advertising publicity stunt that provokes emotional attachment with the advertized content. It constitutes everything from the size of the font to the texture of the page, since these components not only help explain the content of the book, they also continue to connect with and motivate the reader throughout.

For instance, a book titled “Do You Know What It Means to Miss New Orleans”?, focused principally on the consequences of Hurricane Katrina and its impact on the music, wealth and spirit of the city. 19th century designs thrive next to watchfully positioned chunk of text and each page has been lavishly printed on high quality paper. These components, apart from many others, unite to create a diverse sense of speed that sets it apart from the multitude of other books. The idea of the book and the form of the book merge into an emotional profusion that cannot be ignored. This is a perfect example of emotional information and it forces the reader to observe the subject and to understand individual pages with as much attention and concentration as those who designed and published it. Ideally, these additional pieces of information enable the reader to comprehend the silent history, thought-process and line of argument of the book. Without them, the discussion between the book and the reader would be less interactive and engaging

Lack of Emotional Content in E-books

As e-readers transmit content digitally or in other words to ‘real’ turning pages they mimic the form of the book, while ignoring the uniqueness of the writer’s ideas. It results in the creation of books that feel and look the same. The system of e-books disregards the writer almost entirely since all their ideas are endowed with the same visual characteristics, quality and appearance. Since unique and brilliant writers follow a definite pattern and pulse within their work, the visual and sensory elements must also be capable of creating emotional experiences that can amuse, influence, educate and stir compliment their writing scheme.

Conclusion

Creating emotional systems to generate a flair for reading is not about nostalgia or the exaltation of a specific medium of expression. It is about the most appropriate information, and the best way to correspond the content to the expected audience. These systems must therefore be articulate enough in safely and quickly transferring data, but they must also be capable of generating interest spontaneously.

Of course, the evolution of such an engaging system is a subjective topic and very little of this article dealt with the specifics of creating one, but this is because each suggestion requires a different illustration and sensory character. Some books require volatile formatting and thick paper to feel ground-breaking; others require a subtle and delicate tone to espouse a feel of calm or serenity. The form of a book is simply an instrument, but quite often a wonderfully efficient instrument nonetheless. Hence, the ideas embedded within different formats must be used judiciously by publishers to enable them to serve their true purpose of making each and every content look more dynamic and lively.

Win $300 Worth of PSD To Manythings Services

Franco Averta — Thu, 07 Mar 2013 16:10:05 +0000

We are excited to announce that we have teamed up with PSD To Manythings, to offer this great giveaway. The lucky winner will receive PSD To Responsive HTML Conversion with 2 inner pages (cool or what?).

About PSD To Manythings

PSD To Manythings is the leading PSD to XHTML & CMS Implementation Service Provider. If you are good at designing and don’t want to code, then PSD To Manythings is the best solution you will ever find. The best part is that these guys are well updated with all the latest technologies.

Here`s some of the services that they offer:

PSD To XHTML / CSS
PSD To HTML5
PSD To WordPress
PSD To Joomla
PSD To Opencart
PSD To Email Newsletters
PSD To Responsive HTML
PSD To Responsive WordPress

You can check out the work done by them here.

Giveaway Prize

1 lucky winner will get a PSD To Responsive HTML Conversion with 2 inner pages (ideal for any graphic designer who wants to have his/her online portfolio).

How to Enter:

Follow PSD to Manythings on twitter.
Tweet about this giveaway using the tweet button at the bottom of the post. (if you don’t have a twitter account, you can share it on Facebook or Google+ also using the buttons at the bottom of the post, and if you are not in any social network, just leave a comment).
Leave a comment in the post with a link to the Tweet, Facebook post or Google+ post (leave a valid email adress).

Restrictions

There is none!

The giveaway will last for one week, from March 7 ’til March the 14 (2013). Hurry up to participate!

The winner will be selected randomly (using the random.org service), from the comments in this post and will be announced after the contest is closed. Please make sure you’ve indicated a valid e-mail with the comment.

Good luck to everyone!

Remember as a reader of Concept Dezain, you get special 25% discount when you order any of their services. To avail the discount, use the coupon code “CONCEPTDEZAIN” while checkout.

Should Designers Follow a Strict Process for their Job or Entertain Flexibility

Fahad Raza — Tue, 05 Mar 2013 17:22:44 +0000

Redundancy is something every graphic designer is aware of. There are things they repeatedly do in their jobs. While starting-out designers may not think about it so much initially, they begin to realize there is a pattern in the jobs they complete, as they progress.

If you’re a designer who has already done a few jobs, I’m sure you already understand what I mean. If not, I’m glad I’m going to make you think about this important aspect of your profession and how you should understand the gripping theory behind it. Lots of important pointers here! So, let’s start the discussion. We will not only discuss, although in brief, what these redundant bits are – and what they make design itself – but also whether you should be religiously following everything they result in.

Design – A Processed Art

What you should understand at this point is these repeated bits of your design jobs are not a nuisance. If anything, they are a blessing, because if you can identify the steps you’ll need to take with every job, you can greatly increase the efficiency of your design jobs. However, before we delve into this discussion, let’s first list what these steps could be, so we’re all on the same page.

Let’s take an example of a simple scenario. You receive an email from a prospect who is intrigued by your work and wants to acquire your designing services. Joyful news. You tell them it’d be your pleasure and send them your design brief to get all the necessary information about the job. They fill it up and email it back. You study the details, make your estimates, and negotiate prices and deadlines. Now, you start working on the job and deliver the design they asked for. A day later, you get a request for a couple of minor changes in the design, which you attend to and deliver. Job well done! (And I wish it were always this simple).

Now, let’s list the various steps you had to take to finish the job.

Contact: the prospect got in touch with you. This is going to happen with every job. You are marketing your skills out there and people will hear about you. Without contact, there is no job, and prospects make contact 9 out of 10 times; there could only be exceptional occasions when you approach a prospect (like sending proposal to an ad).
Job Description: you collected the description of the job, including the objectives of the client and how they want the design to look like. You have to send a design brief to every new client because everyone’s unique with different choices, needs, and preferences. You can’t decide the cost and deadline of a design without knowing its specifics.
Negotiations: you came up with the cost and price needed to create the design and negotiate it with your client.Pricing and deadline negotiation is the meat and potatoes of every business deal. You can’t run away from it if you want to be a successful freelancer. Being a self-employed graphic designer, you must learn the art of convincing your client into believing you’re asking for the right price and time – just what they need to pay for having the design of their choice.
Delivery: once finished up with the requested design, you delivered it through a proper channel to the customer. The customer wants the design for some use – of course, so you must know the format compliant with that kind of usage and should send the design accordingly.
Revisions: your prospect looked through the design, pointed out some needed changes, and you revised the design until its final approval. Clients are difficult to satisfy: in more than 90% cases, they come up with a request of some minor or major changes. If acceptable, you make those changes and send back the work to the client for final approval. Even after this second round of designing, there are chances of some further revision requests until your client is finally satisfied with the design.

Systematizing the Design Process

These steps, with some variations, turn up in almost all design processes involving a client. Having a strategy and a system developed for these steps can save you plenty of time and can make your work more organized. You won’t have to plan a design scheme from square one for every new project once you have systematized your basic design process. Let’s dig a little deeper to understand how systematizing the design process can help you yield good results:

Systematizing the Contact Stage: having a defined medium of communication between you and your potential client can develop a hurdle-free contact between you two. You can use multiple communication systems like phone call, email, online chat, fax, in-person meeting, but it’s best to be focused on only one or two mediums unless you have a customer service department at your disposal. If you are the only one giving replies, email is the best way to be in touch with your current and would-be clients.Select a time of the day for answering your emails so the connection remains unbroken.
Systematizing the Job Description Stage: have a pre-defined set of questions to be asked from the prospects. Make sure you cover all bases and nokey information is missed out. It’ll save you from rethinking the questions and developing a design brief from scratch for each prospect. This equals saving not only plenty of time but also a lot of brain work.
Systematizing the Negotiation Stage: time and cost of a design depend on multiple factors. If you develop a formula to calculate the price and deadline, you won’t have to spend days in negotiating with your prospects. All they have to do is to fill in the factors in your shared formula, do some calculation, and find out the estimated price and time needed for their required design. Not only will your time be saved but your clients won’t feel skeptical toward the quoted prices. They’ll be aware you are charging them in accordance to their requirements. If they have a limited budget or time, they themselves will make changes on their side of the equation to reach at the desired deadline or price.
Systematizing the Delivery Stage: it’s always better to inform your customer of when and how the work will be delivered so you won’t have to face any problem at the end. You should know beforehand the types of file formatsneeded to be delivered as well as the sizes of the designs. Make sure you have the applications to develop those formats and sizes.
Systematizing the Revisions Stage: this is the most arbitrary step of design process and is obviously the most difficult to systematize. You can’t predict what changes your client may want, how big or small they will be, and how many times you’ll have to revise to reach the final design. Yet systematizing this part is very important. With anexpressed revision policy of what changes are acceptable and what not and a pre-set questionnaire for understanding your client’sconcerns and objections, you can make the revision stage much less painful and can save yourself from recurring revisions.

Be Ordered but Flexible:

While following your systematized design process, be strict in order but flexible in approach. By strictness in order I mean you should follow all steps sequentially. I would never suggest you to start designing before research. Similarly, you should not deliver any design before finalizing the price.

However, the methods you select for systematizing your process areopen to change. You don’t need to stick to email contact – ifyour client feels more comfortable in verbal communication and wants to talk to you on phone. There is no harm in changing your revision policies, if you feelit can make you learn something new or will let you win a long-term relationship with your prospect.

Uniqueness is the beauty of art and designs. Don’t let the process stop you from discovering your uniqueness. Always have an open mind for new possibilities and be ready to try something fresh.

So, what do you do? What is your process? Are you strict?, Share your thoughts with us.

The Flat Design Trend

Luke — Wed, 27 Feb 2013 13:34:22 +0000

Minimal – honest – digital – flat: whatever you choose to call it, this type of design is becoming a prominent trend in 2013. Popular because of its simple and minimalistic approach that translates well on small/mobile screens, flat design reflects a clean aesthetic without unnecessary clutter. This fresh take on web design could be the perfect solution for reaching your design goals.

What Is Flat Design?

Flat design is a style that cuts out extra design effects to reach a simple, 2-dimensional design scheme. This means that the faux-realistic techniques of skeumorphic design like drop shadows, beveled or feathered edges, embossing and gradients aren’t used. Viewed as a backlash against skeumorphic design made popular by Apple’s iOS, flat design goes against the idea of making elements look like real-life objects that come off the page – instead going for a crisp, techy look that is just that: flat.

You can see the difference between skeumorphic and flat design in comparing the iPhone and Windows interfaces.

Flat design returns to a functional focus on design: how a website works, as opposed to what it will look like. Ornamental elements are seen as unnecessary clutter in flat design, as they serve no functional purpose. Besides a clean and simple visual language, web designers gravitate toward flat design’s scalability, especially as society continues to transition to smaller electronic devices. While effect-heavy design elements can become distorted on mobile devices, flat design easily translates to virtually any screen or device without needing specific mobile versions.

In any web design, communication is key. Iconography is a great way to quickly and effectively communicate a message visually, and often makes use of flat design. These icon design tips illustrate how icons can be used to efficiently communicate ideas with little written text.

This cloud computing guide uses effective icons that grab attention and guide the eye with simple imagery.

How To Achieve Flat Design

Color: flat design schemes work best with vivid color. With no extra effects added to design elements, bright colors help important aspects pop.

Typography: the minimalistic method of flat design should be carried out in the typography that backs up your message. Use a sans serif with various weights to keep it simple yet interesting.

Copy: the same should be applied to text: use concise, few words that clearly send a message.

UI Elements: buttons and calls-to-action should be crisp and not over-designed, with an obvious function. This can be as easy as making them a different color, outlining them or adding copy.

Hierarchy: flat design still holds to the design principle of hierarchy. Encourage your viewers to take the desired action by placing important elements along the natural eye-scanning path on the page: across and down.