All posts by Ali Altaf

Technical writer and editor at Dezine Geek.

12 Predictions About Web Design In 2015

The New Year’s Here, let’s just hope our new website does too in all its glory. We’ve had our design finalized, so as the Htmlization, and we are just waiting on our chief developer to pick up his pace. Developers, man! They’re all same and always over worked.

Actually, we’ve all been pretty busy and that’s one reckless excuse, but believe us when we say that- we are like one of those construction workers who would put a bucket below their own leaky ceiling because they just have so many homes to tend to!

But besides being busy, 2K14 was a great year and very happening- not only for us, but for the whole web design landscape. There came some very amazing practices with the code, new and improved design trends, exhilarating color and typography schemes, layout mashups and so much more. Among these spectacular innovations in the design industry, some held their ground and made history while some were fleeting.

So we waited to see if anything new pops up on the radar and decided to predict what design & development practices will continue to reign with staying power in 2015. This is what our today’s post is going to be about. So let’s get to it.

1. Responsive Web design Is An SOP

 12_predictions _img_01

Responsive technique which came out as an alternative to mobile specific sites and adaptive layout has solidified itself. Moreover, it has become a standard operating procedure in web development. So you need to have a really good reason for not being responsive. There may be some differences in the implementation of responsive technique, but over the period of three years no one has said, “Let’s Dump Responsive” rather, it is glorifying every day. Rest assured Responsive web design will be staying in power in 2015.

2. Can Responsiveness Be An Option, May be!

12_predictions _img_02

About, responsiveness- Yes! It has become an integral part of web designing for a majority of business owners. But there is and will always be people who will choose other options –Like a mobile app or a different mobile specific website. Now these folks are not a minority and by no means are they under-privileged to get a responsive website. You can Google “popular websites that are not responsive” and find out that there are business tycoons not following the responsive trend.

There can be one too many reasons for not getting a responsive site like your business ideology, goals and target markets. We believe that in the year 2015 on one side where businesses will widely accept responsiveness as a standard, there will also be businesses that will choose other solutions. Because of the progress & availability of advance web analytics systems, businesses will be more vigilant to choose what solutions will suit their interest and goals.

3. Ghost Buttons Will Not Disapparate

12_predictions _img_03

The minimalist design technique came with a lot of complementing features that gave it the look and feel for which it became popular.  Ghost buttons was one of them things and 2k14 saw it paring with almost anything to give amazing web appearances- like the subtle hover animations, large hero areas, large background images and videos. Considering this, we can say; look out for ghost buttons in 2015

4. Typography Will Rule

12_predictions _img_04

When type-kits were expensive only the big guys had all the fun with beautiful fonts and typefaces. Startups with minimal budget, especially those with WordPress were left with little to no options when it came to typography. But not anymore because now, stuff that previously asked premium is becoming cheaper if not free. Google Fonts is one such blessing with a library of amazing fonts all for free. This means that designers now have more freedom to bring their skills to the table with a smaller budget.

This also enables WordPress theme designers to bring more typographic flexibility in their themes. With researches hinting that responsive or large & prominent text is the essence of a readable and engaging website, this makes stylish and type-centric designs attainable for every website owner out there.

5. Bigger Background Images & Videos As First Impressions

12_predictions _img_05

Not only the text is getting bigger and prominent on the web, but images too. Large, beautiful images & videos used as backgrounds are becoming a staple of modern web designs. This is one of the simplest ways of a making your website stand out. This wonderful technique coupled with larger design style and philosophy is not at all gimmicky but elegant and powerful.

2015 will see, images and videos take center stage in amazing new ways. Not to forget responsive designing which will also sprout new ways for displaying dominant colors for backgrounds and optimizing these images for minimum load on servers. 

6. Scrolling Will Take Over Clicking

12_predictions _img_06

As the Mobile web continues to grow and revolutionize the web design towards a more enjoyable mobile experience, clicking will be subsided by scrolling. This is definitely easier to do, intuitive and reduces load time. Furthermore, scrolling enables a dynamic interaction between the user and website.

Perhaps, the most impressive trend that appeared in 2k14 was the concoction of long scrolling with parallax- commonly known as parallax scrolling animation. With tech giants like Apple & Google adopting parallax scrolling animation, we are sure 2015 will see more of this trend.

7. Card Design Will Get Better

12_predictions _img_07

Card design, although not new, but has proven to be a fantastic option when you want to keep things modular. If there is a lot of information or content to display, card design helps to keep things crisp avoiding a sloppy or disorganized look. It not only enables visitors to browse a lot of general data, but prompts them to dig more.

Simply put, Card design is versatile and clean which is exactly what the web needs. So expect to see more of it throughout 2015.

8. Flat Design Will Grow & Improvise

12_predictions _img_08

After emerging in the industry and taken in different and amazing directions, such as Microsoft’s UI language, Apple’s new aesthetic approach and Google’s Material Design – the flat design trend is in full bloom. It has achieved a lot of momentum in the past year and shows great promise to grow big in 2015. 

While some argue that flat design has issues in terms of user interfaces, but the general consensus agrees that it’s a favorable and modern technique for web design. This is because flat design counters the way we consume content served on web pages through minimalist principles and makes websites lean, fast, content oriented and clutter free. This allows visitors to interact more with the web site without any distractions.

9. Parallax And Microinteractions Will Stay

12_predictions _img_09

As mentioned above parallax is considered as the most impressive trend in 2014. The majority of sites is adopting parallax and coupling it with other techniques to give out highly dynamic impressions and storytelling experiences. One of such coupling with parallax like parallax scrolling is, parallax with Microinteractions.

