The Webdesignology

Do you actually know what webdesign? Well, we'll answer that question for you, for those who think this is only the graphic design on the web. Webdesign represents the entire design of a web interface, from the realization of the tree, the organization of pages through the navigation and the definition of interactions and finally the graphic creation respecting the basic ergonomics, usability and accessibility rules.

[the-webdesignology]

Presentation of our (amazing) team !

Marine TREHOREL - digital project manager @Marcel agency

After a business school Marine has decided to deal with the digital in depth, so she went to the famous communication school called ISCOM. After long and lively study years, she will finally work for her passion: the digital.

She is passionate about the topics of web design: the page layout, the typology, the trends… And she is particularly interested in advertising: this month her favourite ad is from the brand Granola, “The Taxidermiste”. So if you want to talk about these subjects don’t hesitate to contact her! 

Gary MARBEHANT - digital project manager @DigitasLBI

Specialised in Digital Communication for over 3 years, Gary is now looking to share his passion for Web Design through the blog Webdesignology. Emotional Design, Responsive Design, Flat Design, are his favorite themes. Gary believes that the access to information is crucial in our society.

If he could, he would send a spacecraft across the universe in order to allow his blog to be accessible to all, even the wicked aliens.

Julien ROQUILLET – UX Designer @5eme Gauche

After studying communications and digital creation, Julien proved to be a talented UX Designer within his agency. Fascinated by webdesign since its first steps on the Internet at age 5, he decided to found his comrades The Webdesignology to explain to everyone his passion.

Talk all while talking to each is the motto of Julien to understand his interest in the web. The Webdesignology is his life. Football and girls too.

Thibaud DUVAL – project manager @Saguez & Partners

Why things are the way the way they are but also how to change them ? Who won the football game yesterday?

This is just a little panel of questions which Thibaud asks himself in his life. He was early interested in design in it globality.

At the age of 4, he had already successfully copied the Mona Lisa by providing optimizations (as youcansee on the left). He followed this path and finally arrived in a digital design agency, where virtual meets reality and where the goal is to offer their customers an unique and aesthetic experiences, called webdesign.

For more info

- Our Facebook page

- Our Twitter page

[the-webdesignology]

10 web design trends to forget 2014

This year will be a year of prosperity for web design. The professionals expect a flood of innovative concepts in term of graphics and navigation. So, how to sort out the trends that continue to flourish and the others which have to be forgotten? The web design is an art and a science which know a permanent and dynamic evolution. If you want to succeed, you have to follow our advices.

Too much web pages

The web sites, which have an untold number of pages and disordered content, are more and more important on the web. The mobile area has met a significant impact on the user’s browsing habits. The clarity and the prioritization of content have become an evidence for users. Consequently, it is essential to clear your pages and your content has to highlight the most important. Take a look below, there are some examples : 

The Ribbon

It is true that the ribbons have been very successful over the past two years. However, now it is time to “cut the cord” with the carnival style. This is one of this trends which is out of fashion now. So, show your originality and let your ribbons fly away. 

The copyright free pictures

If you want your visitors to be able to identify with your site, you have to avoid using insipid free right images. You have to choose photos of your team or your space rather than stereotype of a mannequin. Your visitors will have a better image of you and will trust on you.

The “paper style”

The large text boxes and the front Serif work wonderfully for print but not for the web.

The three watchwords for a website are: 

-> A text with a large format

-> A clear font

-> A concise writing

Let the journalists have a great time with the information in blocks and focus on writing a single message, clear and relevant. 

Skeuomorphism

It is a trend launched by Apple few years ago. The concept was simple:  to present objects within a digital interface, like they are in the “real life” (for example, the notepad on the iPhone). It is true that this trend has appeared strongly on the web during the recent years.  Even Apple has decided to adopt a minimalist design for the latest version of its IOS operating system. So, even the best can admit when they have made a mistake. 

A confused hierarchy

The Pinterest style had good days on the web in 2013. So, some very nice sites have surfaced but it was really difficult to understand the content. This trend, although visually attractive, can be used for a minority of web sites because of its lack of hierarchy. The others have to simplify their presentation. 

The front

