Imagination is our power

Archive for the ‘Web Development and Hosting’ Category

Web Design: 20 Hottest Trends To Watch Out For in 2013

All throughout 2012 there has been an enormous surge in new web design trends. Some of you may remember my earlier post on web design trends going into 2012. Now we can see many of these ideas have come to fruition, and even adopted further increasing levels of novelty. In this article I would like to delve into 20 more design trends for the new 2013 year.

The design influence is merely a reflection of our culture and expectations for user interfaces. Ideally these trends represent favorable ideas in the web design community. However designers will always have their own opinions when it comes to design terms, so take these ideas with a grain of salt.

If you are interested, keep your eyes peeled for examples of these trends and techniques.

1. Responsive Layouts

This topic was my first point in the 2012 trend article, however I feel that responsive web design has been changing to ultimately come to a threshold where layouts are designed to match all forms of digital media. The idea is to support all devices from laptops, desktops, smartphones, tablets, and anything released in the future.

You could think of this trend more like a uniform web design where the goal is to have a single set of codes which run perfectly on all environments. Responsive websites are often thought to cater towards mobile browsers, but that isn’t the sole purpose.

You can have a responsive website which also adds brilliant illustrations and graphics into the layout when the browser window is larger.

The big idea here is to think about website design as a single canvas which is dynamic and fluid by nature. CSS3 media queries allow developers to customize layouts based on limited or expanded screen real estate. Use this to your advantage and see how other designers are using it as well!

2. Retina Support

Along with responsive support for website layouts I have also seen a dramatic rise in people building for retina devices. Apple first engineered this idea with the iPhone 4 and has since applied this screen display onto their other devices, including the iPad and some MacBooks.

Retina screens are basically twice as dense as any average LCD. So they are the same number of physical pixels, but digitally twice as many pixels can be fitted into the same physical space.

This means pixel-perfect web designers supporting retina devices will need to create two sets of http://media02.hongkiat.com/web-design-trend-2013/. First you need to sample your image at double the resolution, then save a “standard” version at half the size. The larger image will be scaled down to the standard resolution and will look very crisp on retina screens.

One of my favorite tools for responsive web design is retina.js. This is a JavaScript library for automatically displaying @2x retina copies of http://media02.hongkiat.com/web-design-trend-2013/ whenever your user is browsing on a retina device.

Although this won’t detect CSS background http://media02.hongkiat.com/web-design-trend-2013/, it is still the most handy resource as opposed to coding everything in media queries.

3. Fixed Header Bars

Using the CSS position: fixed; property is a great way to staple a header bar onto your website. As visitors scroll down your page this will offer constant support for navigation and a trip back to the home page. This trend has been around for a while but now we are seeing this in full force.

Fixed headers are so interesting because they can work on practically any website. This includes social networks, blogs, and even design studios or private companies. The design is very trendy and looks great paired with most layouts. But aside from the aesthetics, this bar also provides an exceptional user experience without needing to look very far to navigate the website.

4. Large Photo Backgrounds

Photographers or even fans of photography will definitely enjoy this design trend. I have seen countless showcases discussing the ideas of big oversized photography in the background. It’s an excellent way to capture your visitor’s attention and it can look great when done properly.

I am often fond of big photographs since they can be pleasing on the eyes. When blended into your layout, this design technique can give your website a major edge in marketing. On this topic I always consider the ever popular design portfolio of Kerem Suer. This unique background photo behaves as custom branding for everybody who lands on his website.

5. CSS Transparency

The new CSS3 properties have allowed for opacity edits on any webpage element. This means you have control to generate transparency in any modern web browser – no Photoshop required! This trend of web design transparency was recently discussed on Codrops with some very enlivening talking points.

One excellent example is on the Squarespace Blog where the central wrapper is given a background: transparent property. Typically this can be used to generate some other background from repeating http://media02.hongkiat.com/web-design-trend-2013/, or to setup the background using internal elements.

Another interesting design technique for manipulating transparency is through rgba() color syntax. When designing in CSS you have the option of specifying colors using Red, Green, Blue, and Alpha-Transparency values. So using the syntax rgba(255,255,255,0.6) would generate the color white at only 60% opacity. This is certainly a design trend we can expect continuing into 2013 and beyond.

6. Minimalist Landing Pages

Anybody who has spent some time researching markets will understand that selling on the Internet is just plain smart. You have access to a large consumer base from anywhere in the world. Additionally you can sell products which are not even physical, such as videos or creative resources.

Creating a landing page online is all about capturing new leads for your product or service. New trends are following the idea of minimalism: keep everything simple and focus on your core product.

This is exemplified on the PictoPro webpage which offers a beautiful resource for cheap icons. The page is fairly crafty using vector icons as a background effect. But all the text is easy to read and it’s basically a one-click checkout process. You cannot get much simpler than that.

7. Digital QR Codes

The abundance of mobile smartphones has led to a surge of QR Code apps. This stands for Quick Response Code and has developed from the older UPC barcodes. You will find these tagged everywhere from restaurants to event venues and automobile sales lots.

But very recently I have found a couple of websites with these codes built right into the design. This isn’t something you would normally consider since they are often found in print. But QR codes could become trendy as data transmission becomes quicker over time. You can see a brilliant example of this technique on Keith Cakes contact page.

8. Social Media Badges

Marketing is one of the ultimate determining factors in a website’s success or failure. Social media and viral marketing are exploding in many different websites. Digg used to reign popular in this domain but has since conceded to rivals like Reddit. But these are not the only two popular resources for sharing stories online.

You can check practically any social community for sharing badges and will likely find a great solution. You can position these badges pinned to blog posts and articles anywhere in your layout. These are still used actively by readers and fans who want to share content quickly on places like Facebook, Twitter, or even LinkedIn.

Below I have put together a small list of social media badges you can try in your own website layouts.

9. Detailed Illustrations

Newer design trends are all about catching and holding one’s attention. I feel that illustrations perform this task brilliantly. The problem is finding a designer who can make such impeccable works of art, or even teaching yourself.

Illustrations can be used in many various ways to bring about different moods in your website. Look around the Internet, and you will find many different website galleries and showcases focusing on digital illustrations. You can see these artistic works eventually blend into its website branding almost perfectly. MailChimp is probably the most definitive example with its trademark chimp mail carrier.

10. Infinite Scrolling

Infinite scroll loading has been around for at least a few years. But this technique hadn’t really hit mainstream until this year and I’m sure it will continue into 2013.

Pinterest has adopted this loading technique for their layout and it works beautifully. You can search anything and the results page will continually load as you scroll down. Pagination is basically a non-issue and doesn’t even work as a detriment into the user experience. Talk about designing for simplicity!

But another great example and possibly my favorite example is on Tumblr. You can blog and reblog photos from other people you follow which all appear on your Dashboard. So after logging into your account all the most recent posts will scroll infinitely down the page.

This is an excellent technique which does not work on every layout, but for the right websites this can look and behave phenomenally.

11. Homepage Feature Tours

Sliding image presentations and demo videos are both very common with new products on the web. Landing pages and startups often try to entice potential users with these informational goodies. And they can often work very well, if you know how to construct something that looks good on a webpage.

Looking back over 2012 I would say my favorite example of this trend is on MediaFire’s homepage. The entire top portion of the page rotates between a series of slides. They each explain what you can do on MediaFire and how their features compare with other websites.

What helps this demonstration stand out is also their use of big graphics and icons. This is another trend which will not work on all websites, only for certain products you can draw in loads of attention.

12. Sliding Webpage Panels

Dynamic websites used to be very popular when Flash and ActionScript were all the rage. Now, dynamic effects have moved into the realm of JavaScript/jQuery, and this has in turn affected the way designers build websites. Sliding panels is just one technique I happen to really enjoy and would expect to see more in 2013.

Right off the bat you may not think CaptainDash is any special website. But as you click through the navigation you will learn that each page is loaded in succession pushing from left-to-right. Dynamic effects such as these do not always bode well for mobile users.

But if you can handle them with responsive design techniques or an alternate mobile site then this is a really cool effect worth trying out.

13. Mobile Navigation Toggle

When speaking of responsive design one of the most difficult questions is how to build a solid navigation. You want to give your readers direct access to all your important links, without flooding the page making it unreadable. It is also a good idea to keep your responsive navigation hidden away until it’s needed.

Enter this beautiful design trend of mobile navigation toggle menus. The Treehouse Blog is merely one example of this technique which looks brilliant on your smartphone. And even in your web browser! But there are dozens of websites and design studios who have adopted this trend for their own responsive layouts.

What I like most about the toggled navigation is that you can design menus in so many various forms. You can have links drop down from the top, or slide down, or push content over from the left or right side. Designers have so many options to play with and there is plenty of time for UI experiments.

14. Fullscreen Typography

Earlier I mentioned using big oversized photographs in the background of website layouts. This trend can be extended to focus on typography as well: designing your webpage text so it fills the entirety of the browser. Some users may find this annoying. But this is not often the case if the layout is fitted perfectly for super-large text.

Alex Pierce has a great website layout which does focus deeply on typography. You can see this includes rich text effects using CSS3 properties. Additionally the website is very easy to navigate, and many of the other page elements appear oversized as well.