Microinteractions are contained moments or experiences that come with a product such as modules or extensions. These revolve around a single use case, but give a playful experience to the visitors and promote engagement. We have seen plenty of WordPress plugins that use amusing Microinteractions to promote users to sign up, subscribe and provide general info. With parallax, Microinteractions take user engagement to a whole new level. The advance storytelling theme of parallax just fits great with modules with Microinteractions and I’d love to see more WordPress theme and plugin developers to start thinking in this vein.

In 2015, we can expect to see more designers integrating these elements into their designs.

10. Interactive Storytelling Has A New Meaning

12_predictions _img_10

Unlike normal assumptions, Storytelling in web design doesn’t mean that each page of your website has to tell a fairy tale, yarn or a bit of fiction. This is not what interactive story or narrative is all about. What it really means is that you turn the concepts that drive your brand, its elegance, creativity etc , and everything from your design, to the font you choose to the content and each tiny detail as narrative tools. With them you can tell stories that embody your goals and values and show them in action.

Now this is where most business owners get stuck, to try to work out what their story is, and how to tell it. However, some companies have found a way to do so- for instance, take a look at the Tesla Motors Website.

With more online solutions coming forward to help you showcase your story on the web, Storytelling, from a unique approach will become a traditional aspect of web designing in 2015. Here are two of such solutions you can use 1. Aesop Story Engine, 2.  Readz.

11. User Experience To Become More Personalized

12_predictions _img_11

Using cookies to display the most relevant content to the user is not a new approach. But just as some practices, previously known as spammy (such as the popup) have made a revolutionized return – this technique too has come back with best practices in place.

To name a few giants in the practice are Netflix, which uses it to remember what you recently watched, so does YouTube. I am thinking editorial sites just like eCommerce can use the same technique for return visitors and display a “recently read” sidebar widget and provide quick access to the articles they have liked or commented on – Or perhaps showing them new updates relevant to the recently read/seen items. Anyways, we’ll see more technical uses of this technique in the coming months.

12. Webgraphics To Become An Integral Part Of Web Design

12_predictions _img_12

Providing quick-to-grip information through visuals, which is both interesting & engaging was the main reason for the popularity infographics. They offered an easy way for large amount of information to be conveyed and digested. Much like infographics, a new trend has emerged; Webgraphics!

They convey loads of information through visuals, but unlike infographics, allow the users to physically interact with the information. They are more appealing and have a significantly higher degree of user retention. Consider seeing this webgraphics(above image) as an example.
We believe that more clients will demand Webgraphics as a part of their web design. In 2015 you can expect Webgraphics to rise in popularity and perform as an integral component of modern web design.

7 Reasons Why A Responsive Website Wins In SEO

The mobile web, which is accountable for more than 60 percent of search queries from all over the world, is the future of internet. With smart phones, People today get whatever they need from the internet on the go. This is the reason more businesses today are transitioning from a desktop only web presence to a more appealing and profitable; mobile web presence.

In DezineGeek’s previous post we discussed the easiest way you can make a mobile web presence. We compared the two main contenders of the mobile friendly web designs i.e. adaptive layout & responsive web design and discussed how the latter is far more superior to adaptive in-terms of functionality & UI. Here is our narrative on responsive v’s adaptive.

A responsive web design means that the website’s pages reformat themselves according to the screen size on which they are displayed.

But when it comes to SEO, can a responsive web design beat any other mobile web solution. The answer is YES! Let’s see how responsive web design works wonders for your SEO and is also the choicest web layout by Google.

“Sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.”

Google Loves Responsive Websites

7-Reasons-Responsive-Wins-Img-01-1

Since google is The Search Engine you will focus on with your SEO campaign, then it’s wise to know what Google prefers among websites to choose for its SERPs. And Google Recommends that Responsive web design is the ideal solutions to use for web visitors coming from any channel. Furthermore, Google also favors mobile optimized websites more when displaying searches made on a mobile device.

One URL, One Website

7-Reasons-Responsive-Wins-Img-02-2-2

Some webmasters debate on choosing between a mobile specific website and a responsive website. They are concerned that while avoiding retrofitting, mobile specific websites provide two separate URLs for a same website. On the other hand, a Responsive Website which has a lot of content ideally provides a single URL, but requires long scrolling on a small screen.

In SEO perspective DezineGeek believes that it’s easier to work on websites that have single URLs pointing to home page. having more than one URL pointing to a single website, which is the case with mobile specific website, requires you to put equal effort in getting the SE authority for all the URLs.

Rearding long scrolling, DezineGeek suggests that having a mobile first strategy while making a responsive website is the way around to this problem. This is where you design a website for smartphones up to devices with larger screens. Here is our take on mobile first strategy.

Responsive Websites Have Less Bounce Rate

7-Reasons-Responsive-Wins-Img-03-3

If you have a desktop only website which is sitting pretty well in search results, you are still prone to get a high bounce rate from mobile and tablet visitors. Since you haven’t paid any particular attention in improving your visibility to mobile visitors, they will find it hard to browse your website on their small screens.  The high bounce rate can become a big problem for your SERPs, Google will interpret this as a sign that your website isn’t offering relevant content which will result in you having a drop in rankings. A high bounce rate may also become a problem for websites that have mobile apps, or mobile specific websites with thin or stripped down content.

A professionally made responsive website will combat this issue by providing all the same content of a desktop in a dynamic and functional way. Without compromising anything, yet reformatting the pages for a screen size in an engaging way- responsive design ensures that the visitors find the information they are looking for and thus, keeps them on the page.