What is the point of mutual interest between Arial, Helvetica and Waltograph? Answer: not so much.  The mixture of different fonts is really complicates the decryption of the message and affects the visual appearance of site. You have to select one typo and keep it. 

The buttons

Obviously, one of the main goals of all the websites is to encourage visitors to do certain actions like: buy, register, share, like, etc…). However, it is essential to priorize. You have to highlight the most important action for your business and put the others call to action more discretely. For example, you can place your links to social media in the footer.  

The excess of icons

Today, the use of icons as menu is trendy. These add a sophisticated touch to your design and an easy navigation on your site. However, using them throughout your home page, you may complicate the life of your visitors. If they spend more time deciphering your menu to navigate your site, you will pass next to your goal. Use the icons to complement your text, not replace them.

The abusive contrast

The golden rule: you want that your visitors can easily read and assimilate your message. Bad color contrasts impose additional efforts to your visitors. Use contrasts that highlight your text.

Marine.T

For more info

- Our Facebook page

- Our Twitter page

[the-webdesignology]

The web mutations

Through all our articles, we have seen that the Responsive Design and emotional design allow brands to install a lasting bond with consumers via the Web design. There are a variety of ways that can foster this relationship, which is difficult to highlight on the web.

It is through the constant evolution of the web and its ecosystem that new opportunities emerge to improve the visitor experience every day.

• HTML 5

The new generation of HTML markup language, which will gradually replace the old version of HTML 4, is and will be the next revolution for the years to come. HTML 5 simplifies the use of code on the web and ensures maximum backward compatibility.

However, its usefulness is also found daily through webdesign and will change our use of the web. Websites will work just as easily on mobiles on a current web browser (Responsive Design). It will also be easier to design some features, including semantics and structure of content. The ergonomics are enhanced through the addition of built-in fields. Web pages will have an "Offline" mode (less data loss), a drag and drop system - this functionality is available between web and PC browsers -, improved geolocation, etc.

All these developments will bring to web designers and people working in the world of Digital and Web greater opportunities in terms of design. This is a real opportunity for all sectors to modernize and remain competitive.

• The screen resolutions : Retina Display

Introduced by the Apple brand with the release of the iPhone 4, the Retina Display is gradually adapted to all types of existing screens. The term "Retina", brought from the Cupertino brand, designates high resolution screens having a greater density of pixels than the current ones. It is impossible for the human eye to distinguish the pixels. These very high resolution screens imply the adaptation of websites and applications in order to have the same quality. This is essentially a reworking of images: photos, icons, pictograms, etc.

One might think that this new technology is a simple evolution, as was the HD (High Definition) before that. However, it offers consumers a new and different experience. In terms of aesthetics, the record is much more qualitative than it used to be. Moreover, adapting a website to this resolution means to get ahead of competitors and thus being distinct until it becomes a standard.

Retina Display (and high resolution) is then an effective way for a company wishing to offer its consumers a new experience. A user that browses the Internet with a retina display will see a real difference between the adapted websites and the others.

Gary.M

For more info

- Our Facebook page

- Our Twitter page

[the-webdesignology]

[the-webdesignology]

Content precedes design. Design in the absence of content is not design, it’s decoration.

Jeffrey Zeldman

[the-webdesignology]

5 WEB DESIGN TRENDS FOR YOUR E-COMMERCE SITE

Your online store must be done well because the user will be seduce or otherwise will close the page. The first impression is always important and graphic design are widely involved. Hard to think of a web design which is both original, ergonomic and attractive to serve your content. With a few simple tips, you can offer your customers the best e-commerce experience!

1. Choose a responsive theme  Tablets, smartphones, netbooks, computers... Screen resolutions are many. Adapt your website to new habits of users can bring you an optimal visibility. A responsive design website dynamically adjusts the width and height of the screen of different terminals. By integrating a responsive theme on your online store, your customers can make purchases wherever they are and will always have a site with a navigation adapted with them!

2. Use a slider Ideal if you want to display a full range of products, put forward an offer or enliven your site! Simple to implement and fully customizable, it dresses your site and helps to push your news (events, contests, new collection ...). The sliders are also an excellent choice to stage your products and create a universe which turn your visitors into customers. This is what your visitors will see at first, so this is very important! Don't ignore it, use beautiful pictures that will perfectly highlight your products.

