Website History of carlosmota.eu

Introduction

It all started on 12-11-2004, because this was the date of creation of the Word file where I started writing the initial ideas for the development of the project.
As for the domain carlosmota.eu, this is registered since 08-31-2007, so it was around this time that I began to think more seriously about this project.
This means that between the initial idea and the launching of this website have passed over 9 years.
But if we consider the date of registration of the domain on 08-31-2007, then have passed just over 6 little years between the time of the genesis of the project and its actual launch, so it was not even mu... (sigh)
During this period there was only a single page with minimal information at this address, which provided little more than contact email, and not even disclosed the website.
Although going updating over the years the aforementioned Word document with ideas that I was having and made a lot of internet research for this project before starting their actual production, the work in Photoshop started on 04-25-2012 and the production site in Dreamweaver started on 06-11-2012.
I also registered the domain carlosmota.pt on 05-01-2012, so we can consider May 2012 as the date when I rolled up my shirt sleeves and actually started to sweat buckets with this project.
So, all things considered, I only took 22 months to the actual production of this project and if I had been working full-time I would not spent more than 12 months, which is not mu... (huge sigh)
This introduction served basically to say that this project has given me a huge hassle.

Brainstorming

How came the idea of the concept for this website?
In a moment of inspired genius! The answer was so beautiful, but in reality could only be if we considered that the moment was extended by 9 years. I echo the words of Thomas Edison: "genius is 10% inspiration and 90% perspiration".
The Brainstorming occurred not only one time, but over a long period of time, especially over the last two years when I started to focus more on this project.
Still, I can state a Eureka moment, in which many questions concerning choosing the style and elements of design, and what the way forward, found an answer when I had the idea of the main concept that we can associate with the website: the website/online card should be equal to the business card paper.

Concept

This website is of Business Card style and the card online is equal to the card on paper, but the digital card shows various menus with content and features that in the card on paper (still) is not possible to display.
This type of design is related to a concept with a strange name, called Skeuomorph or Skeuomorphism.
I have got a creative and original website, because I know no equal, but in millions of existing websites is possible I missed one or another.
I know a dozen of very good websites of Business Card style, but none that the card image online is equal to the card on paper.
I love the bas-relief of letterpress printing on the card on paper and tried to reproduce it on the card online, but it was a huge challenge to create this effect online because the option monochrome (black and white) from my main theme became very difficult to create the effect of letterpress printing.
Furthermore I was simultaneously creating the card online and the card on paper, because I could not terminate the card design on paper and print the cards without ending the digital card in order to be sure that both could stay equal.
To complicate things further I decided that I would use the smallest possible number of images, replacing them with icons of text and looking for create the card online essentially using HTML5 and CSS3. Therefore it was necessary to convert almost all the work of Photoshop for code, and the CSS3 still not have the flexibility of Photoshop.

Work Method

It took hundreds of hours to create this website, from the first conceptual description, until its completion. The Word documents where I was developing the project description had 460 revisions and a total editing time of 177h. This is just relative to the description of the project, without having any line of HTML written.
The actual work of creating the website is of several hundred hours and counting all the time accurately is impossible, because a lot of thinking about it and some ideas came to me on non-working time, ie the time that should be to do other things, such as ... sleep. Put it another way, it means I've lost many hours of sleep in bed thinking about the project, looking mentally to visualize aesthetic and functional solutions, long before start building the website. The Eureka moment that I mentioned earlier came precisely in one of these nights. I tested dozens of different solutions on paper and mentally, before I actually start building the website.
In the mentioned Word document I described all constituents of this project: Overview, Features, Languages and Frameworks, Web Applications, SEO, Social Media, Working Paper, Menus, Design, Pre-launch, Launch, Post-launch, Objectives.
In addition I was also writing a detailed diary of performing tasks (normally a task was divided into several other more specific tasks), problems and solutions and new ideas and features that was deciding to implement.
Despite hypothesized to use a Web application for Project Management and other of Debugging/Issue Tracker to manage this project (and others in the future), and have even researched, studied and tested some applications for this purpose, I ended up sticking with the plain old Word doc (a document for the description of the project and one for the diary) for Project Management and with the browsers (and their tools) for Debugging.
I think this kind of applications of Project Management and Debugging/Issue Tracker is fundamental to collaborative work, but in the case of the work alone, the doc is doing the trick, but maybe in the future I will use this type of applications.

Photoshop

