Artificial Intelligence in Web Design

Artificial Intelligence in Web Design Richard RoÃ… ¡ko Abstract—This paper deals with a new trend in web design and that is to introduce some degree of artificial intelligence into the task of designing a website. One of the first companies that came up with implementation of this idea id thegrid.io, which we will be mostly discussing in this paper. We will take a deeper look as to what does in fact artificial intelligence means in this connotation and how is it implemented throughout thegrid.io system for automated web design. Keywords— GSS, webdesign, grid, SEO, performance I. Introduction When it comes to using artificial intelligence in any sphere of, technical or other, we always have to be careful with this notion, as it can get quite misleading as to what is really the power behind that or other action supported, derived from, or even controlled by artificial intelligence. The web is an increasingly popular platform and as such, a great amount of attention is being payed to it and its content. Web is, of course, populated by websites and these are so diversified in the matter of their content, that it would be really hard to classify them in any sensible way. Each one of these websites, however consists of two main parts, that are responsible for the operation of the portal as a whole. These are backend and frontend. When the web first started to be commercially available, the presentation side of the websites, i.e. the frontend was not of much, if any concern whatsoever. The idea behind the styling of the web was built around other popular media, newspaper. The syntax for writing the main components of pages (HTML) still resembles the organizational structure of the newspaper articles with headings divided into different levels, paragraphs and many other article-related styling. Back in these days, there was almost no styling aside from breaking the websites into different sections. Internet back then was used for almost entirely different purposes than it is now and hence, there was no actual need of doing anything more with the presentational side of the web. All of this changed, however, when non scientific people started to become familiar with internet and first commercial solutions started to appear. New language, that was supposed to make the web look much better arose and its name was CSS. CSS stands for cascading style sheets and basically, it allowed the designers to style the content of the website much more accurately. CSS is still widely used nowadays, even though designers and programmers today tend to use many other style pre-processors, but the core always stays the same. Web always continues to evolve and while its users, most of the time, do not care about the action behind the scenes, which is essentially the core of the whole site, they do care about the appearance on the other hand. That is the reason, that great amount of time and resources is put into the frontend and UI of the websites nowadays. The design of the website, its look and feel, the interaction with the user, feedback it gives, these all are very important factors to consider in the process of web development. Hence, the web designer profession is becoming increasingly sought and picked by many people and companies alike. What is going to happen when we introduce artificial intelligence to this process? It could have an enormous impact on the job market, if we consider that it could be one of the first steps in the process of automatizing web design and that is always risky, even to consider. This is also one of the topics we will discuss in this paper. II. TheGrid.IO The company behind thegrid.io are comapring it to the movie Her to some degree. It was a movie about a perfectly voice-recognizing computer personal assistant, that was also able to simulate emotions and basically behaved as a human being. On their website we can see, that they state, that now She can do webdesign for you as well, referring to her ability to analyze the content of the site and adapt the design to it. They describe the basic principle behind the algorithm as an engine, that is measuring and analysing the content of your website constantly and changing it and designing it everytime it detects a change in the purpose of the site. The idea behind all of it, is to provide a personal computer-driven and automated webdesigner for every webdeveloper. Fig.1 thegrid.io landing page / index [1] As a proof of concept, in the FAQ (Frequently Asked Questions) part of the website you can find out, that thegrid.io website was actually built using thegrid.io system itself. This fact immediately caught attention of many web developers and web designers and upon researching the public HTML and CSS of the website, we find a few interesting facts. The website is generally pretty heavy. That doesn’t mean it is just really long, which it is in this case, but nevertheless, if a user scrolls down the whole page, he downloads roughly around 100 MB, which is quite a lot considering the lightweight trends in today’s world of web development. Interestingly enough, the load time of the website actually measures pretty good. If we take a closer look at the HTML, we can see, that the styles and javascripts are inlined, which is quite unorthodox, but seems to work here and it might be one of the reasons the site is loaded optimally even though its load is pretty strong. As Austin Wolf wrote for medium.com, the website is somewhat self-indulgent and it is really long. Fig. 2 thegrid.io performance test [2] From the given statistics we can deduce, that the webpage as a whole actually performs quite well against all expectations, which renders the system really ambitious. Thegrid.io website has a few notable sections, like FAQ, team and info for possible investors. It even contains an e-commerce part with a possibility to opt for a subscription, that is currently set at 25 â‚ ¬ / month. It is very important to note, that the algorhitms and AI behind this automated webdesigning project is still under heavy development, so all the results and test we can do for now might differ from the actual performance by the ready and commercialy available application. But this pre-research can still give us an interesting view of what it might look like once it is available to public. At this stage of development we can only guess how does the analysis of the content on the website actually work, but it good to know, that the whole company has a very transparent and open-minded point of view when it comes to licensing and sharing resources online. The team behind thegrid.io have the ambition to share source code of each and everyone of the websites that will be created on github in public repositories for others to be inspired and reproduced. We have no information as to what licensing is going to look like yet. Another interesting fact about the whole ecosystem of thegrid.io is, that they not only offer you to make your website autodesigned, they can also handle the domain registration and the hosting for your website. And what is even more interesting, they plan to make this available for the same fixed monthly fee. This suggests, that their ambition is to make user’s businesses go online in a matter of hours for a decent price and maintain it for them without requiring them to have any prior knowledge of the web or any other technologies that accompany it and to instead, let them focus on the content. This whole service is then complemented by many other small features, like scraping the web for mentions of your brand and automatically generating a press release section for your page, or for your brand. This, of course, from the technical point of view, could be quite heavy on the resources, but from what we can observe as of the current state of the application, the tema behind thegrid.io proves to be quite apt at responding to heavy scripts challenges that may arise throughout the course of developing a website. Fig. 3 GSS templates [3] GSS is what we could call grid’s replacement of CSS, or templating engines as a whole. In the history, there were a few tries on taking out the programming out of the webdesign process by introducing some or another form of GUI for this creative process. None of these were actually extremely popular and thegrid.io promises to change that. What they base their strategy at is the fact, that they reverse engineer the process of all these systems. Whereas these former were built on allowing the users of the system design the layout, or pick some template, or predefined parts of a website and then let them fill it out with their content, thegrid.io reverses this and just lets the user type in the content into a blank website canvas and lets their system analyze the content and based on that creates the most suitable desing, that works well with content of the webpage. III. Issues With a project this ambitious and possibly this proportional, there is a lot of skepticism that is arising from many directions towards it. In this chapter we will discuss some of the categories of remarks thrown at the development team. We can also try to approximate their possible solution to these problem and the way they might address these issues in the future release version of thegrid.io system and its automatic web design algorithms. A. SEO SEO stands for search engine optimization. Let us first take a quick look at what that actually means. SEO is actually the process of increasing the exposure your site gets when searched for a similar topic using a search engine (such as https://duckduckgo.com/, or https://www.google.com). This process focuses on the visibility of the unpaid results and is related to as generating organic or natural traffic. If SEO is done correctly on a website it can lead to an immense increase of traffic, that is generated without further action needed from the side of the developer, or the programmer. In the past, SEO was solely thing of text search, but as we push into the future, there is a rising trend of optical character recognition and optical image recognition, which allows the users to search for their desired topics by images, or even sounds. These trends are also affecting the SEO as a whole. As stated before, if SEO is done correctly, it can lead to making the page appear generically much more often in the results of the search engines. To optimize a site for search engines and index the page proper way many techniques are employed. SEO experts start by editing the actual content of the website, then they can also edit the raw HTML of the webpage in order to increase the actual relevance to the content of the page. There also is a number of, so called, external techniques for increasing the SEO rank of a website. This include promoting the website, construction of backlinks, or inbound links, that lead back to the SEO optimized page and paying for written PR articles. Implementation of SEO as it is really difficult and requires constant effort, involvement and implementation of the new trends in this field as it is. In order for it to be precise and to work well, it needs to be thought of constantly, while creating new content and updating the old one as well. In today’s overcrowded web environment, it is very important to make your site stand out in any possible way and SEO is becoming increasingly popular in addressing this problem. The team behind thegrid.io relies on filters to take care of many web designing aspects. They act as the entry point to any and every grid.io powered application. Fig. 4 one of many others grid.io marketing strategies As we pointed out before, SEO is all about conforming your HTML to your content and that is where filters come in place through the grid.io algorithm. Filters serve in filtering your raw HTML. Since SEO is basically translating the HTML wrapped around the specific parts of your content to let search engine scrapers index and â€Å"get to know† your content better basically. The way we can speculate these probably work is, that they scrape the content of your articles, items, or any other elements and then parse it into meta tags probably via the URL. As we saw from the example page they built, it is probably using some kind of SPA (Single Page Application) framework, but it most likely is not one of the popular ones, quite possibly it is their own internal one, since doing SEO on a SPA could prove troubling, as for reloading just the parts of your html including the content which is relevant to the specific asynchronous change in the scope of your application. These are just theories and speculations based on what is publicly available as of the moment of writing this article. B. Performance Performance is one of the most important factors to consider as it influences the feeling of quality. Impact of the page speed on the traffic, conversion and satisfaction is huge. According to Aragon [5] in her article on crazyegg.blog about SEO, company Amazon found out, that for every 100ms their page loaded quicker they got about 1% of increased revenue overall, which is a truly tremendous impact. Other big companies are reporting the same findings, which only goes to show, that performance could be a huge deal breaker when it comes to thegrid.io as well. One of the elementary aspects when it comes to minimizing the page load is to minimize the number of HTTP requests. If we refer to picture [2], which states that there is exactly 123 HTTP requests on thegrid.io page when it first loads. This number is pretty high and suggests, that there is a place for optimization of these standards in order to make the page load faster. Other techniques might include caching the resources on the site (storing them permanently if they are present on more than a few sub-sites of the website in order to reduce server load). In this field, thegrid.io got and F, referring to [2] once again, which is suboptimal to say, at least. When it comes to compression of images, the best choice here is to go with JPEG or PNG formatted images. But as thegrid.io states, the content uploaded to the website is entirely in the hands of the user, the grid just analyses it and styles the content around it accordingly. So the performance when working with images is entirely in the hands of the user. As far as we are concerned there is no information yet as to some auto convertor of images or anything similiar, but it would definitely make sense for thegrid.io to implement such a functionality as this can have a great impact on the overall load speed. With all that being said, the overall experience of the grid.io created website is pretty good and slightly above average in our opinion. If they really relied on their own algorithm when creating their presentational site, it is safe to assume, that the team already have a very stable and delivering product, which displays quite a potential when it comes to delivering apps with an optimal user satisfaction. C. Design The actual design of the websites created with thegrid.io is one of the fields that we can not measure objectively even if we would have more templates, or filters, as they prefer to call it at the grid, because design is pretty objective. From the teaser screenshots we can however see, that the design have all the modern practices, such as flat design and minimalism in their scope and portfolio and they tend to generally cling into this direction. Another big issue could be the responsiveness of manufactured designs. In the world of today’s web, if a site is not responsive and potential client base is expected to view and interact with a website on a device other than a computer, it is almost 100% expected for the site to be responsive (meaning, the site is stretching and adapting to different screen sizes dynamically). One of the main points of the responsive web design is to actually adhere to the content and style it according to it, not according to HTML elements, or anything else on that matter. With this in mind, thegrid.io is promising its users a responsive experience on all devices ranging from smartphones, through netbooks up to 4K capable retina big displays and smart TV’s. Other issue that comes to mind that has to do with design is the fact, that users often tend to want to personally add their touches to the design. And that is something that is impossible to be done automatically or with any kind of algorithm, since it depends on the feelings, emotions and personal tastes of the user. It might seem though, as thegrid.io is not targeting such people and are basically more into helping people kick start online presence of their brand and as such, this functionality, or the ability to meddle into the code of the applications might not be needed for most of their customers. Still, in the final version of the product they might introduce such a functionality and it would be really interesting to see how this plays out in the end. Other issues that might arise are the ones concerning originality of such designs. Of course, every website is different when it comes to content, but there could be many, e.g. e-shops dealing with cosmetics imported from France. How could an automated engine handle such a challenge? We do not know that yet, as the service is still in a stealth mode when it comes to unveiling the principles of its internal mechanics, but it is definitely something to consider and take into account. IV. Similar projects As of right now, thegrid.io seems to be the only one that introduced some degree of machine learning (or artificial learning as the call it) to web design and it seems to be really promising and interesting. V. Conclusion Thegrid.io is one of a kind applications that in summary should be able to give us the ability to create websites on the fly, without any prior knowledge, with an easy-to-no learning curve whatsoever and that styles itself around the content scanned. That is a very bold idea, but if executed properly and after implementing precautions could help people digitalize their brands very easily. References TheGrid.io landing page snippet [online]. Available: https://www.thegrid.io/ Thegrid.io performance test, conducted by Austin Wulf, on 28.12.2014 [online]. Available: https://medium.com/@austinwulf/the-grid-io-builds-incredibly-slow-websites-24ca1980c8f2 GSS templates used in thegrid.io [online]. Available: http://www.irishtimes.com/business/technology/artificial-intelligence-platform-the-grid-looks-like-the-future-of-web-design-1.2117158 Thegrid.io marketing strategies [online]. Available: https://www.thegrid.io/ K. Aragon (2013, Nov 12). 10 ways to speed up your website – and improve conversion by 7%, [online]. Available: http://blog.crazyegg.com/2013/12/11/speed-up-your-website/