Big text with unique font styles can stand out just as much as oversized photography. And I am sure this will see more design critiques moving into the new year.

15. APIs and Open Source

Open source software has been around for decades and has been changing the web since its inception. But over the course of 2012 I have noticed more open source software pertaining to webpage widgets, layouts, and dynamic effects. Typically we could also be talking about free website templates, layouts, or CMS software such as WordPress.

Open APIs and resources like Github allow designers to not only prototype layouts, but also animations and effects on the page. jQuery has a practically uncountable number of plugins for free download to be found all over the Web.

And I am honestly not expecting the amount of open source projects to slow down anytime soon. This truly is the greatest era to be getting started and advancing your knowledge in the field of creating websites.

16. Deep Box Shadows

I discussed CSS3 box shadows in our previous post written for 2012, and this trend has proven to be very accurate. In fact, I now almost always expect to see box shadows infused with elements in modern web designs. The effects look amazing and they rarely detract from the aesthetics except when overused.

I believe the problems that designers had to face years ago stemmed from box shadows being too difficult to implement. Back a few years, this effect would require some type of JavaScript or direct background http://media02.hongkiat.com/web-design-trend-2013/ created in Photoshop. Now box shadows can be generated with a few lines in CSS.

I would look out for new box shadow techniques all throughout 2013. I think the trend is already deeply ingrained into the design community, now it is more about who can be the most creative!

17. CSS3 Animations

The CSS3 transition property and all the related browser prefixes offers CSS dynamic effects just like JavaScript. Designers can now animate effects on the page based on different CSS properties. I have seen a lot of nice hover effects and form input fields using these transitions the right way.

Another excellent and very inspiring example comes from a CSS alerts tutorial on Codrops. Notice how you can setup various times and settings for the animations.

This is definitely a trend which offers some promise in the coming months and years with lots of room to advance. I am confident that newer web designers will give rise to booming animations all created without the use of scripting.

18. Vertical Navigation

I was not a big fan of this layout style when I first started noticing different websites adopting this trend. However over this past year I have seen more designers creating elegant solutions with the vertical rhythm still intact. And when done properly, vertical website layouts can be affluent with content and design taste.

The portfolio on Riot Industries is a great example for newer web designers. Check out how the navigation links work and how the portfolio entries are dynamic on hover effects. Also the border textures really show a dividing line between the left and right columns.

This textured effect is apparent in other vertical layouts as well, such as the CSS gallery Design Bombs.

19. Single-Page Web Design

Single page design is a big topic and covered under many different categories. Obviously there have been single-page websites since the creation of the World Wide Web. But over the recent years we have seen this trend evolve to sport a more natural user experience.

I think the website design for Cage App is possibly one great example of many trends listed in this article. They are utilizing a single-page layout brilliantly with content split up by horizontal containers. But you will also notice the very top of the page features a blurred background photo effect.

Plus as you scroll down the page, the navigation bar actually stays fixed at the top of your window. Incorporating other popular design trends into a single-page layout is one solution for drawing attention from visitors and making one captivating website design.

20. Circular Design Elements

The trend of circles within website layouts is something newer and has been given a lot of attention recently. Designers like circles because they are clean, neat, and generally fit into any layout block. You can build patterns and even fix your page elements into circular designs (eg. user avatars, share buttons, post dates, etc).

The portfolio of Lucia Soto is basically one terrific example of circular web design. The website is built dynamically so you are panning horizontally to different segments in the page. You will notice some cute vector artwork dotted along the sidelines as well. Web designers crave these extra tidbits in page layouts because they ooze uniqueness.

You can find a similar example on the homepage for Site Optimizer which uses circular page elements as informative selling points for their services.

Final Thoughts

User interface design is one of the most complex topics when building digital products. This rings especially true for website layouts, trying to match navigations and content styles for a successful user experience. These design trends aim to point designers in the right direction.

I hope you may consider some of these ideas and think about how they do affect modern day websites. You can find examples of these emerging trends, in smaller businesses to global companies and all other websites in-between. If you are thinking ahead of the curve and want to share some insight on design trends in 2013, just drop a comment in our post discussion area.

Copyright Protection and Infringement of Web Content

Copyright is a kind of protection that authors have for their original work. This includes works in the domain of literature, drama, music and other artistic and intellectual creations that are published or unpublished.

It should be noted that copyright is only a protection of an expressed idea and not the idea itself. It gives the owner of the right the sole rights for reproducing his work and distributes or displays it in public. Copyright is automatic and does not need any registration, but you can assert your copyright by marking your original work with the copyright symbol.

 

Web content theft has been a hot topic of discussion in recent years. It is unethical behavior on the website, where your treasured content catches the fancy of other writers who feel it is their birthright to use it and pass it off as their own. Of course, they could always defend themselves by saying imitation is the best form of flattery. But this kind of flattery doesn’t go well for most, if not all, who find their website content appear on some other site. You have worked hard to create your content and would surely not like it plagiarized.

With respect to copyright on the web, there are basic rights that allow creators to have control over their creations and they can be compensated when others use and enjoy their creations.

Copyright laws – What it Protects

  • Short fiction and short stories
  • Novels
  • Newspaper articles
  • Magazine articles
  • Computer software
  • Advertisements with text
  • Brochures
  • Databases
  • Sound recordings
  • Audio visual works
  • Catalogs

Copyright Laws – What it does not protect

  • Facts and ideas
  • Words and names
  • Symbols, ideas and inventions
  • Processes
  • Systems of operations
  • Proprietary information

However, it may protect the way in which the above are expressed. Words, names and symbols are protected under the trademark laws and proprietary information gets protection from the trade secret law.

Copyright Infringement

Theft of website content can be considered as an infringement of copyright. You can easily find whether someone has been infringing on your copyright by word of mouth. Apart from this, if you suspect copyright infringement of your web content, you can just type out some new material from your web content into the Google search. Use a few words at a time and use them within quotes. You can even r unique find out whether someone is using the unique graphics from your website by entering the file name in Google images and searching for them.

Such copyright infringement can damage your website rankings with search engines, as content used in several websites are not viewed favorably by search engines and will be considered as spamming. This could lead to your website being dropped from the search engine listings or at least dropped in the rankings. It could also damage your reputation, as people might consider your site as the duplicate one.

When the copyright owner’s exclusive rights are carried out by a third party without the permission of the owner, it is infringement. The infringement can be on the complete work or on a part of the artistic work.

Myths Regarding Infringement

There are many myths regarding infringement in the internet. For example, many claim that copying a free advertisement is not infringement. False – The copyright holder has the sole rights for advertising his products. There are many sites where members discuss their favorite television shows and movies online and the big studios send the infringing owner websites warning letters ordering them to shut down their site.

Another myth regarding infringement is that people consider that if a website is free and the owner does not make any money from it, the material on the site can be copied and does not constitute infringement. False – Just because you don’t make a profit from the infringement does not mean that it is not an infringement.

Copyright laws of Online Work

Copyright protection can differ from country to country depending on the nation’s laws. According to the US laws, the copyright exists right from the time of any expression of your work in a form from which it can be reproduced or communicated, either directly or through a device. It is not mandatory to register the copyright with the US Copyright Office. However, registration could have some significant benefits. The work gets automatically protected when it is fixed in a copy, even if the author has not used the copyright symbol with the ‘c’ in it. You can register with the US Copyright Office with an online registration process that is quite fast and cheap by paying a flat fee for submitting your work.

Copyright laws protect written words that appear on your website along with digital formats, digital artwork and so on. Copyright laws are applicable to any content in digital form which is published on the Internet. Many people disregard copyright laws in the digital world and suffer losses in their attempt at copyright infringement. When publishing any content online, it is important to have the permission of the owner in case they wish to publish someone else’s work.

Copyright laws last for a lifetime of the author plus seventy years after the death of the author. There are also some provisions for older works that are unpublished. The author is generally the copyright owner, but in some cases there are also joint owners. In case of employers and work commissioned to an employee, the employer is the first copyright owner, depending on the contract. The date on which the work was created is very important. Copyright can also be transferred to another party or just licensed for use by other parties.

All works that have been published after January 1st 1978 need not get renewal of copyright registration. The duration of the protection depends on the several factors:

  • The time when the work was created
  • The person creating the work
  • The first commercial distribution of the work
  • Works that are created after January 1st 1978 have protection for the full life of the author plus another 50 years.

Copyright Owner’s Rights

The owner of the copyright has some exclusive rights:

  • He can reproduce the work or copy it, imitate or duplicate or transcribe it.
  • He has the right to distribute the work or issue copies to the public either by sale, rental, and lease or by lending.
  • He can communicate the copyrighted work by electronic means or by broadcasting. He has the public display right and can show it in a website, a slide, a film and so on.
  • He can decide whether others have the right to do any of the above.
  • There are several legal aspects that a web writer must be aware of with regard to the US copyright law. There are many misconceptions in this regard, especially to do with web content. If you find a copyright violation, you must write a letter to the offending party and ask them to withdraw the material from the website. If such a request is refused, you can inform the ISP or Internet Service Provider of the owner regarding the infringement situation. In many countries, the ISP is held responsible for such violations and generally, ISPs will respond to such infringement activities on websites.