3. An original and creative navigation  Navigation plays an important role in the success or failure of a website. An intuitive and original navigation is always more attractive for the visitors and it gives them a better user experience. Abandon the traditional navigation in favor of an unusual navigation! To mark the minds of users, propose a menu with original instead of a simple navigation bar. Innovate by inviting your customers to access your information and products in a fun way and avoid clickable links.

4. Think about action buttons Don’t forget the importance of the conversion rate during the design of your e-commerce site. Action buttons which encourage users to click or purchase are an important aspect of your online store. Is your action button enough visible? Is it attractive? Is It location intuitive? Here are some questions you should ask yourself when you will create your site.

5. Set up a quick product overview The best e-commerce design sites are intended to make user experience more pleasant and natural. Customers want to purchase online quickly and effortlessly, they don’t like pages which are too slowly to load. That is why a quick overview of the products in a pop-up will improve the process of buying. Very appreciated, this feature avoids their return to the previous page to continue their shopping.

Thibaud.D

For more info

- Our Facebook page

- Our Twitter page

[the-webdesignology]

The « Long scrolling »

This week, we have decides to talk to you about « Long scrolling” which is one of the web design’s trends.  If you browse on Facebook, Twitter or on another social media, you have ever seen this type of web design. These websites prompt users to scroll up and down in order to access to information in an intuitive way. The goal of the “Long scrolling” pages is to avoid the waste of time due to the loading of pages and to have an organization into a hierarchy really clear and accessible. 

Look at these examples :

- The Beetle

- Nest 

- Flickr

- Paylib

You can wonder why this is a trend?

Our use of the internet is totally changed since the access to smartphone has exploded. Thanks to that, online services have to adapt their experiences and present inevitably a vertical innovation. The goal is to give a maximum of information in a relatively narrow interface. We have to see an entire web page with a simple finger gesture. And mobile users love it !

So this trend is not only for mobile user but it is an online experience regardless of the platform they use.

If you want to create a website with this type of design, this one has to have these criterions:

- A large part of your visitors go to your website from their smartphone or tablet.

- Your website has information which should be better to be presented on a single web page.

- You regularly update your site with content in an chronological order.

- Your site has numerous videos and photos galleries that may take time to load, which can scare away users. 

Marine.T

For more info

- Our Facebook page

- Our Twitter page

[the-webdesignology]

Webdesign, it is also a wise choice of typography !

Since our inception , we actually are dealing webdesign trends in terms of visuals. But in each graphic trend, we tend to overlook a key point is the identity of this same trend : the typography. The shapes and colors aren't the simple vector of a beautiful design.

We can say goodbye to the classic typefaces : finished Times New Roman, Comic Sans Ms, or even Helvetica. Welcome to new typefaces that form the web design trends today. What would you think of the Flat Design trend with typography Times or Cooper Black which is not at all sleek graphic style imposed by the Flat? No, it could not exist , precisely because the typography is an essential element in the construction of the trend.

But beyond the construction of the trend, it's primarily a story of user experience. Indeed, if the user experience was not interesting , there would be very little chance that it becomes a trend that everyone appropriates . It is essential that the user has sufficient comfort reading to fully live his experience on the site. A bad choice of typography can have negative consequences on the audience of a site. Everyone seems to know , but everyone neglects choosing a typo unreadable because "like that, it 's pretty." Design, it's not only look pretty.

To be continued...

Julien.R

For more info

- Our Facebook page

- Our Twitter page

[the-webdesignology]

The best web design trends on 2013

It is really important for us to look back at the web design web of this last year. And the question is: how we will do best things?

The design on the web is a permanent change, thanks to the web design trends can be easily

developed but we can see that in the other way so it could become quickly obsolete. It is a game that we love playing. 

So, we have a lot of examples to see about the trends of 2013 which were polyvalent.

But firstly, we can wonder what make a design conception a real trend? For us, if there is a interesting and particular design which has been discovered and shared on the web, it is a trend.

The first one is obviously, the responsive design. It is the hottest trend of 2013. We are sure that if you work on a web or a creative agency, the majority of your client wanted a responsive website.

We already talk about webdesign in previous articles, but to sum up, Responsive design is an approach in which a website layout will repaginate to fit and suit different screen sizes, device profiles. If you want more information about this type of design, let’s check our articles.