Enhanced User Experience

7-Reasons-Responsive-Wins-Img-04

A user-friendly website keeps the visitors engaged. It makes it easier for them to find, understand and share the content. Above all other solutions, a responsive design is made with an emphasis on designing for users. If your visitors are using a tablet or smartphone, they will be able to view all the content as easily as a desktop user. This also encourages greater sharing of your content. Say you find something on a website that you want to share with a friend who will view it on their phone. If this website is responsive and has an exceptional design, the content will work just as well on their screen as on yours.

A great user experience is also a big ranking factor. This is also the reason why Google is encouraging developers to embrace responsive web design.

Responsive Website Loads Fast

7-Reasons-Responsive-Wins-Img-05-5

Google prefers websites, especially mobile pages to load in one second or less. Hence, a slow website is as good as no website. Now considering that an average mobile page load speed today is over 7 seconds, you need to do better than that. This lapse in page load is due to media queries which redirect users coming from small screens to different URLs. Unlike mobile version pages or adaptive layout, a responsive website design does not redirect users to different URLs. There is just one URL; a smart and only one version of a website that adapts to any device it is being displayed. This significantly reduces the load time of your website.

Now it isn’t exactly shown how much direct impact a slow loading page has on rankings, but google is stressing its importance due to its impact on user experience- and we all know that whatever is good for user experience, is good for Google!

Improves Mobile SERPs

7-Reasons-Responsive-Wins-Img-06-6

In addition to Google’s Recommendation to adopt responsive web design for mobile, it also agrees to rank websites optimized for mobile higher in mobile search results.

Furthermore, with analysts hinting that mobile search would overtake desktop search in 2015, it’s a good idea to get an edge over your competition by making a responsive website now.      

Offers Stronger Link Building

7-Reasons-Responsive-Wins-Img-07-7

Unlike the mobile version or desktop version of a site, responsive design offers a single URL that works on all devices. Previously when we had separate URLs for a mobile site and Desktop site, it was not possible to get them to rank well at the same time in respective search engines. This was because the links to a mobile site were canonicalized to their desktop counterparts.    

Now with responsive design, the effort you pull to make a URL rank higher in desktop searches will pay in mobile searches as well. With this there is also no dilution in page rank, rather your link building profile becomes stronger for both desktop and mobile at the same time.

Bottom-line

After exploding into the Scene in early 2012, responsive web design has become remarkably different from previous solutions that served to display to the mobile audience. A responsive design does so exceptionally well and without sacrificing anything, rather benefits businesses with increased visibility, usability and performance. This is truly a solution for modern websites that want to appeal to modern users; users who usually navigate the internet using a mobile or tablet, but still want their desktop experience to be incredibly smooth.

Go Responsive to make the most of Mobile and Tablet Traffic- Contact DezineGeek for a Responsive Design.

Top 5 WordPress Themes For Halloween

Halloween is here! And for that you need a makeover. Aside from Costume parties and Jack o’ lanterns for your home, get your website or blog into the creepy Halloween mood with our selection of Top 5 WordPress themes for Halloween.

If you are planning to attract Halloween shoppers to your site on this mega sale event, then buy one of the following Halloween WP themes which are best rated by professionals.  So here we go:

1. Hexentanz–Horror Halloween Theme

Halloween-Themes-Img-01

This theme is a Gem! It is responsive, has all the latest features a professional weblog, events website or a seller needs. And it is beautifully made to give a neat haunted-house feel. This is why Hexentanz goes into Number 1.

2. “Halloween” Theme

Halloween-Themes-Img-02

If you love jack o’ lanterns and making sweet treats for the day, then this theme simply called the “Halloween” is for you. A minimalistic work of art, this theme is a perfect combination of creepy, cool and decent. The best a blog, online store, service provider, or even a portfolio could get. Plus, it’s also responsive!

3. Halloween Trick Or Treat Theme

Halloween-Themes-Img-03

Want to showcase your blog in a classy Halloween Style? Then go for the “Halloween Trick or Treat theme”. It has a big hero area, plenty of room to fit your best picks and slogans and a nice slider where you can add multiple featured posts!

4. Jenny’s Halloween Theme

Halloween-Themes-Img-04

Jenny’s is a creatively made theme. With a big hero area, a large slider & choicest colors this theme can be used to vibrantly showcase products, services & featured posts. This “suits-all” theme also comes equipped with all the latest features.

5. Halloween Webblog Theme

Halloween-Themes-Img-05

This minimalist layout for a blog can never go out of style and this theme does it well in a traditional Halloween mood. The theme has a big jack o lantern sneering at you from the back-and capturing all your latest feeds below with your cherry picked categories on the left.

 

Think you need a Custom WordPress Design, with the graphics of your choice and the features of your need. Then Contact Us now to benefit from DezineGeek’s Halloween sale.

Responsive Web Design Vs Adaptive layout, Which One Rocks?

The Mobile web has been revolutionized with smartphones, and tablets with their growing popularity are throwing another wrench in to the gears. Considering this, a website of today must perform parallel and with great efficiency on a low resolution smartphone, a medium resolution tablet or a high resolution desktop or laptop.

This is what a responsive or an adaptive web design offers. Both are basically processes that make a website work efficiently on very small screens, very large screens and at any resolution without sacrificing the User interface or experience.

Over the last few years, the design industry has collectively developed a list of common practices for making websites for the mobile web. Many of these practices involve retrofitting websites to perform on high resolution and down to the lower sizes. While some focus on smartphones first and then work up to the larger viewports, scaling the content as needed.  These practices can be categorized as either a responsive web design or an adaptive layout. Starting with the Adaptive layout, lets briefly discuss what these two are and how do they perform.