What is Copyright Registration?

Though copyright protection is automatic, you need to register it in case you want to bring a lawsuit against copyright infringement. There are several reasons for this:

  • In order to sue someone for infringing on your copyright, you need to first register the work with the US copyright office. The registration can also be done after the infringement, but it can only be applicable for future infringements.
  • Those authors who register their copyright within ninety days of the publication of their works can avail all statutory damages provisions for infringements taking place both before and after the registration date.
  • If you register your copyright, you can be eligible for up to $100,000 in the form of statutory damages and also claim attorney fees in case the case is successful.
  • Those authors making a registration within five years of their published work can get it submitted as prima facie evidence in court.
  • Registration is simple and also cheap, as you just have to fill out the application and mail it to the US copyright office along with a copy of the work to be protected.

How to Protect your Copyright?

  1. Protection for Authors: If you have posted any material on a website, it is automatically protected by copyright. However, it would be a good idea to add a copyright statement.
  2. Protection to Host: Those hosting a forum or a web page where there are postings from other members must warn them of the copyright violation or plagiarized material. You will need to post a warning in the site notifying members that any such material will be removed. Any violations should be immediately followed up, so that you can protect yourself from liability that others impose on you. Such liabilities can accrue from the Digital Millennium Copyright Act.
  3. If you find that someone has infringed your copyright, you can bring proceedings against them. Civil remedies can involve an award of damages or some penalties imposed on the infringer.
  4. You can also resolve the matter with infringing party by means of a settlement, without bringing it to court, as the latter could be expensive and time consuming.
  5. Seek specialist advice before you start pursuing a claim for copyright infringement.
  6. Though there is no need to go to any legal process for establishing copyright, it is a good practice to keep a record of your artistic works.
  7. You can put the symbol of copyright along with the name and the publication year in the work, as it can be useful while trying to bring about an action against infringement in the future.
  8. You can deposit copies of your work, stamped and unopened, to your solicitor.
  9. All works that were published before March 1, 1989 needed a formal notice for getting copyright protection. However, works published after March 1st 1989 there is no need of any copyright notice.
  10. However, it is important for authors to place a notice saying: Copyright with the symbol, the year and his name followed by ‘All Rights Reserved’, as a practical measure of warning others that the author takes copyright issues seriously and will not entertain infringement, thereby deterring them.
  11. By doing the above, no infringer can claim ‘innocent infringement’ in case of a lawsuit.

When does Copyright Protection NOT Apply? Fair Use

There are several cases where copying of artistic work is allowed without seeking the prior permission of the copyright owner. These are called ‘Fair Use’, as without such a use, it would not be possible to review any book or to study any works of famous people. However, this can be a rather slippery issue. Entire passages can be quoted and can still be considered as fair use, whereas a small amount quoted could be crucial to the work, if it leads to a decline in the commercial value of the original book or content. This is just a general guide and cannot be considered as an exhaustive guide. Using an artistic work is allowed if:

  • You need it for private research purposes.
  • For reviewing and criticism.
  • Reporting of current events
  • Artistic work for the purpose of advertising and for the sale of the work.
  • Educational uses, such as instructions by teachers to pupils.
  • Using it in libraries to help students in research or private study
  • In cases where the copyright has expired or the author or copyright owner has died more than seventy years ago.
  • When the work is done in the public domain and is not copyrightable.
  • Facts that are common knowledge can be copied and reproduced.

However, a compilation of facts that are created in a specific order and with a lot of original content and unique formatting styles have full right to copyright protection laws.

Duties of a Web Writer

Many people intentionally steal another writer’s work, while some do it on account of laziness or ignorance. You are only allowed to copy a work for fair use or in the public interest, such as quoting a passage from a book while reviewing it. This is done in order to prove that you have reasons for giving it a low rating. Critics are, therefore, allowed to include clippings and quotes from books and movies. You cannot, however, copy a full text from any article and send it to all members in the mailing list without adding any commentary or giving any credit. You cannot also just copy and post it in a public forum or a blog. You cannot share or distribute the full work without getting prior permission.

The best policy for writers would be not to copy from other sites. You can, of course, refer to the site for ideas. You can even share the content through your email or a link provided you give a comment or a brief excerpt showing why you need to share it. You can always ask for permission, as it is the author’s right to choose and not yours.

Conclusion

The issue of copyright protection and infringement is a confounded one in case of web content. It is important that authors protect their work with the US copyright office in order to protect their work from infringement. However, when you post your work, it is seen by all people from all over the world and even if it is infringed upon, it becomes difficult for the person to become aware of it. It is also quite expensive to pursue such infringement cases.

Writing an article can be painstaking work and copyright laws make sure that the credit goes to the proper person. No one can plagiarize another’s work by copying it exactly. The protection is given automatically as soon as the work is created even if you have not registered it officially. You have to be vigilant to those stealing your work online, as it is a simple matter to copy and paste content from one site to another. It can pose quite a struggle and you need to be aware of one’s rights as a writer as well as know more about copyright issues and how to tackle them.

Copyright is not just an iron clad lock that prevents you from publishing anything. The main purpose of copyright protection is to protect the author to his right of obtaining commercial benefit from the valuable work that he has created. It also allows him protection so that he can control the way in which his work is used.

Review of Popular Web Design Trends from 2012

The year 2012 has seen an immense burst of creative energy. Many web designers & developers will notice this energy is still carrying us over into the new year. But what have we seen come to fruition over these past 12 months?

Responsive Mobile Layouts

How can we look back over this year without immediately considering the enormous focus on responsive websites. My first introduction to this topic was reading Mobile First & Responsive Web Design from the ALA Book Store. It is a topic which seems confusing at first, but once you understand the purpose it is truly brilliant.

I feel that responsive layouts are setting the precedent for an enormous shift in the way we look at websites. Typically people view websites as either static or interactive from a user standpoint – saving data, uploading photos, sending messages, etc. But responsive designs are forcing us to look at websites as fluid entities, which should work on any screen or monitor in the world.

I feel this is only a good thing and will bring designers closer to a legendary breakthrough. It would be fantastic handling all website traffic with the same HTML/CSS codes. And this very well is the purpose of responsive web design. If you haven’t taken a look into responsive web design I suggest a quick 10-15 minute Google search on the benefits to user experience.

Dynamic Effects and Plugins

I would like to think 2012 has been a year for advancing web technologies. More frontend developers are leaning towards scripting and dynamic coding for interface effects. But this also means we are seeing more open source projects and more plugin releases for popular code libraries.

Earlier this month we covered 50 popular jQuery plugins from 2012 which is a massive showcase all JavaScript developers should check out. Many of these plugins would come in handy for complex web projects. Consider things like form validation, Ajax backend scripts, browser compatibility, and a large list of other fixes.

I think that 2012 has seen a deep-seated interest in dynamic website interfaces. We have moved beyond simple dropdown menus to include fading & sliding effects, box shadows, and transitions for link hovers. You can build practically any effect into dropdown menus these days. And the fun part is that most styles can be accomplished very quickly with just a few lines of code.

Designing Around Content

This is a trend which I feel warrants a solid explanation. I have noticed more styles in website layouts over the past few years, and even more custom ideas from website redesigns.

All of the content is split by large header text and thumbnail images. Also the page content is spaced in chunks down the page as easy-to-read excerpts. All of these pieces from a powerful blog design which is focused on wrapping content nicely in the page. But we can see other related examples of this same idea.

The design studio Whiteboard has an excellent single-page website layout also focused around content. While scrolling down the page you will notice large imagery in place as background photos. These are great shots for pleasant aesthetic effects and to illustrate the company’s theme. You will also find their content is wrapped in small segments in-between these header sections.

The purpose for content-based design is to have an idea of your webpage content first. Sketch out some wireframes and figure out what style of layout would work best for the amount of content you need to share. It is certainly an interesting way to go about building websites. And I feel you can portray an excellent user experience by starting with this method.

Digital Website Media

It’s difficult to know where to begin when it comes to sharing & publishing digital media online. There are so many services for uploading photos, videos, slideshows, presentations, documents, and other digital media into the cloud. All of these services offer various means to embedding high-profile media content into website layouts. And I feel that designers are growing accustomed to these common elements.

Web designers back in the 1990s were not so worried about video media. Or even dynamic photo galleries. Some of these effects began cropping up during the early-2000s with minimal effects. But now querying the phrase “open source image slider” will return thousands of search results. I feel that it is even easier to publish media nowadays with CMS brands like WordPress.

Users who are not very tech-savvy may install a free WordPress site, install a free theme, and begin publishing their own content right away. This would require maybe 15-20 minutes of setup time. We live during an era where anybody can launch their own publication and find quick solutions for sharing text, as well as other forms of media.

And I feel this is a noteworthy design trend because the Internet’s core purpose is for immediate human communication from around the planet. I would have to argue the web has come down a long path since inception, and new designers are just getting started leaving their mark on history.

CSS3 Properties Aplenty

Web designers who remember rounded corners and box shadows from the early 21st century know the painstaking difficulty of working solely with images. It used to be so much more difficult building a container with rounded corners using background images. CSS3 has fundamentally changed the way designers construct website interfaces.