The second one is the flat design. The best example is iOS7 of Apple. Take a look between an iPhone with iOS6 anf iOS7 and you’ll understand quickly. The lexical field of this design is flat colours and clean interfaces.

The next one is the Static headers, it is a real good thing for brands. Indeed, Static headers remain on screen as the user scrolls down a website. So the name and the logotype of the brand is always present. This trend has appeared thanks to the possibility to use the position: fixed without having issues with the browsers.

Now, we will talk about Parallax. This design was used for the videogame in the 80’s and the 90’s. It is a solution to show a sort of 3D. So when you scroll down on a website, elements move in a different way and in a different speed.  

To finish, we will discuss about Typographically-led designs. This complex word expresses the explosion of the website fronts in 2013. This trend is a refection of the web’s move toward more print-like layout capabilities.

Evidently, we have met a lot of others web design during one year, but we have decided to highlight these one. And now, it is the moment to be aware and look at what’s happened on Internet. 

Marine.T

For more info

- Our Facebook page

- Our Twitter page

[the-webdesignology]

THE REPONSIVE WEB DESIGN, OR HOW TO IMPROVE THE USER EXPERIENCE ?

With the increasing number of supports which can be used to go on the web, the issue of ergonomics websites regardless of the browser and the type of device used is at the heart of current concerns. Responsive web design is for many the miracle solution to universalize a website. Decryption of this attractive evolution of the Web. The responsive design, definition and challenges :

The web uses have significantly changed for several years. The use of mobile and tablets explodes. It becomes crucial for companies, both private and public sector, to consider their multi-screen presence (computer, mobile, tablet, connected TV…) to provide visitors with the most comfortable and ergonomic possible user experience. More and more companies ask for it. Responsive design is a technique that aims to optimize or adapt automatically the website display based on the used device. Attractive concept ! It involves to rethink the design website and anticipate the usability constraints whatever the selected navigation support. The responsive design answers this question by allowing to conceive a unique website, whatever the borrowed media used and avoid the development of multiple versions of a website or an application. Therefore, the website conceived can also change shape and adapt itself automatically according to the screen size.  The benefits of responsive design :

The responsive can provide a unique HTML / CSS base that will be compatible whatever the terminal. The benefits are as follow :  - Unique content : This allows a unique and centralized gestion, as well as writing efforts and duplication of less important content - A unique URL : This element is important not only for naturel SEO optimization on search engines but also for external communication - An unique user experience : It comes to design an interface with a unique intuitive ergonomics for all the supports - Development costs lower than when there are separate versions The limits of responsive design :

- The responsive design requires heavy technical constraints and involves a thorough review of the roles and expertise of the project team. - The design phase is heavier : We must consider the overall content and its adaptation on all formats. - The development time is longer than a conventional single site, - The display time is potentially longer because of adjustments of images and content. However, a fine gestion of the responsive images allows to overcome this limitation, particularly with the use of javascript. - The compatibility with the different browsers is a sensitive point because of the HTML and CSS code, which are more elaborate than for a conventional website - Development costs are generally higher because the creation of a responsive website requires longer time development than a traditional website To conclude, responsive design is clearly an effective solution which can provide an enhanced user experience in adequacy with the new web uses.

For more info

- Our Facebook page

- Our Twitter page

[the-webdesignology]

What if the Emotional Design was THE real guarantee of an effective success?