What Is Adaptive Layout Design?

Before responsive web design went big, adaptive techniques and layout dominated the industry. Although it’s easier to transition a normal website into adaptive layout, but they require more work if you are making a website in adaptive from ground up- even more than a responsive website. This is also the reason why most people choose this route while retrofitting an existing website to make it mobile friendly.

Designing In Adaptive

responsive_vs_adaptive_01

Before responsive or adaptive web design became a thing, you simply designed a single layout and developed it. However, in Adaptive layout you design for multiple viewports and then go for development. It’s generally easier to begin designing at low resolution view ports and work your way up.  But if you go reverse, meaning if you start with high-resolution and go down towards low, things can end up a little cluttered. The number of viewports you choose to design for is entirely up to you and the developer, but it’s also sensible if you first formulate a strategy based on where you are getting your visitors from and then decide from those view ports.

Developing In Adaptive

responsive_vs_adaptive_02

Developing in adaptive layout is similar to developing a traditional website. You will begin developing the site at low resolution for mobile viewport then you will use media queries to expand the layout for higher resolution viewports.

Keep in mind that the adaptive layout jumps if you decide to test it just by resizing your browser window. This is because you are only targeting multiple common viewpoint resolutions and not all the independent common viewports-which is also much more of a hassle if not required.

What Is Responsive Web Design?

As of today, responsive web design and development is a catch all term and the most commonly used approach for making a website to work on all resolutions. This is because in responsive web design there is technically less work and maintenance as you only have one layout. It can also be more customized for a website, and this is the key feature. Responsive web design also includes fluid layouts which are amplified by media queries at either low or very high resolutions. 

Designing In Responsive

responsive_vs_adaptive_03

Adaptive design lets you have a simple guide to follow while responsive design isn’t so simple. Many designers argue that designing in the browser is the best way to go about responsive. Some even suggest designing & developing at the same time. As in responsive you have to take all the viewports into consideration, there is more work involved on the design side. It is also an ideal practice to keep the viewports in mind, but not the design of any particular one. We also suggest that you should try to work on a middle ground by focusing on mid resolution and keeping in mind that the layout should be adjusted for lower & higher resolution later.

You would also need to keep in mind your existing user analytics and devise a design strategy in according to that.

Developing In Responsive

responsive_vs_adaptive_04

This is where the real fun begins. Once you have designed the layout of your website, you will use the media queries to make it responsive. However, here you will not be defining set viewports; instead you will manually resize your browser until you see breakage. This is when you will set your breakpoint width and add a media query to fix design breakage and continue. The ideal way of doing is from a high resolution device so that you can see and test all viewports. Once you have worked for both low and high resolution, move on to final testing.

Responsive Vs Adaptive

responsive_vs_adaptive_05

If the agenda is to perform exceptionally well on all the devices and screen resolutions, then Responsive web design and development is by far the best choice to make. But in some cases especially for complex web apps an adaptive layout can serve visitors better. That being said, there are some businesses that choose the concoction of both the solutions while inclining majorly towards responsive web design. This is because the idea is to have a rock solid display and experience across all mediums which is made relatively possible and budget friendly due to the technologically advanced responsive layout. Plus, most of successful startups of today, suggest that their key to convert on all the platforms is because of a well styled responsive website design and creativity which transforms the experience even more.

It is also worth mentioning that if you still have audience in IE6-8 and you are having problems serving there, you can make things work with polyfill CSS3 Media Queries. If you need inspiration regarding adaptive or responsive designs, you may want to have a look at Mediaqueri.es.

Need a website that looks great and brings customers from all screen sizes, Contact us for a responsive web design. Quotations starting from $400.

How to cook an infographic that looks and tastes great!

Infographics aren’t new in the web. But since the launch of various data-driven websites such as Fivethirtyeight and the Vox, they are becoming more popular.

However, this time the viewers of infographics are not limited to desktops, but mobiles and tablets as well. In order to design an infographic for these channels, using HTML5 is the way to go. If you are making those graphics for a client or co-worker, it’s likely the way they will ask you to do so.

Here are the three ways that Dezine Geek practices for making an HTML5 infographic break through the clutter.

Before You Serve, See What Happens If You “FRIED” Your Infographics

how_to_cook_infographic_01

Now “FRIED” isn’t some special tech process you need to do before designing infographics, this is basically an analysis that lets you consider why you’re making an infographic in the first place.

The word “FRIED” comes from the initials of five questions that allow you to think critically before you apply latest tricks to make an interactive infographics.  

Fresh – How will your infographics design stand out from the rest?

Relevant – Is your info engaging or tells a story?

Informative – Are your facts intriguing and accurate?

Entertaining – Will your infographic draw and excite the viewers

Different –Has your infographic been done before or is it new?

Designing an infographic not only demands you to be creative but also disciplined. The “FRIED” method right here will discipline your entire strategy for making one. Asking these questions before hand will also allow you to map out your objectives and make the message of your infographics resonate with your audience. Once you have FRIED your infographic, the design will draw the reader in and the data will be easy to digest.

Let It Shake, Make It Move

how_to_cook_infographic_03

Interactive infographics are trending these days. You can make yours even more appealing by introducing motion to the web graphics. For this, the Adobe Edge Animate, an HTML5 animation tool might come in handy.  This tool allows you to extend your custom infographic designs with interactivity and movement. Furthermore, it also integrates other tools and provides a bridge between design and HTML that you create for the web.