This is definitely a trend which is here to stay well into 2013 and beyond. All modern day browsers support the majority of basic CSS3 effects. Box shadows, text shadows, transitions, along with a litany of additional properties. The days of hacking together solutions are almost over. Unfortunately developers must still handle traffic from older legacy browsers – but thankfully over the next few years these will slowly phase out of existence.

Prospective of 2013

As a user interface designer myself, I am quickly noticing the changes in application design. Webapps and mobile apps are beginning to look a lot similar, although dynamic behavior is still a while away. But how far are we from emulating native iOS animations with in-browser jQuery? Will fully-responsive mobile applications be the future of desktop web applications?

When I think of the future in web design I have to think of one term: accessibility. Designers are more intelligent nowadays, and they have an easier time selecting a market segment. You can build website layouts targeting demographics which suit your company or product the best. Accessible interfaces are always going to vary based on the audience using them.

It is safe to say we will not only see a larger movement for building more accessible websites. But also designers who are willing to push boundaries, creating various instances of brand new UI trends & techniques. Innovation is happening every month with new open source code releases in Github and on blogs around the world. And the best part about these rapidly advancing trends? I don’t see anything slowing down anytime soon.

Final Thoughts

The new year is always an exciting time for solemn reflection on your own skills, and the world as a whole. We have seen tremendous strides in achievement for the web development community which is full of passionate individuals. The newer HTML5/CSS3 rules have set a precedent for enormous change in the future of websites.

I hope these trends and unique ideas can offer some critical design inspiration. 2013 is sure to be an exciting year full of even more trendy user interfaces and experience techniques. I find that some of the coolest ideas start from a small project and begin to snowball elsewhere. If you have similar thoughts or ideas feel free to share with us in the comments discussion area.

Web Design Trends for 2013

At the verge of 2013 there have been talks of what will be pertinent in terms of web design. Some things are disputable while others are undeniable – take web design that used to focus on media options a few years ago, now it’s the era of great usability and classy layout – no one would argue about that. Now if only we survive this year’s end of the world, there is a lot of promising features to appreciate web design wise in 2013

A few points, however, should be highlighted and covered by at least a few words. For that matter you are welcome to read on and share your thoughts in comments.

  • Responsive Web Design aka RWD (it is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones), © Wikipedia). It is currently on top of the list of trends for the next year, thanks to the ability of this technology to eliminate problems related to the size of the layout. A single design that RWD offers will be enough for multiple desktop and mobile gadgets. It looks promising in terms of working really well on all of the devices and should make things better for all of the web designers. Some call responsive web design not just a trend, but the next web design generation.
  • Vertical scrolling as part of websites optimization will be serving a significant role. These days many websites have both vertical and horizontal scrolling for their mobile versions, which is not always very user-friendly because of too much actual scrolling that a user has to make in order to see the whole picture. Therefore vertical scrolling will be leading in the coming year as an easy and convenient way to navigate the website. It allows scrolling a page down with a header menu at the same time without having to go back to see the menu, which is basically a vertical scrolling of buttons and menus with the same kind of navigation for social buttons and shopping carts. Vertical scrolling will most certainly be in demand due to its user-friendly approach in optimization websites.
  • Oversized objects such as large buttons, headings, full-width images and full-sized sliders are definitely to be expected as the next trend in the year to come. Thanks to touch screens getting more and more popular each day, oversizing of the objects becomes inevitable. And even though this may lead to certain deceleration of the websites, because bigger items need more graphics, there is hope that web designers will come up with a perfect solution in the end, otherwise this trend may set out pretty soon.
  • Simplicity is something to expect from web design in 2013. The motto of the year will be ‘the simpler the trendier’. Front-end frameworks will be seen around as well. Among them are such front-end frameworks as Twitter Bootstrap and WordPress, and many others.
  • Parallax scrolling is all about 2D objects being placed on different layers and being scrolled in the same direction at different speeds with the closest layers moving the fastest. That gives the impression of 3D space. The coming year should see a lot of parallax effects in the use of web design. Even though it has been in the industry for quite a while, it was mostly related to video games. Nowadays it is being used as a refreshing addition to highlight a special event such as  product or website launch, or integrated into general webpages like ‘Home’ or ‘About Us’ to optimize the look and feel of something standard and make it exceptional. In 2013 we can expect to see a lot of parallax scrolling effects on regular websites.
  • Typography will most likely become an essential part of every website before we know it. There is a great deal of fonts to choose from due to widely available typography variations. And designers tend to prefer stylish typography designs to nice images instead of the text when optimizing the look and feel of the websites. After all typography is the foundation of any website so it is only going to win back its positions in 2013.

All of the above is an educated guess based on subject matter experts of web design and development company, which always remains on top of the game through permanent improvement of customer services.

The Freelancers Guide to Successful Content Curation

Many social media pundits claim that content curation will prove to be the next biggest thing in the arena of online entrepreneurship and obviously, freelancers with specific skills to perform the job of content curation will gain a good fortune out of it.

The biggest reason behind these predictions about the profitable expectations of content curation is the fact that the content on the Internet is increasing rapidly at every minute and according to some experts, within a few years, the content on the Internet will be doubled or more within every 72 hours or even less. Experts believe that this huge amount of content will offer a great opportunity for Internet marketers to gain online influence so that they may attain more customers for the products or services they are trying to market. However, it can prove to be a daunting task to refine the relevant and quality content available on the Internet and this difficulty can prove to be a great chance for the freelancers to gain an important place in the space of Internet marketing. This is the reason why it is important for freelancers to know everything about content curation as an especial skill and how to master that skill.

 

What is Content Curation?

Internet is a huge pool of a vast quantity of content that can be used for specific purposes. However, it is very important to recognize the quality of content and to arrange it in a meaningful manner so that anyone who is seeking for any information on Internet to share with others to achieve a definite goal may find it easy to attain the right content of appropriate quality. The process of rearranging the huge amount of content available on the web so that it can be presented in an organized and sense full manner is known as content curation. The traditional meaning of curator is a content specialist who organizes the content assets in a cohesive and coherent manner so that the information can be presented in an attractive and explanative manner to attain the interest of the viewers.

Content curation involves the job of refining, cataloging, coordinating, and publishing the information around a specific subject. A content curator goes through all the possible available content and refines it to arrange the best possible content in a definite order of its importance and relevance so that it can be displayed in a proper way. Unlike the popular belief, content curation isn’t just about collecting links and preserving them, rather; it is the job of organizing all the links to present a particular context with proper explanation. A content curator is not just a person who can offer a number of links about a subject, rather; he is the person who has properly researched about that subject and can offer the best, well organized, and highly relevant content on any specific subject online.

What is the importance of Content Curation and who needs it?

The Internet space is continuously increasing and people are now creating and sharing content at an enormous speed and with time, this speed of content creation is going to be increased. Even now, thousands of new videos are regularly uploaded online. People write and publish blog posts at every other moment. There are millions of Twitter and Facebook users who update their status regularly.

To explain the enormity of content creation, let us consider the example of Facebook. The average user of Facebook creates around 90 sets of content in a month. According to Mark Zuckerberg, more than one billion people are actively using Facebook each month. That is, in a month, the Facebook users are creating around 90 billion pieces of content at an average. Add the content on Blogger, Twitter, Orkut, MySpace, WordPress, and other websites and independent blogs and you will find that the data or content on the Internet is getting immeasurable day by day. To put it simply, we are not living in an ocean of content that is expanding at a vast pace. A content curator is the person who knows where are the fishes that a person is looking for in this vast ocean. The content curator can easily offer a quality content of relevance to anyone who is in need of organized information. The role of content curator is certainly important because for a common person, finding the required information and using it in appropriate manner will require a lot of time and attention and in current world; time is the most costly resource that needs to be preserved.

However, who will need this highly specialized information or content assets in an organized manner and why?

According to the Content Curation Adoption Survey of 2012 that was organized by curate, the vast majority of Internet marketers believe that content curation is an important and beneficial strategy and they seek for content curation regularly. The main reasons for why Internet marketers are interested in the process of content curation and why are they actively seeking for content curation can be summarized as follows:

1) Very Little Relevant Information in the Vast Pool of Content

It has been observed that finding relevant content on a particular topic is becoming more difficult while the quantity of content is abysmally increasing. While Internet is a vast resource of content, finding the best and most appropriate content on a subject is becoming more difficult. Internet marketers feel that specific websites that offer curated and properly organized content offers a good solution for their problems. These websites offer links to relevant content and that reduces the burden of marketers to search for the appropriate content. If the best and most relevant content about a topic is a diamond, the curated websites prove to be a mine of diamonds. Those websites that offer regular quality content, gains greater support of marketers.

2) The Race to be the Thought Leaders

With the help of appropriate content curation, marketers can attain success in establishing their position as the thought leader. Marketers want to attain as many customers as possible however, the Internet customers are becoming smarter and they seek for a reputed and trustworthy brand before they may engage in Internet shopping. Those marketers who succeed in providing quality content gains the trust of customers. This content includes original content produced by the marketers and producers specifically to increase their sales and it also include the relevant content from market experts and competitors with their specific presentation and comments. By using this highly refined content, marketers can establish the trust of customers and once they succeed in establishing themselves as the thought leaders of the market, they find it easy to attain regular customers.