I started working in Photoshop for the creation of background images. I researched marble and wood textures to use for the backgrounds. Later I decided to use a desktop image instead of using only a wooden texture and then the solution was to photograph my work desk, which I myself had drawn and sent to do, and that I have for several years.
The concept of integrating the physical with the digital elements rose another level with this option, for thus the secretary and the card you see online at the website correspond to the image of the desk and card that I use in the real world.
I made 40 photographs of the desktop to choose one that still had a lot of Photoshop work to cut, treat, test and apply the effects I wanted.
The creation of the logo that identifies me was very time consuming because it lasted for several months and I have analyzed dozens of photos, and tested in Photoshop 12 photos from different periods. The first photo I tested worked well, because the photography lighting allowed to create the effect I wanted in the logo. The problem is that this photo had about 7 years and I wanted to use a more recent photo. So I began a search in my photos to find one that could provide the same effect, but that was more recent, preferably from 2012. None of the photos served the goal and then I made new portrait photos for that purpose alone, but I noticed that the lighting in the picture had to be very precise to achieve the effect I intended, so this first series of photos also did not serve the objective. Later I performed a new series of photos and I gradually adjusted the artificial lighting to find the exact angle of light that resembled the first picture tested. But in this first photo the light was natural and resulted better. Moreover I noticed that after shaving the hair (what happened in this series of photos) was no longer possible to achieve the intended effect, because when applying the effect in Photoshop the head area disappeared. So later I performed a new series of portraits with natural light and it occurred to me to use a beret in order to define the outline of the head and thus solve the problem. The choice fell on a basque beret that I already had for some time. In this last series, which lasted for two days, I performed 56 shots, having been elected the next to last of these to use in creating the logo, as it was the one that gathered the best conditions of light (brightness, contrast, angle of incidence) and facial expression. There is a curious detail regarding the date on which this photo was taken, that served as the basis for the logo: I performed the photo on 12-12-12.
I conceived the design of the card on paper and the card online also in Photoshop. First I focused on the card on paper and after a long research and analysis decided that the card on paper would be of letterpress printing type in one color (black), with application of low relief in the area of printing, 85x55mm format, in 100% cotton paper and with rounded corners.
The digital card would now seek to mimic the shape, color, texture and effect of this card on paper, that I conceived in Photoshop. But before consider as completely finished the card design in Photoshop I decided to create it in HTML5 and CSS3, to make sure I could reproduce the whole visual effect on code in order to be possible to return to Photoshop and make some eventual adjustments and then consider it as finished.
One of the biggest challenges was to attempt to emulate the digital card bas-relief of letterpress of the card on paper, because it is very difficult to create this effect digitally when using only black on white texture of the 100% cotton paper.
There is still an important detail to highlight - I had to create two digital cards: one that served as the basis to the creation of the online card and another to make letterpress cards on paper. In the first I had to create relief effects that in the second were not needed because the objective was printing, where the paper and the print itself originated these effects. Besides the size and resolution is also different.
Oddly enough it was very difficult to find a good paper texture 100% cotton to use as background for the card online. The photos of card on 100% cotton paper usually lacked sufficient white area for me to use and the effect of texture was not the best. After a long search I managed to find a texture that satisfied me, but in the end I ended up using a photo of mine of 100% cotton paper that I bought meanwhile.
Before I come up the idea of the concept of the online card to be equal to the card on paper, I planned to create an online card in plastic and had an advanced description of this design. Not wanting to completely throw out this work and as I had decided from the beginning that the textual content of the website would exist in 3 languages, I decided then that the design would have 3 themes of choice, being the main theme on paper, but would also provide alternative themes in plastic and translucid. Therefore I also researched plastic textures to use with these alternative themes, although in the end I have created the very texture of plastic in Photoshop.

Produção

From here I went to the development of the website itself, having to convert to HTML5 and CSS3 code throughout the design created in Photoshop.
I decided not to use Flash and use the smallest possible number of images, creating the features with Javascript and trying to replace icons of image files by icons of image fonts (dingbats) and essentially creating the card online using HTML5 and CSS3.
I achieved this goal for I use very few image files on the website, although I use plenty of images, especially in the icons.
As in Photoshop, one of the biggest challenges was trying to reproduce in the online card the bas-relief of letterpress on the paper card. It took dozens of tests with CSS3 to find the exact values for the CSS properties that were closer to the effects created in Photoshop. To get the most realistic effects possible, I had to make adjustments to the pixel, and in some cases to half pixel (subpixel rendering).
I also had to search long to find the components of javascript that would allow me to get the dynamism and functionality that I idealized, and had to seek alternative components halfway through, due to incompatibilities with some browsers (mainly IE), in addition to having to adapt them to what I wanted and to make some bug fixes.
The creation of two alternative themes to the main theme also meant a lot of research and especially many tests to find the effects of materials and colors that I wanted, in a result with balance between the 3 themes (Paper, Plastic, Translucent).
Besides these three themes is a 4th theme (which is not available in the bar themes) called 'Transparent'. In the window 'Site Help' I report on this subject, but only here I provide the location of the link that activates this theme: to activate the theme 'Transparent' just click on my name in the bottom of the card, in the indication of copyright.
I looked for that this site could be viewed on different devices of varying sizes without losing quality or readability, from a smartphone to a desktop monitor, through the tablets. At resolution level that means ranging from the most common resolutions of a smartphone - 320x480px, up to Full HD - 1920x1080px or even higher resolutions like 2048x1536px.
And as the technological trend is a steady increase of the resolutions - up to several times Full HD (there are already prototypes of systems with video resolutions 8xfull-HD, ie 7680x4320px, designated synthetically by 8k4k) - creating designs for the future means using techniques that respond to this scenario.
This is where the concept of Responsive Design appears, adjusting the layout to different platforms and resolutions using CSS3 and a flexible design. Applying the concept of Responsive Design is not just a matter of scale, but also of readability, of relative weight of images and video (volume of traffic and velocity), and of layout flexibility to adjust to the limitations of the browser window or device used, but maintaining the same visual identity.
The translation of all text on the website that I made available in 3 languages (English, Spanish, Portuguese) was mainly a work of patience. By providing visitors the reading in these 3 languages means that about 25% of the world population (and about 40% of the Internaut population) can directly read the content of my website, without the need for machine translations that still leave much to desire.
Even from the moment that were all set for what would be the layout and visual appearance of the entire website, which features would have, and have found solutions to achieve what I wanted, yet there have been many changes and improvements until the final product, which resulted from a long maturation and debugging.

The word skeuomorphism results of combining the Greek words skeuos (vessel or tool) and morphe (shape).
A skeuomorph or skeuomorphism is a design element of a product that imitates design elements that were functionally necessary in the original product design, but which have become ornamental in the new design.
Apple Computer co-founder Steve Jobs was noted as a strong proponent of skeuomorphism and the design of the Apple apps reflect that.
Steve Jobs was a fan of software that looked like its real-world analogue and that's the main reazon why Apple turn toward real-world design metaphors.
When it's used appropriately, skeuomorphic design can give users a quick sense of what an app does and add emotional depth to software.