To get you started here are some really great samples and templates on the showcase page. If you want to go a level deeper and add more elements such as click & touch draggable scrubbers, here is a tutorial with examples to help you more.

You can further weave in interactivity that will leverage the latest browser updates to CSS and HTML5 and make some pretty awesome effects. Check out this blog about CSS shapes which is in its last stages of specification. Consider the evolution of the web infographic as an example.

Data Here, Data There, Data Every Where

how_to_cook_infographic_02

An infographic sinks if it is without powerful data sources and the tools to illustrate them. Whether it’s your own research or your client’s, data sources can vary. So invest some time so that you can get the hang of the topic as well as its sources.

We suggest you to head on to Quora that has a good list of publicly available datasets to give you some good raw data to play with.

You can also use some recommended infographic services such as Piktochart & infogr.am that provide HTML 5 products for collecting and evaluating your data and building visual graphs.

Bottom-Line

The aforementioned points are the key to a successful and highly shareable infographics on any topic that you have picked. Once you have got your stats right, but you feel stuck in making illustrations for your infographic design- you can always find tremendous websites, offering free illustrations and even a pen & brush platform where you can make your own. All in all, you can always contact Dezine Geek in-case you need any help regarding creative illustrations, or a totally unique infographic design.

Need a unique “never-been-done-before” kinda infographic !we can help you! 

4 Essential Elements For An Appealing Startup Website

You’ve done your homework and built a start-up from scratch. You are finally ready to take your inventory in line and make sales. But, there is just one more thing left to tackle: building a strong & appealing website.

You might have a great inspiration or tons of ideas to begin with, but unless you put in the right elements that reflect your niche and appeal to the right audience, your website will sink.

Dezine Geek believes that there are 4 essential elements for building a powerful and compelling startup website. So starting with the first, here is the knowledge that you won’t want to forget.

Understand & Focus On Your Website’s Function

Essential-Elements-For-Startup-img-01

 What is your website for, do you want to inform your customers, encourage them to try your services, or sell your products.

If your websites is for distributing information and you want a click & go solution, consider using WordPress or a similar open source CMS like Drupal. If your website involves selling products online, you will need a solution especially designed for ecommerce such as Magento, OScommerce, Shopify, OpenCart or WooCommerce.

Because of WordPress’s high usability and less sophistication, some startups even customize WordPress to not only handle content distribution but also the product buying process.

But you can only craft such a website if you have an early understanding of your aims and the function of your website. Once you do, be sure to focus on it to the core so that you don’t have to crowbar in it afterwards.

Market Your Brand Not Just Your Offerings

Essential-Elements-For-Startup-img-02

Your company brand is not signified only by the logo sitting at the corner of your homepage, and if you are limiting it to that only then you are missing out on a great tool to enhance your startup.

You should know that brand awareness is the key to any business’s success; hence it should be communicated and marketed consistently through your website. You must tie your brand to each element of your website, from your images to your color scheme to your content. No matter, if there are other businesses dealing in the same products as you, this practice will allow your customers to identify you, differentiate you and appreciate you as a brand. And perhaps most importantly, they will remember your business long after they have viewed your website.

Simply put, incorporating your brand in every aspect of your website will skyrocket your website’s power and effectiveness.

Design For Mobile Internet Users

Essential-Elements-For-Startup-img-03

 A large percentage of the internet users come from the mobile market. There number is growing in such a pace that soon there will be little to no desktop users left. Hence, it is important that you should improvise your target market in the same way.

Businesses belonging to any niche are now commonly adapting and exploring the mobile first strategy. Apps are good, but Dezine Geek believes that having a responsive design which automatically fits a website onto a standard device frame is crucial for your startup while capturing mobile audience.

Understand The Art Of Detailing & Sweat The Small Stuff

Essential-Elements-For-Startup-img-04

 If you think that with a basic design template and tossing a few graphics or little content in your free time, you can drive your startup to success- then you Sir, will get to nowhere but failure. 

Each and every aspect of your website, even the smallest detail, right down to every letter, every word, and every line should be relevant & engaging. Furthermore, as mentioned above, your images and color schemes should not only be attractive, but also tie into your brand.  Same involves for your call to actions which must be appealing and straightforward.

Bottom-line

Essential-Elements-For-Startup-img-05

Unless you are an expert or making startup websites every next day, you cannot DIY your website and hope that it all will be a success. The elements of your website are not going to magically come together, you need craftsmanship and professionals who will understand your vision and tie it to the elements seamlessly.

With the help of aforementioned points, their proper planning, strategic implementation and the marriage of all the right elements you will have a powerful startup website. But once that is achieved, you must test every detail to ensure that it correlated with your business model and goals- only then, your website will be as appealing and ambitious as your startup idea.

The 10 Hottest Trends In The Web Design & Development Industry

If you are ready to make a mark on the web and your new or first ever website is in the pipeline, you would be visiting countless of websites in a month to get some inspiration. So what kind of impact does that leave on your view of a good website design?

Besides the W3C standards which are in fact constantly expanding and innovating, Dezine Geek too is seeing and experiencing new design and development trends being introduced to the masses.

Here is our selection of some show stopping and appealing web design trends which are making waves of popularity today.

1. Flat UI Designs Are IN

webdesign_trends_img_01

Flat User Interface is what bringing web application and websites to life these days. It is a mix of fun and smooth colors coupled with total simplicity. Although Microsoft has been into Metro UI for a fairly long time, Apple introduced its Flat UI design first with iOS 7 and now in iOS 8 beta. 