3) Increasing Influence of Social Media

As the number of active users of social media platforms like Twitter and Facebook is increasing, people are heavily relying on social media as the perfect resource for relevant and timely information. As a result, marketers are trying to implement the strategy of on-demand news. Since marketers are required to create positive influence on these social media platforms so that they can attract more and more potential customers, they need to keep providing relevant information regularly on these social media websites so that they can share best content online. With the help of content curation, marketers can easily provide relevant content at a swift pace so that they may maintain and increase their influence on social media platforms.

4) Content is the King

Internet is virtually becoming the biggest market of the world and one can attain all major brands of any product or service directly online. These brands are actively engaged in providing relevant information, future prospects, customer services, and online shopping facilities to attain more customers. The success of Dell has encouraged almost all brands to experiment the idea of e-commerce which is increasing at such a high rate that e-commerce is actually offering a tight and tough competition to the biggest retailers of the world. This increasing influence of e-commerce has made it mandatory for online marketers to remain easily accessible and easily notable to those who are looking for specific services and products through search engines and social media platforms.

However, to become significantly visible on search engines and on social media platforms, the marketers need to provide best, most relevant and unbiased content regularly in an organized and attractive manner. To improve SEO, providing original, relevant and organized content is very necessary. Content curation helps marketers to provide unique and most appropriate content in an unbiased manner and that increases their visibility on Internet.

Thus, content curation is very important for the marketers to increase their visibility on the Internet which results in increased potential and regular customers and provides higher profit margins for the brands and their marketers.

Importance of Content Curation for Freelancers

Content curation is very important for freelancers too because marketers often take help of freelancer content providers to attain original, valid, relevant and unbiased content with proper search engine optimization to attain better visibility on Internet.

For freelancers, content curation is professionally essential while it can also be an interesting means of learning too. A freelance needs to provide relevant and latest content about a varied category of subjects. While a freelancer can take help of enormous amount of content easily available on Internet, they need to be especially skilled in acquiring and organizing the relevant content in an appropriate manner so that it can be shared effectively to attain the required purpose. Content curation is necessary for freelancers because it helps them to remain aware of the latest and most important information about any issue that needs to be covered under the content that they have to provide. For a freelancer, content curation is the process of remaining aware and alert about their field and subjects for which they need to produce content so that they can remain efficient at their job.

However, it is not easy to be a skilled content curator. The biggest problem in content curation is the enormity of content available on the Internet that a content curator will have to research to organize it in a meaningful manner within a short period. This can be very cumbersome and distractive but with the help of proper techniques and technological tools, this task can be made easier.

The Process of Content Curation

Content curation is a continuous process and a professional content curator will have to adopt this process in his daily life. The very first step of the process of content curation is to decide for a relevant topic, subject or issue. Once the goal is set, the next step is to seek the relevant information. While seeking the relevant information may seem to be burdensome, it is necessary and yet, it is just a step of content curation. Once content curators have attained enough information about the topic or issue, they need to analyze and refine the available information to make a proper sense out of it so that the content can be rearranged according to relevancy and appropriateness of it to achieve the goal. One may do so by writing a blog post containing the links of organized content to offer a particular meaning of what they have researched, refined and organized.

Making a relevant meaning out of the available content is a tricky job because it is necessary to provide appropriate meaning through your presentation in such a way that it meets the requirements of the content curator’s subject and goal. After this, the content curator needs to present this highly researched, refined, and reorganized content in an appropriate manner so that they may attain largest possible audience. It is necessary for the content curator to confirm that the presentation is in such a simple format that any person can not only understand it but can also make best use of it with ease.

Tools of Content Curation

Obviously, the most difficult and burdensome step of the process of content curation is to find relevant information. While one can search about any topic or issue on any search engine such as Google, one may fail to attain quality information through simple search engines to perform content curation. However, there are enough tools to reduce the burden of seeking appropriate information and a content curator can make better use of the following tools of content curation:

 

  1. Scoop.it:

    instantShift - Scoop.it

    The tagline of Scoop.it is “share ideas that matter” and it explains this tool perfectly. Scoop.it is currently considered as the best content curation tool which offers a series of content based on niche subjects and issues. After deciding for their choice of subject, a content curator can easily attain quality content. The next step is to read and analyze the contents and save them as a collection. One can attain everything including articles, videos, Facebook statuses, Twitter lists, and so on.

  2. Storify:

    instantShift - Storify

    Storify is another quality service or content curation tool that can be used to attain optimized results. Create an account on Storify and start attaining the best content including tweets, blog posts, videos, images and so on. Storify itself provides the content in different niches in a series of meaningful presentations that can be used to attain better results.

  3. Pearltrees:

    instantShift - Pearltrees

    Anyone looking forward to be a master content curator cannot ignore the service of Pearltrees, which is one of the finest curation tools. While one will attain a number of images, articles, videos, tweets, and so on to analyze and observe. One can simply use the browser application to “pearl” the content page that seems relevant, attractive, meaningful, and usable. One can easily share their “pearl” pages easily through Facebook, Twitter, Email, or on their own website.

In addition, there are a number of other highly efficient content curation tools such as StubmleUpon, Pinterest, Delicious, BagTheWeb, Bundlr, and so on that can be used by a content curator to attain appropriate content. However, it will the responsibility of the content curator to analyze, organize, rearrange, and represent this set of content about their preferred niche topic in a meaningful manner.

Content curation may seem to be a hefty task but it is becoming a necessity to maintain a grip on the Internet market. The most important aspect of content curation is that it is not a malpractice or activity of plagiarism. A content curator is not expected to copy and paste information from one content page to other. Rather, the job of content curator is to research the available content on Internet, refine it, reorganize it, and represent it in a unique manner with appropriate references and citations for the original content providers. It is very necessary to maintain the ethical lines of the job of content curation because the marketers that are looking forward to make better use of content curation are strictly looking for ways to gain trust of the customers so that they can establish their brands in the market. When a person simply steals some other person’s idea without offering proper credit to the original content creator, he is simply stealing the content while content curation is strictly the job of sharing the best content in a relevant, organized and appropriate manner.

Stop designing for screen width, design for content

320, 768 and 1024. Do these numbers mean anything to you?

No, it’s not the Da Vinci code, they are the widths in pixels that many designers associate with mobile, tablet and desktop screen widths.

The problem I have with this is that my mobile isn’t 320 pixels wide, my tablet isn’t 768 pixels wide and my desktop screen certainly isn’t 1024 pixels wide. There are hundreds of different screen sizes out there on a variety of different devices and yet we still think of responsive web design as 320, 768 and 1024.

 

What happens to all those screen sizes in between?

I have seen many sites that use these three breakpoints for their designs and simply create 3 static layouts that centre within the nearest width.

This is better than having an old fashioned, static, desktop only site as they are at least serving a one column, simplified version for mobile and a touch friendly version for tablet but then why would you alienate all other screen sizes by not taking them into consideration?

Sure the design will still work on the other sizes but what happens when you have a tablet that is smaller than 768? They will get the mobile experience on a tablet! And when viewing it on a laptop screen smaller than 1024? We’ll just send them the tablet layout and laugh at them for not having one of the 3 screen sizes that we have deemed worthy.

 

It’s about percentages not pixels

When you create your responsive layouts, you should always aim to set as many of your dimensions as possible in percentages. This helps to ensure that your content will grow and shrink evenly through different screen sizes and will do so in proportion to the device it’s being viewed on. This approach will also ensure that your content is always filling 90% (or as much as you determine) of the screen instead of possibly 50% of the screen as the content is centred on a screen size that is a few pixels smaller than the next available breakpoint.

 

Content is king

When choosing your breakpoints, you should always be making your decisions based on where the content breaks and not to device screen widths. Instead of creating a design and then modifying it to fit the iPad screen comfortably, you should find out at what width your content starts to struggle.

I tend to start with a 1400 wide design and slowly make the browser smaller until a piece of content breaks the layout or gets close to doing so. That then determines my next breakpoint. It doesn’t matter whether it is at 1200, 800 or 673, if the content still works then why change the layout?

You will find that you will end up with strange breakpoints such as 477 or 982 and that you may have 2, 6 or 10 different breakpoints. The point is that the content will decide rather than the intended screen sizes that you wish it to be viewed on.

With the array of different devices and screen sizes being released every month, it is impossible to determine a set of definite breakpoints for our responsive projects. The truth is that whilst we are using a variable such as screen width to determine our responsive layouts, we will struggle to serve a perfect layout to every different size but by following a few of the tips above, we can at least ensure that the content is always displayed as best as possible.

Importance of an Attractive Portfolio for Graphic Designers

Like any other field, a portfolio holds great importance for a website/graphics designer. An eye catching design has great benefits. It reflects your designing skills and attract your clients.

Being a website/graphics designer myself, I have met a lot of designers that don’t even have a portfolio. When they get clients, they just send over some of their recent designs. In this way, there clients are unable to review most of their work and there are more chances that they will back off and find some other designer.

 

Why Make a Portfolio?