MailChimp, the E-Mailing company uses what we call emotional design to improve the brand 's relationship with its consumers. It is through the book of Aarron Walter, that we can understand the challenges and goals of such a method for a Service Industry. The goal of Emotional Design is to perceive a website as a real person with a personality. A website which allows you to think like it was a human being. A friendly little monkey who talks and laughs symbolizes MailChimp. According to the author, "personality is the key ingredient of emotional ties." Thanks to this connection we can guarantee an effective success and a loyal audience. The Emotional Design is the transmission of a feeling, an experience, and humanity in interfaces. If the Internet will never offers human contact, emotional design attempts to reduce this gap and bring something different and innovative. Many websites are made up with purchased visual on image banks or also templates in order to receive reusable items. However, it is with a personality that a website will be requested by users. We need to ensure that a website does not look like a "machine". Many benefits emerge from the emotional design: - Increase rate of user engagement. - Indulgence from the visitor when they faced a technical problem, a "bug".  - Demarcation of the website with its competitors. Personality can creates a real shift that takes place between a company and others. - Nicer framework. For example, dissatisfied customers rarely seek MailChimp. Emotional design is a great tool for a website to stand out and make a new and rewarding experience for its users. Play on originality, surprise, unexpected, contrast, highlight mascots and real people, are simple elements that can transform the Web Design of a website and the connection with the users. The attention of a user is a limited resource, and should not be manipulate.  However, the Emotional Design is not an independent and reliable system. It must be accompanied by an upstream actual performance on the site. If an interface is slow, unstable and repulsive, the website will lose its value as the related brand. Worse, it could bring discredit.  Finally, it is important to understand that not all the companies can use a funny mascot or makes jokes to its consumers. It is clear that emotional design must be adapted to a website. The challenge is to remain intact through a website while giving it some personality.

Gary.M

For more info

- Our Facebook page

- Our Twitter page

[the-webdesignology]

13 Minimalist Web Designs for your inspiration ! 

[the-webdesignology]

An example of a website with an interesting navigation ! 

Brand : McDonald's

[the-webdesignology]

Design is a good idea

Emigre

[the-webdesignology]

6 other examples of Flat Design, related to the AWWWARDS website !

[the-webdesignology]

6 Examples of Flat Design, related to the AWWWARDS website !

[the-webdesignology]

Flat Design, THE good idea ?

Lately, we hear a lot about Flat Design, it has been defined as THE webdesign trend in 2013.

The Flat Design is a minimalist graphic design based on simple swatches of colors, often brightly. The fineness of the typography and organization to structure the content to finish characterize the Flat Design. A rather clear and uncluttered style that facilitates the architecture of the information on a website. It is often said in web usability , that "the less you put, the more information appears clearer and more understandable for user".

This trend has been democratized by Microsoft and the standardization of all its products, such as Windows 8, the operating system has accelerated the development of Flat Design. But there is not necessarily Microsoft who is the only instigator. Since the summer, Apple ,launching iOS 7 is still initiated in the great wave of Flat Design, so rethinking their webdesign, that was not it at the base.

Apple was indeed the Skeuomorphic Design. The Skeuomorphic Design is a graphic style which consists in taking real elements to integrate such in designating them for the web (for example a calculator on a website or mobile will actually form a calculator), which will facilitate the understanding and improve the user experience because the real items have a certain affordance .

Some reviews say the Flat Design and Skeuomorphic Design are two styles that can be opposed ,others are convinced that this debate does not take place for the simple reason that there is no right or wrong solution. The Flat Design is a trend today but can not fit all the websites of all brands ,it's not necessarily relevant as users of your site.

Indeed, integrating the Flat Design in its digital strategy is first and foremost a research our users and relevant strategic analysis . Who is our target ? What is the editorial strategy of our site? We have a lot of content on our site? These questions and many others to ask before embarking on the creation of our website in Flat Design. Do not follow the trend to follow the trend.

Because, even if the trend Flat Design can spell graphic beauty of a website, it can potentially affect the usability if he ever misused. Indeed, we note that the Flat Design can cause terrible lack of affordance certain elements of websites created Flat Design. The affordance is the ability of a product to suggest his own use. These are visual clues that allow full user experience because it includes and guess what parts of the site with which it can interact. This affordance was made ​​less evident in many features of the Apple iOS 7, the skeuomorphic version 6 was rather simple to understand for the user.

But sometimes we see instead that solid colors provide a better understanding of the information and the user experience is much better if the digital strategy of the site fits technique Flat Design .

Finally, in terms of mobility , this technique Flat Design adapts very well to different media such as the touch pad and the smartphone. So, no problem to make nice Flat Design websites Responsive Design websites.

In conclusion, Flat Design need a certain reflexion before its use. Be aware of the advantages and disadvantages of the technique, especially in terms of user experience and information architecture. The Flat Design is not the only answer to the question : "what Webdesign for us today" ?

Examples of Flat Design will arrive soon...

Julien.R

For more info

- Our Facebook page

- Our Twitter page