We believe that Flat is going to stay and evolve into something more dynamic this year and the next too. Above image from Munch (Flat WP theme)  

2. Large Hero areas take over sliders

webdesign_trends_img_02

Large hero areas have become a big trend of web design today. This term, which has been borrowed from the print media was previously the “intro area”, often having a small image or slider with very little text. Now they are running rampant in some of the best websites as big and bold and taking over the websites which used sliders.

Whether with a simple blurred photo in the background with text in the middle, or a more elaborated one with illustrations, large hero areas are attention grabbers and continuously becoming very creative. Consider Bryter’s larger hero area (image above) practice as an example.

3. More Focus On Responsiveness

webdesign_trends_img_03

Although there has been quite some debate on responsive web design vs  mobile app and which one is the best, but responsiveness have now been around for fairly long. Strictly speaking, responsiveness has become a standard now, being the best and the most enriched alternative for making websites device friendly.

However, we believe that there is still room for growth in this sector, considering designers who are introducing new art to their responsive websites.

4. Videos Where There Used To Be Text

webdesign_trends_img_04

You can only write so much before people realize that they can process the same information interactively in the form of a video and without reading.

This is because the video content is cheaper and easier to produce and surely we are going to see more of them, especially when it comes to showcasing your product or introducing it to the world.

Same goes for websites which opt for interactive videos as a background. Have a look at the media boom page (image above), there retro style background tells the story of their business. 

5. Minimalism Sidelines Fluff

webdesign_trends_img_05

Besides Flat which hints towards minimalism without all the fancy colors, minimalistic and simple web design has been emerging already. One of the main reasons for minimalism is the huge emphasis that has been put on content and content only. 

Simply put, minimalism in web design is the future as people will not stay more than a minute to find something that has been hidden behind the fluff. (Above image from mecre)

6. Your Personal “Branded” Typography

webdesign_trends_img_06

Fonts have been evolving for the past couple of years and they are available in a surplus amount. For example, consider Google Fonts, which offers hundreds of diverse fonts for free. However, now there is a trend setting among designers who are using more personal and “brandable” fonts for a change. 

“Brandable” fonts mean only one thing that the website which uses them is sending a message that they are independent and free from other’s opinions on how to run their business. (Above image absinthe font)

7. One-Page Scrolling/ Long Scrolling

webdesign_trends_img_07

Why put content on different pages when it can be served from a single page? Single page website, the name it goes by now is “long-scrolling” or “one-page scrolling”. Its use has now evolved and lets visitors view all of your pages by vertically scrolling up or down. (Above image from an online health service infographic)

One-page scrolling can be taken as a trend which has made its comeback, or maybe it just never left. Anyways, One-page scrolling is showing signs of popularity in the web design community and we are constantly running into businesses which are taking full advantage of this trend.

8. Fixed Navigation & Social Media Themed Sites

webdesign_trends_img_08

Think of the fixed navigation layout, as your Facebook wall, no matter how far below you scroll, the menu or in other words navigation sticks on top of the screen so that you can easily access your notifications, messages & profile etc.

This style of navigation bar is emerging quickly and there are a lot of creative uses for it as well. Fixed navigation is often dubbed as Social media themed websites and they tend to make the user experience seamless and more accessible. We will be seeing a lot of this advancement not just now, but in 2015 as well. (Above image from Virgin Racing)

9. Dumping The Sidebars

webdesign_trends_img_09

 Now you don’t need to have a sidebar on every single page of your website, instead focus more on the full width content pages and incorporate widgets which scroll-out sidebars from the side of the page when needed.

Although you would need to do some coding in JavaScript, or jQuery, but this feature is still quite simple to implement and gives you more website space to utilize.

10. Parallax And The Other Similar Crazy, Cool Stuff

webdesign_trends_img_10

Parallax websites take an interactive story telling approach to guide visitors through the site. This is generally done by making the background of the site move slower than the foreground as you scroll down. This renders an impressive visual effect which allows for countless creative applications for online storytelling.

Parallax websites are often categorized under one-page scrolling sites, but we have seen plenty of websites that present single parallax images keep the visitor engaged and scroll through the entire image. Here is an excellent example of a Parallax website www.boycoy.com. (Above image)

Plus, expect similar things to hit the web in the coming times, such as the use of HTML5 in animating different parts of a website (see ’’Tobi’s Story’s website”). The subtle scrolling timed in tune with animation is the cool stuff and it will continue to evolve in 2014 & 15.

At Dezine Geek, we closely follow the latest web design and development trends and we do not advise what we ourselves haven’t followed or implemented.

So if you have achieved the inspiration or the plan you needed, but say you need some assistance with its execution; feel free to contact us and we will help you with your website.

Project Post-Mortem: How To Make Your Project A Success

Your project is mostly done. You’ve designed & tested it, it’s live & works. The gears are whirring on their axels just the way you wanted and your final invoice is paid.

But before you move on to the next project, or your next looming deadline, did you happen to review your operations and the project you just finished. A post-project launch review/audit, in our words, A Project Post-Mortem, is basically just analysing tasks in your head that you have performed, or discussing with your partner over a cup of tea.

Try googling the term “Post-Launch Review“ and you will get thousands of results of businesses boasting success stories with a great post launch audit or offering to do yours for a fee. However, we believe that you make sure to do your own real and private assessment.

Discussed below is our take on the Project Post-Mortem, and how you can turn it into a positive and productive practise. Dezine Geek’s “what & why” overview is with the intent to help you break down evaluation processes into measurable parts, to be specific, write down stuff and make your upcoming prospects even better.

1) What Went Great?