There are a great number of designers all over the globe and it’s one of the most rapidly growing information technology fields with the growing demand of website and graphics designing. This is a vast field and it constitutes of many sub fields. Graphic Designing includes logos, banners, brochures, flyers, business cards and a lot more. Today, there are a lot of individuals or companies that regularly need some kind of graphic design. Whether it be for online uses or printing purposes.

A portfolio for a designer is the basis of clients whether to hire you for their designing needs or not. Your portfolio demonstrates your skills, expertise and talent.

A design portfolio is compulsory for freelance designers as well as those running a designing company.

Designing a portfolio is not something that you just start doing without any preparation. There are a number of things to consider but before you start designing your portfolio, study the reasons why is it important and in what ways will it help you. This will help you in coming up with more creative ideas for your design showcase.

Following are a few points explaining why a portfolio holds so much importance.

  1. Presents Your Skills

    I have seen many designers’ websites without any graphics. They are just full of text and stories. Mentioning what services you offer and what can you do is not enough. You should show a proof of what your are doing. Your client will not be interested to choose you as their designer unless you don’t showcase your work in that specific designing they want from you. Suppose you get a client visit your site wanting to get a brochure designed for their business but don’t find even a single sample of your work.

    Clients need satisfaction as they are spending something to get the job done!

  2. Makes Clients Trust You

    When you display your work; you make new clients trust in you. Get the testimonials from your old clients along with your portfolio so that the new clients get more satisfied from you. This will in turn bring more customers to you.

  3. Represents a Genuine Business

    There a lot of designer emerging nowadays. Many are talented and possess great skills but still there are some designers that don’t have a proper experience in this field. They have learnt a bit of basics and promise their clients to provide quality work. As there work is not worth showcasing, they don’t show a proper portfolio. This simply results in wastage of their clients’ time when they don’t like the unprofessional work.

    In comparison to this, a buyer will prefer some designer showing his/her work.

  4. Prevents Rejection from Clients

    Everybody has their own choice for designs. Similarly all people don’t like some specific kind of graphics. Some will prefer really professional, clean graphics, some prefer 3D, while others want shiny, colorful designs. Suppose you make specific type of designs and you don’t have a portfolio. You get a client and start working on their order. Soon you will come up with a final design and when you submit a preview of it to them, you get bad remarks. This will not only waste your precious time and effort but you will also get a bit frustrated and end up saying bye to your client.

    Showing a portfolio to your clients before taking their order will prevent these situations. Your client will confirm before if they need some variation in their design from the past work you have done.

After getting to know the reasons to make a portfolio and how much importance it holds you must be thinking ways to make a beautiful portfolio. Yes! It should be highly attractive, and force the people looking at your portfolio to choose you as their designer!

Design an Attractive Portfolio

I am going to give some useful tips and tricks that will lead you to come up with a beautiful design and finally some examples for inspiration!

I am not just focusing on Graphics Designer in this article. But this is also to address the website designers! Most of the graphics designers know how to make a graphics template of website. So if you got skills and can come up with a design on graphics software, it will be way too easy for you. And if you have the coding skills it would be a plus.

Don’t worry if you don’t know how to code an image to working website! You can get it done from any coder for as low as $20 for single page!

Most of the designers have their websites setup already where they offer their packages or services. But I have seen a lot of designers that don’t even have their websites. They advertise their services on different forums or websites. They think that they are getting enough customers but they are not aware of the fact that they are also missing a lot of clients due to some flaws.

Firstly they don’t have a website which is a turn down for clients who look for legitimacy.

Moreover they are not providing a proper compilation of their past work to their buyers. Anybody going to pay for something needs a proof, and a design portfolio is similar to a proof for buyers!

So following are the essential tips that you should keep in mind before designing your own portfolio website! These are the things that really matter and will make your portfolio stand out!

  1. Make a Decent Collection

    Before making a portfolio, do enough work and increase your collection till some extent. Your portfolio should be not be empty. This is a great turn down for clients and they will probably think that you are an amateur and you don’t have much experience in designing field. Just to give an idea I would suggest you to have atleast 15-20 items in your portfolio. But still you can have more. But remember don’t overfill it. Just keep a balance.

    You can tell your clients later that you have a lot more designs and you can show them if they want something more.

  2. Filter Your Design for Portfolio

    Take a hard look at your past work. Which of your designs are catchy? Separate the work you thing is best. Don’t include the designs you think are not much attractive as compared to your other work. This may cause your client to loose interest in getting their job done from you.

  3. Categorize Your Portfolio

    Your goal is to convert your portfolio visitors to your customers. To do so, you have to try your best to make your portfolio easy on eyes. It should not become a difficulty for your visitors. Don’t just make it jungle of images. This will just annoy your visitors and they will most probably end up closing the window.

    Separate your designs according to the categories. Like if there are logos, banners, business cards, flyers, brochures, just separate them up under different partitions with a prominent title to distinguish it from other designs. It helps the buyers in a way that they will look for samples in that specific design category they want to get a design from.

  4. Variety in Samples

    As I discussed earlier in this article, that all the clients do not have same choice. Your design may have a preference of one client and it may be rejected by the other so don’t ever do the mistake of adding same kind of designs in your portfolio.

    Have a variety of samples, so your client may have an idea that you will come up with something unique, different and something new for them. On the other hand if you have all same kind of designs with similar effects used in all of them, your client will not be much interested and you may loose them. Also add any photo of your print work. I myself request a photo of printed graphics I design for my clients.

  5. Include Testimonials

    Include testimonials from your past clients somewhere in your portfolio. Don’t just throw it somewhere. Instead be clever and place them in an efficient way so they are as prominent as your portfolio items are. Testimonials help a lot in motivating your visitors to become your client. It is a quick way to build trust with visitors. Many designers ignore this factor but testimonials help a lot. Let your client write a little about how was their experience to work with you.

  6. Show Your Work Properly

    Many designers add small thumbnails of their design work or show a little part of it due to the fear that someone will copy their work. Don’t do that, instead host the full-sized images on your own server and link the thumbnail or small image to the full size image, or make some functionality so that the image may zoom up on clicking. Avoid linking your samples to the clients’ website for which you made that design.

    People do not always keep same designs, they might change it and it will be a problem for your further clients later.

    Same thing applies to the web design projects you have worked on. Host them on your own server instead of linking to external websites, you may give a link though but keep a check if your client has not updated their site.

  7. Make Your Layout Simple

    People in search of a designer are looking for a website with an easy navigation. The layout should not be over done. It should not be filled up with a lot of colors and too much fancy techniques. The layout as a whole should look simple, attractive and everything on the website should be easy to understand. Don’t confuse your clients in any way. Make your contact details easily accessible. Remember contrast is your friend and you have to play with it in a creative manner.

  8. A Little About Yourself

    Having an ‘About Me’ page is also a plus point. Do not take it as granted. You have to deal with your visitors in a friendly way. For individuals, it’s a place to show off who you are as a person. Tell about your qualifications, experiences and expertise in your field. To make it more attractive, add any kind of picture of yours, a portrait, sketch, caricature or anything representing you.

    Moreover giving links to your social networks profiles from here is better. It builds more familiarity and makes you more approachable if the client is in need of a designer ever again.

  9. Keep Your Portfolio Up to Date

    Design your portfolio in such a way that it is easier for you in future to update the pieces.

    It’s a common fact that as you make more deigns and gain more experience, you start to like your new design more than the designs you had made a couple of months or some time ago. So if you think that there is something in your portfolio which seems to be odd to you then there is no need to keep it anymore in there. Just replace it with your new designs. Keep on revolving items. It gives a good impression on returning customers.

I have added some really attractive portfolio designs for inspiration. It will give you a better picture of how you have to get creative and design your own unique portfolio.

In this portfolio, the design has given a very easy way to navigate around. The animation gives access to contents of website with keyboard shortcuts.

The designer has beautifully embed the images in a frame. The frame effect makes this portfolio unique!

This design is full of creative ideas. The designer has wrapped all the necessary components of a portfolio website in a single book shelf. There are no unnecessary items in the shelf. Every item gives the information about that designer.

Simple yet attractive design. This website would have been so dull without the lightning or glow effects used. They have given life to the design. See how little sprinkles and toppings can make your site delicious!

The design is an example of use of many colors in a proper and beautiful manner. The abstract not only contain colors but also represents the name of designer along with easy navigation beside.

Here is another creative artwork. The designer is welcoming his visitors and requesting them to have a seat. This builds a friendly environment and look at the way how designer has introduced himself to visitors. Such techniques leave impressions in the mind of your visitors.

If you have a look at the complete website, you will see how in only a single page, the designer has added all the information a client is seeking for. Starting from his introduction to a few recent designs followed by his service offerings and then finally an easy contact form at the bottom.

And at last, simple yet effective about us page. It consists of a paper background effect, little sketch of the designer, and some introduction to him.

What makes a good logo designer?

As strange as this may sound for some, not every designer is a good logo designer.

I’ve met many highly talented designers who are terrible at designing logos. Actually, some of the best designers I know are so aware of that, that they even prefer to not take on this type of project.

The process of creating a logo, at least on a professional level, can easily become a long series of complex tasks that don’t necessarily have anything to do with designing, and to be successful in doing that the designer needs to have a quite peculiar mix of skills.

If you are a designer looking to specialize in the identity industry, this article will help you identify your strong and weak points. If you are an entrepreneur looking to educate yourself before hiring a logo designer, this article will help you understand part of the complexity behind the process of creating a custom logo for your business.

 

What makes a good logo?

Before getting onto the main subject of this article, we must define what makes a good logo. After all, it’s only by reaching an understanding on that concept that we will be able to go ahead and analyze which skill-set, experience and personality would be required from a designer to be good with the creation of logos.

So what makes a logo, a good logo?

In one sentence a good logo must be fit for purpose, adaptable to a variety of multiple sizes and materials, stand the passage of time without looking old, and be memorable enough that once you look at it, it can be easily remembered.

Overall, when it comes to logo design there’s no right and wrong, but instead just good and bad practices. The diagram below showcases what is widely considered to be the best practices in the identity design industry.

The quick dirty Venn diagram of the brand identity design.

While looking at the above diagram, what skills do you think would help to create a good logo?

One way of answering this question is by analyzing each characteristic separately, and then associating a different skill set to each one. For example, what skills would a designer require to design an iconic logo? Surely understanding the concept and value of iconic design for starters, but there’s plenty more.

Spend a good amount of time thinking about that and you’ll eventually notice that the great majority of skills needed to design a good logo have little or nothing to do with the actual activity of producing design. Surprised? Keep on reading, and you’ll get the idea.

 

Be good at research

One of the most relevant skills in the process of becoming a good logo designer is the ability to find relevant and useful information. Think about it: without knowing details of the client’s industry, the market and understanding how competition uses their identity to market themselves, how one would know they are designing a relevant logo?

But that’s what the briefing is for, right?

Yes, you’re spot on, but the truth is that the great majority of small clients, and starting entrepreneurs, don’t know how to prepare a briefing. Heck, some of them don’t even have this data available when they approach a designer for a logo.

Sometimes even larger organizations don’t understand the peculiarities of the logo design process, and fail by not providing enough information in their briefings. Knowing where to get the date, and what questions to ask is an essential skill.

Ultimately this skill will help to direct the design to a relevant solution.

 

Be able to think conceptually

Once the designer has all the information relevant to the project — which should include the client’s briefing and data from the designer’s research at least — the following step would be to analyze the data to define the boundaries of the project.

In order to do that, the designer should look at the data by using analytical tools such as brainstorming, mind-maps, color-wheels, mood boards or any other analytical tool that help to better understand the identity problem and identify what may or may not be a good concept to be explored.

I guess this is easier said than done!

Sure there’s a lot of practical work here, but once the designer has a clear vision of the big picture, being able to find a solution which is aesthetically pleasing but also has a deep conceptual connection to the initial identity problem is, more than anything else, what makes a good logo designer.

Think of it in this way: a logo without a concept is a logo without a soul.

Being able to think conceptually, and find hidden meaning in between what initially would seem to be unrelated data, has a profound impact in the process of creating a good logo, consequently it is this skill that will help to direct the design to a unique solution.

 

Be able to plan ahead

With a unique and relevant solution in hand, now all is left for the designer to do is to guarantee the chosen solution is versatile. In order to do that the designer needs to be able to plan ahead. Simple, uh? For what its worth, I believe this to be the easiest skill to master.

Quite basically all the designer has to do is to design the logo with context in mind. Will it fit well in a website? A twitter avatar? Printed in a one color brochure? Or full color on a business card? Stretched on a big poster? Or on the side of a vehicle? Reduced to the size of a promotional pen? Or embroidered on a t-shirt?

If the final logo can adapt to all of the above situations—and more—without losing any quality, then job done!

If not, then this solution is probably not the best—usually, is not iconic enough—and a quick look at the briefing topped by exploring another round of concepts tends to solve the problem. Nothing that a few extra hours of design won’t help to solve.

Nonetheless, here, right here, related to this skill, lies a problem.

When it comes to logo design, small businesses owners and starting entrepreneurs tend to not plan ahead, at least in design terms, and approve logos completely out of context, and for that reason they fail to understand why some solutions are just not right for them.

The risk of ignoring the need of versatility is bad for the client as it may result in the need to spend more money to rework their logo, and that’s the least of their problems. I’ve had cases where small business owners had thousands of dollars invested in stock with a logo they learned later on it was not the right for them.

And that’s the cue to the next skill, which in contrast, I believe to be the hardest to master.

 

Be a good communicator

I’m sure that many would say that being able to communicate your message across with success is not only a skill good for a logo designer, but for any designer, or even anyone in almost any career. That’s true, but there’s a special reason why a logo designer must be a good communicator.

The logo designer is usually the one faced with the responsibility of educating clients about the realities of the design world.

Day in day out, people are starting their own companies, and on the great majority of occasions, starting entrepreneurs have little idea of the role design will play in the success of their business, and usually they place very little importance on it.

Here’s the challenge…

When approached by someone who will most likely have little to no knowledge of the importance of design to a business, the logo designer must be able to help change the clients paradigm towards design, not only for the success of client, but also for his/her own success as well.

Designers tend to overlook this step, as it can be extremely time consuming, and clients, at least initially, hardly put any value to the lengths a designer would go to help educate them about design.

If you are looking to specialize in the identity design industry, this is, as far as my opinion goes, the most important non-design related skill you should be working on; together with a lot of patience too.

The best logo designers I know are also excellent communicators.

 

Conclusion

Designing a logo, at least from my perspective, has a lot to do with solving a puzzle that allows for many solutions. Some solutions are going to be great and others not so much; but if you don’t know what skills you need to play the puzzle, it becomes really hard to solve it.

With more and more people entering the design industry, it seems that looking for a specialization is becoming common place. If you are looking to specialize in the identity industry, training yourself on each of these non-design skills will certainly put you on the right track, but you must remember that ultimately you must be a good designer first, and for that there’s nothing better than practice, practice and a bit more practice.

Stop chasing screen resolutions

We live in such an exciting time in the world of the web. Technology and standards are moving forward at a rate that’s perhaps both faster and more exciting than ever. As things change, so do our habits, and one area that I think has seen bigger changes than most would have to be the change in resolution that our devices are now running.

Resolution is a funny thing to measure; it’s not a physical size change, but a clarity change. It’s not making images, brighter, or more rich in color, but making them denser. It’s also something that people seldom understand the value of until they see it for themselves.

Of course, when we get a taste of high-resolution displays, we’re hooked. And we all want our websites (and the websites of our clients) to look awesome on the devices that are sporting these displays. Many web designers are racing towards that goal by creating images for each new resolution that comes our way. Or, as I’m calling it in this article, “chasing screen resolutions”.

 

An introduction to SVG

Many of us know what SVGs (Scalable Vector Graphics) are. We’ve seen it on the W3C HTML5 website, under “3D, Graphics & Effects”. SVG is a standard HTML5 technology, that displays images with code. Or something.

At least, that’s the general response I got when I asked people about SVG graphics. It’s not really something people are interested in, because its value isn’t fully understood.

I want to show you how to avoid “chasing screen resolutions”, and it just so happens that the SVG standard can help us do just that.

 

The state of retina graphics

When I say “retina graphics”, I refer to any devices that have a screen resolution higher than that of traditional displays, sporting a resolution way above 72ppi (pixels per inch).

Apple famously smashed the 72ppi barrier with the iPhone 4, a device that had a fantastic new high-resolution display, that looks unlike anything else we’d seen before. Except when you used it to browse the web… the web looked rubbish.

The web had 72ppi optimized images. At the time of writing this, most of the web still does, two years after the launch of the iPhone 4.

Now, we have all sorts of devices with Retina quality Graphics. It’s slowly making its way across the entire Apple product line, extending to the iPod Touch, iPad and even the latest MacBook Pro. Smartphones are popping up all over the place with high resolution displays, so much so that a “standard” resolution display almost feels old-hat at this stage.

Still resolution dependent

When the web design community overcame the blurry images problem with conditionally loaded @2x images (images that were created to be twice the size of their original counterparts, loaded only on high-res devices), the web looked good again, for the most part. Some designers even advertised their websites as “resolution independent”.

Of course, what they really should have advertised their sites as was “optimized for two screen resolutions”.

Devices will keep on getting better, resolutions will keep on getting better, and and the web will continue to be enjoyed on an increasing number of form-factors. What about the inevitable future @3x? What about @4x? What about if the standard “1x” becomes unnecessary? What makes 3x “@3x” and not “@2.5x”?

Messy indeed.

What’s more, this sort of technique is hardly widespread. I browse the web on the aforementioned MacBook Pro with Retina Display, and most of the web is sadly exactly where it always has been since the iPhone 4: blurry. Creating all of your web imagery again is an arduous sounding task, especially when the whole web design world has been designing with bitmaps for so long.

Unzoomable web

Even today, with our @2x images, we still can’t zoom in on web pages without them going ugly again. Text manages a zoom just fine, but by comparison, images just cry out for those future @4x exports (something that no one will deem appropriate to serve just on the off-chance that someone might like to zoom in 4x on your RSS icon).

 

Going truly resolution independent