project_post_mortem_01
Photo credits: Sufinawaz

Highlight a few things that went really great in the project you just did. You may also try to find out the exact reasons why that happened. The specifics for such achievements are really important and if you think that they were possible just because you are awesome, then you need to rethink your successes a little more.

For example; your success in strengthening the brand through its smallest details can be because you spent more time in researching about your client’s business, their history and future vision.

For some the step “what went great” is tempting one to gloss over, but it’s really important if you want to turn your experience into craftsmanship. This is the reason this step gets our #1 spot. Always remember to force yourself come up with 5 things that went great in the project, even if you only get to the details of about one or two.

2) What Went Wrong?

project_post_mortem_02

Now that you can name some of the details that went right and your morale is high, ponder over the stuff that went wrong- And how you can do it differently the next time.

From communications with the client to the operations, jot down everything that you feel could have happened more efficiently.

If you had some issues with the client, consider which of their character clues you can recognize next time. You may also want to be more alert around new clients who balked at your quotation. This can be a warning that such projects will actually cost you in revisions and stress more that it earns.

Furthermore, look for easier solutions to the age-old problem of “last minute changes”. Again, if there are areas which you think you could have handled differently or through some new skill sets, identify the specifics and plan to take it to the next level.

3) Stash Your Creative Assets

project_post_mortem_03

With the next looming deadline coming close, or a new project breathing down your neck, this is another important step which can be forgotten. Stash those last minute assets which you made but fell to the wayside as the project was nearing completion or the things were rushed. Was there some great piece of design, illustration or artwork that you made but got dropped, archive it with your other royalty free resources, or wherever you’ll be able to find it easily.

File all the resources, printouts, purchased photos, fonts and templates in clearly marked folders and backup the whole project.

4) Update Your Portfolio

project_post_mortem_04

Organize and upload your best work. If you think that the architecture and page layout of this website clearly showcases your creativity, then give it some polish and let the rest of the world appreciate it as well.

Now remember that this step ties closely with our #2 step as well. For example, if a project or the client gave you tough time and the project seems like a waste of time, then consider posting the nice set of illustrations you created and post those in your portfolio.

5) Stay Informed About The Project

project_post_mortem_05

Even if you freelance, it’s still in your best interest to stay informed and keep yourself updated about your past project and its status. This will not only help you create longer-term relationship with your clients but also improve your future work.Because of an ongoing conversation with a client, they are more likely to come to you for revisions.

Although, it might be unpleasant to know that some of your features were problematic for a project, but this knowledge will save you from committing the same mistake again and help you avoid any more unpleasant situations.

6) Documentation

project_post_mortem_06

If you have somewhat skipped the documentation of your project, then spare some time and do it now. Documentation helps you leave “tracks” which will help you if you are asked to handle revisions.

For newbies, documentation will provide assistance in learning patterns, style sheets, rules etc. If there is a management above you and no documentation strategy is adopted, do what you can to convince them in giving you some time where you can do yours. However, if you are independent then it’s your job to make documentation a priority.

The knowledge of the Good & the Bad of a project which make you improvise, is the #1 cause of successfully concluding a project. But in the ever changing web, always make sure to establish and continue evolving your technique to Project Post-Mortem.

But, it has been seen that some professionals and even companies which lose cross functionality can tragically blow this practice and turn post-mortem into a frightening blame game. This is because, we all have tendencies to hold onto bad stuff, letting it worry and weigh us down while disregarding the good stuff. With a more conscious process of project post mortem, we can not only harvest valuable ideas from the entire project, but also inhibit this negative trend and make our work greater.

How do you conclude a project? Which steps do you think are essential? Share your thoughts with us in comments

7 tips to get website traffic buzzing & your business humming

You are open for business with a great website and top-shelf offerings that are also being marketed on various platforms. So why is it that your website still isn’t creating the numbers or conversions that you want it to, or thinking, it should?

To all such start-up owners and new entrepreneurs out there, BUZZ is what you need! Buzz is everything. As it actually takes about 5 encounters of a customer with your product to fully recognize it, you need buzz to get your potential customers start talking about your service or product. But getting buzz isn’t always that easy. However, considering its necessity in igniting your audience, you always need the right strategy!

We believe these 7 tips will help you get the buzz you want for your website!

1. Tell Your Audience A Compelling Story

7_tips_website_traffic_buzzing_01

Every business has a story, what’s yours? How did you come to be? How do you do what you do best? What makes you tick? You can put all of such elements into a compelling story, put it into your website in a way that it speaks to your audience and literally gets them talking.

Or you can do just what everybody else does, put a few dry sentences together in a so-called web content, list your services and hope for people to find it interesting- which although is unlikely to happen.

2. Provide Incentives, Freebies, Promotions & Benefits

7_tips_website_traffic_buzzing_02

Nothing grabs more attention like a great discount promotion, freebie or a prize. You can offer all this and even more like contests promising bumper prizes, promotional discounts, cost-cutting coupons, and limited time benefits directly through your website and see how the word of mouth keeps your website bustling with visitors. 

3. Offer Interesting & Dynamic Content

7_tips_website_traffic_buzzing_03

Go through your website’s content see if it’s eye-catching as well as engaging. If your website is not providing a consistent stream of fresh content that’s unique and worth sharing then people are going to pass by your website and its updates, unnoticed.

4. Welcome feedback

7_tips_website_traffic_buzzing_04

If you want people to start talking about you, you can go by asking their opinions for your website, like what they think about its interface, design, your new logo, blog, services and even promotions.