The problem is with bitmapped images. We’ve always known that they don’t upscale, and now is no different. What we need is vector graphics on our websites. Vector graphics are calculated by a series of instructions, rather than baked onto a grid where each pixel represents a color. Enter, SVG.

One size fits all

Since SVG graphics are vector graphics (hence the name “Scalable Vector Graphics”), they’ll look awesome on yesterday’s, today’s and even tomorrow’s screen resolutions. Additionally, due to the formulaic nature of vector graphics, you can zoom in on any device and images will stay looking great.

Faster load times

Making a 2000px by 2000px image, to a web designer, sounds nothing short of ludicrous. It would take far too long to load, it would bring some mobile devices to their knees, and the 4000px x 4000px “@2x” version would be craziness. And as resolutions get better and better, it’s simply unsustainable. With SVG, since it’s a vector format, it doesn’t matter if the image is 20px or 2000px; the load time will be exactly the same. The only thing that makes a difference to the load times is the complexity of each image file.

You can use it today

SVG may not be supported across the board, but Modernizr can feature-detect it. By serving a SVG and non-SVG version, you can reap all the benefits of SVG, while leaving legacy browsers with a @1x PNG. It’s as simple as this:

.no-svg .logo { background: url('logo.png'); }
.svg .logo { background: url('logo.svg'); }

 

Limitations of SVG

It’s not difficult to create SVG graphics out of any vector based image. Many pro apps such as Adobe Illustrator and Inkscape can export to SVG natively. There are a few things that you’ll need to know about SVGs for the web, however.

They can’t contain bitmap images of any kind.

Sure, you can add them in SVG authoring applications such as Illustrator or InkScape, and save your work as SVGs, but they won’t render where it matters: your web browser. CSS wizardry will be necessary to load a bitmap on top of the SVG where appropriate.

Can take forever to load if complicated

If you make a complicated SVG, you’ll be hit with load times not unlike the aforementioned 2000px x 2000px image. You wouldn’t want to draw a complex painting in SVG format, for instance.

Gotta keep it simple

Apps like Illustrator and Inkscape can do much more than your web browser can handle. They’re full blown illustration apps, not web SVG creator apps. In fact, it’s safe to assume that 90% of the functionality that those kinds of application offer will be unavailable to viewers on the web. If you’re familiar with vector software, you’ll need to learn alternative ways to create the effects you’ve come to love.

Try to learn the language

SVG code isn’t something you can “see in your mind” like you can when you read HTML. It’s a series of instructions mapped respectively against one another, element by element, layer by layer. Unfortunately, as of today, you’ll probably have to dip in there from time to time, since there are some results even Adobe Illustrator doesn’t offer.

For instance, images in Illustrator have a canvas you draw on; it’s a set width by a set height. That’s great, but if you want to control those details in the browser, you need such information to be stripped away from the SVG itself (note: some browsers will interpret your CSS irrespective of any declared SVG dimensions, but not all do). It’s not particularly hard, but it can be a headache. It’s well worth spending a bit of time getting to know the language, so that you can manipulate SVGs even further.

 

SVG in the Wild

Logos

Logos should typically be in a vector format anyway, so they’re a great way to bring SVG into your website designs. By using the markup above, you have everything that you need to take your first SVG elements online.

Icons

Icons are a great candidate for SVG. So much so that I’ve created a full icon set using SVG graphics. The scalable nature of SVG means that the icons can be used at any size, accommodating a broad range of site designs.

Animations

Animations also make a great case for SVG graphic usage. Since animations are typically tethered to a fixed width and height, SVG goes some way towards helping animations get responsive. Flash used vector graphic elements, now HTML5 animations can too.

Background images

Background images have always been a tricky point for web developers; the potential load times, as I mentioned above, can be crazy. SVG background images can be as big as you like; they still have snappy load times providing they aren’t really complex.

Conclusion

All in all, resolution independence is a fantastic goal for web designers and developers alike to strive towards. It’ll even mean their design tastes will be out of date before their site imagery is. While it’s important to approach them with your eyes open, it’s pretty clear to see how SVG graphics can move you closer to a future of total resolution independence.

When you load up an SVG enabled site on a high resolution device like an iPad 3, and you zoom in, you’ll be sold.

I hope this article goes some way towards encouraging resolution independent thinking in web design and development, and I hope that it has encouraged some of you to think about how SVG can work for your next site.

I’ve been in the SVG pool for a while, and I have to say, the water has never been more lovely.

Principles of Creating Effective Web Designs to Attract Visitors

Visual design is important however, the website’s fate depend more on the usability and its efficacy. While you are designing a website, make sure it is a user-centric design because users’ are the most important aspect behind any website’s success. If your website has a feature that is problematic or non-functional from users’ end, you should simple remove it. Precisely, an effective design will always work best for your website. Thankfully, the designers’ of today has realized the importance of an effective web design due to which web designing industry has seen a significant change in web designing. The best part is that visitors do not have to face those flashy advertisements and loud talking. The websites have become more interactive.

Instead of getting into implementation details of various features, in this article we will be focusing more on significant principles and approaches, which designers should use in a proper way to create an effective web design.

Principles To Follow For Creating An Effective Web Design:

Before you start following any principles, it is important for you to understand the mentality of your users. Start thinking from a user’s perspective and understand their ways of interacting with a website and its features.

Analyze User’s Mind:

Putting yourself in a user’s shoe is not that difficult. Analyze yourself when you are in a store and the way you act as a customer. Yes, this is exactly the way your visitors act when they see your website. Honestly speaking and we all will accept this fact; most of don’t even read the entire text of the website. Your user will quickly scan your website and whatever feature attracts him in the first place, it will be clicked. This is normally how a user will browse through your website. Following are a few things that users’ will appreciate in your website:

–       Quality content:

Users’ are always looking for quality content and if they find desired content on your website, they will ignore the minus points of your website i.e., layout OR flashy advertisements. So, make sure you provide them with quality content.

–       Scanning the content:

Highlight important points in your website. Always keep in mind that users will not read the whole content, they will only scan it.

–       Users are always busy:

Web users do not have much time and patience to explore your website. You should work on providing instantaneous satisfaction to your visitors, as a web designer.

–       Users’ don’t always make the best choices:

Your website should have a good optimization because users’ are used to click instantly on links they like instead of searching in the first place.

Principles of Effective Web Design:

If you want to a have an effective web design, you should follow the rules mentioned below:

1. Simplicity:

Your website will adaptable for users only if it is not-so-complicated. I know and I understand that you want your website to look great however; this does not mean that you should fill your page with nonsense. The distractions will only confuse your visitor. So, make sure that you keep your website simple and if you are a good designer, you will make sure the simplicity looks attractive too.

2. Don’t test users’ patience:

In every feature that you provide to users’ through your website, make sure that requirements from users’ end are nominal. If you pop-up long forms in front of a new user, he will simple leave your website and may never visit again. A very good advice to all web designers would be to keep the requirements minimal related to personal data because this is exactly where a user will get annoyed.

3. Avoid Waffle – Only facts:

As mentioned above effective content if very important for any website. Users’ don’t like it when you waffle and exaggerate the facts. If you want to win the trust of your visitors, make sure you mention everything clearly and precise. Only mention the important stuff and rest of the useless stuff should be scrubbed out.

4. Expose your features properly:

I personally love one thing about modern web designs. They provide a proper guidance to users in order to begin their surfing on the website. You must have seen steps ‘1-2-3’ and this is exactly what I have been talking about. This is a great way to make users’ see the features available in your website and how to reach them.

5. Effective Writing:

The content of your website should be written in web style catering to web users’. You need to talk business and avoid anything else. Also, make sure you use the web terms for specific features on your website. For instance, ‘Sign Up’ is always better than ‘Start Now.’ Effective writing includes; precise and to-the-point sentences, scan-able content, which includes headings and like I said, common web language should be used.

6. Avoid distractions:

If your website doesn’t really have anything to do with social networking websites, try not to add ‘follow’ links on the main of the page. Yes, promoting your website on social networking websites is a great way to get an increase in traffic however; it can always prove to be a distraction for users. If you want your users to focus on their main goal, avoid such distractions and remember these are distractions only if your site does not need them.

7. Effective usage of White Space:

White space’s importance is often underrated. White space can actually make your website look attractive and welcoming. It gives users a break from all the new complex web designs. White space is actually very effective. Why? Because it brings the simplicity effect, is soothing to the eye, makes layout look beautiful and last but not the least, the content can be scanned easily.

8. Web conventions are good:

Just because your website’s design is conventional, it does not make it a boring one. In fact this is a great way to save your visitor from learning and guessing process. Visitor will already know where the features are and they will not have to find them.

9. TETO Principle:

TETO is a casual term used for test early-test often which means testing your website is very, very important. You must know that testing of a website should be a repetitive process. You should conduct usability tests to make sure that your web design is an effective one.

10. Do not make it difficult for users:

Confusing, misleading and putting your users in a difficult situation, is not good. I have seen websites asking for Zip code and not many of us know the correct one so why ask?

Conclusion:

Above are a few features that a website should possess in order to be an effective one. Bottom line; if you really want to create an effective web design, follow the above mentioned rules.