Web visitors will have plenty to say about you and your services if given the opportunity, so besides page comments, service reviews and testimonials; you can post polls and questionnaires as well. Not only for Buzz, but this is also one great way to improvise your offerings to match the needs of your market.

5. Do something news-worthy

7_tips_website_traffic_buzzing_05

By making news, and/or promoting headlines about your niche or even yourself, you can stimulate excitement about your website. If your business undergoes some change, send out press releases detailing it. Be sure to post all such news and announcements on your website as well.

You can keep people engaged, by showing them through your updates that your website and its inventory are evolving as per the latest consumer trends.

6. Socialize on your social media outlets

7_tips_website_traffic_buzzing_06

No wonder why the web isn’t ablaze with talks about you, when you tweet or post just once in a blue moon.

Always remember that these social outlets work way better for your business if you keep people engaged. Try to become a part of certain groups that tie into your offerings or fall in your niche, then participate and post interesting updates, comments and links revolving around your products. Actively conversing with people, striking up discussions and threads is a great way to get people talking.

7. Have a post-traffic strategy

7_tips_website_traffic_buzzing_07

Your posted video of guy doing perfect splits between two running trains might get you a great audience, however, this might not be your targeted traffic and its effect could be temporary as well. This will not be helpful for your business in the long-run, so don’t just stir up buzz for the traffic’s sake. Have a structured online marketing plan ready with an engaging brand awareness campaign.

Once you have got the traffic you need, you can use interesting content, infographics and catchy call-to-actions to differentiate buyers from visitors as much as possible.

Getting people to talk about your website takes great amount of planning as well as elements worth talking about. Once you have undertaken the aforementioned pointers, observe consistency to let your website attain the required numbers at a uniform pace.

How to be a Design Geek (Dezine Geeks best design practices)

A good design isn’t always just about good looks. It should also perform with same efficacy, should convert and also keep on astonishing web visitors which is one of its main purposes. At the same time a good design should also be innovative or it might just get the job done; says Dezine Geek.

Inspired by Dezine Geek, I have always kept a close look on their habits and operations while they are busy doing, what they do best; Web Designing & Development. I have long kept a list of what I thought should be things to look upon while designing web application, however what I was missing was sequence.

Upon my request to know the best practices while designing or being a designer, I was bestowed by an ever expanding list of tidbits by Dezine Geek, which I believe Web Designers & Developers out there can find very useful.

So do you want to rock your Design the Dezine Geek way, read on below to see what are the best practices of Dezine Geek while designing & hand-coding websites.

Never Claim To Be A Guru, Always Learn & Improvise

how_to_be_a_dezinegeek_01

Even if you have been working as a designer for ages and that your personal portfolio consists of some great master pieces, you should still never call yourself an expert, let alone a Guru. Calling yourself a “Design Rockstar” or a “Development Guru” concludes your online sales pitch with great many doubts. And if you are posing to be one and something goes wrong with your work assigned by a client, this can get fingers pointing at your image as a designer.

Let people recognize your worth through your work and let the quality of your design speak for itself. A well-presented portfolio can be your best arsenal but then again if you are a learner, hopping and excelling into new technologies and improvising your skillset, will always get you appreciation from clientele looking to acquire your services.

Don’t Hesitate To Innovate, Be Creative & (Borrow Ideas)

how_to_be_a_dezinegeek_02

Every great design is made through innovation, but every innovation at some point has a borrowed idea, a fascination or idolization of something as great. Although, every great designer isn’t great right from the beginning, it’s just their innovative skills getting toned up with time- But this one secret is what very few of them accept.

Innovating something new, equally or more greater than its predecessor idea or fascination is a talent. In other words, this is called creativity. In web designing, creativity is the holy grail of innovation. It is an art that takes the very best of designers into procuring something new and far more astonishing while abstaining from plagiarism.

Even Steve Jobs, Founder of Tech Giant, Apple accepts the fact as:

“Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after a while”.

Be A Critique But Appreciate A Quality Design (See Point 2)

how_to_be_a_dezinegeek_03

If you see an exceptionally great web design, or let’s say a website, don’t just start shredding it to find any possible design loop holes or development bugs. Appreciate its details, bookmark it and take notes on anything new you learn from that design.

No doubt, it’s tempting to contemplate, what you could have done, or how you would have toned the details given the opportunity to design the same website. But, taking notes on all the innovative features of the website is even more useful. The next day if you get to make a website of same sort, you can churn your creativity faster and as mentioned above- with the notes in hand, you can make websites even more wonderful.

Maintain Your Library, Don’t Just Bookmark, Save Screen Shots As Well

how_to_be_a_dezinegeek_04

Your creativity, innovative skills and design ideas aren’t going to spark on their own, or come as revelations, so research more and more to get a grip on what’s in trend and what you can do make something trending.

Researching, studying designs from all over the alcove and stashing ideas are food for thought for every designer and keeps their creativity flowing. So maintain a library of every amazing design and artsy thing you see on the web. Bookmark websites you seem to like and want to come back to for ideas and more researching. You can also save screenshots which is useful especially if you are designing for cross gadget compatibility.

Don’t miss out freebies, they are Free!!

how_to_be_a_dezinegeek_05

Sometimes an intrinsic detail to your design piece can come from the common most examples on the web or what if you could use that same common example to make a rare master piece. So never miss out freebies on the web, thinking that they are common and could be in possession of every other designer or developer out there.

Whether it’s a free theme, a template, free subscriber images from icon finder or iStock, illustrations or even just wallpapers- bag them all and as said previously, make a library. Down the road, you’ll be amazed to have new ideas and designer intuitions just from a free image you saw and collected.