Geekly Articles each Day
📜 ⬆️ ⬇️

How did the new website design Expression Engine

I present to your attention the translation of the article " Redesigning the ExpressionEngine Site " by Jesse Bennett-Chamberlain . Translated in the company UXDepot . Especially for users of Habrahabr with the approval of the publication Digital Web Magazine .


A border guard officer on the border between the United States and Canada: “Are you going on business or relaxing, sir?”
I: On business.
Officer: Please specify the reason.
Me: I am a web developer and am going to meet with my client in Oregon to discuss the project.
Border Guard: What is the name of your client’s company?
Me: "pMachine."
Border Guard: Are you taking any sites with you?
I: * perplexed glance *
Border Guard: Do you have any websites in your car, sir?
Me: Hmmmmm ... no, the sites are now on the servers. In the car, I'm not taking anything.
Border Guard: Then how do you want to show them to your client?
Me: Hmm ... actually, I'm just going to a meeting with a client to discuss the site while I'm not carrying anything to him.
Border Guard: Ok, then enjoy the ride, sir.

(30 seconds of silence)
')
Heather: Next time, say we are going to rest.


Lesson learned. Next time, on the way to a client who will lodge me in a delightful hotel overlooking the mountains, invite my family for lunch and call a three-hour discussion, followed by a few hours of climbing, a meeting , I can say with a clear conscience that I'm going on vacation.

Before this week at meetings with pMachine employees, I had already worked with Rick Ellis on several smaller projects, and we had very good business relations. It opened the way for me to work on one of the biggest projects in my entire career, including the design of several sites for pMachine (now EllisLab ), ExpressionEngine , as well as the redesign of the sites CodeIgniter and pMachine Hosting (now EngineHosting ).

Several years ago I would rush to work on such a project at a breakneck pace, and from the first day I would start working on the layouts in detail. This approach forced me to make several decisions about markup, colors, typography and other things at the same time, and it usually got me into a dead end. Therefore, now I try to divide the process into several stages: marking, elaboration and detailing. In this article I will try to tell about these stages in more detail using the example of working on the website ExpressionEngine.com, and also to demonstrate what to do if in the process of work you have encountered difficulties.



Workspace


In the article for the Cameron Moll website, I already mentioned that in my case
An inspiring work environment is very important for creating great products, and this project was no exception. Actually, I was involved in a project in three different places. I started in a large office on the lower floor, but then moved to the hall upstairs, since we turned the office into a game room. The workplace in the hall was a little less than completely uninspiring, and the time of my work there coincided with the time when I ran into the greatest difficulties throughout the project. Just a coincidence? Not sure, but when I moved to the big bedroom, I started to pick up speed again.





Markup


I started the project from the ExpressionEngine home page, because this is probably the most important page for promoting their products. I also knew that if I decided on the layout of ExpressionEngine, I would be able to use it relatively easily for other sites, since their contents are not so difficult to organize and arrange.

The first thing I needed from EllisLab to create the markup was a list of design elements that they would like to show on the main page. After a couple of hours of discussion at Rick's dinner table, we brought the list of items to the following form:


During the conversation, we also discussed the direction in design that they would like to adhere to. I will touch on this stage in the next section. Having a list of design elements, I was able to open Adobe Illustrator and start trying out some layouts.

Block layout fits perfectly with the “grid design” approach. Every designer should study and understand the markup using a grid.
The first thing I did was install two vertical guides to indicate the width of the site. After that, I roughly sketched out gray boxes for the content blocks. Initially, it resembles a game of Tetris - you need to arrange the blocks with content, trying to find the best location option. When I noticed that the design itself began to be divided into five columns, I placed several vertical guides for greater accuracy. When I liked the layouts, I gave the EllisLab team a look at them.



The answers I received were slightly divided in opinions, since in each of the options there were elements that the team liked. Rick especially liked the horizontal display of the “who uses our product” block. He was concerned that the vertical orientation could be perceived as if users were listed in order of importance. Other guys from the EllisLab team thought that there was not enough space allocated for the news section in Figure 1A (with which I completely agree), and that on layout 1B this information is presented much more successfully.

In the following layouts, I tried to combine the best features of the first two.



The two new options seemed to me quite interesting, but the EllisLab team wanted something simpler. At this stage, we were at a dead end, because the amount of information that EllisLab wanted to present contradicted the appearance they wanted to achieve. In previous discussions, they noted that they like a very clean, concise and professional design. Then Paul Burdick decided to log into the Crazy Egg account in order to get a better idea of ​​where the site visitors click. After analyzing the statistics, he found that the news on the main page is almost not clicked and, perhaps, they can be taken from there. This discovery allowed us to consider option 1A again, but with some changes.

The last version of the markup, which I submitted for review, and in fact was very similar to 1A, but included five blocks with a brief description of the features of ExpressionEngine. The team was also worried that the layout turned out to be too angular and defocused, but they decided that these points could be considered at the next stage.



One of the main advantages I found when working with markup was that I could try many different ideas for assembling elements and adjust them in a relatively short amount of time. If I had done a couple of stages of polishing the design first, and then EllisLab decided to remove the news block, it would disappoint me a little. But, since we were still at the block marking stage, the changes required only a few minutes.

If you look at the level of detail of different versions of my prototypes, you may notice that I have already begun to work on various design options (albeit in small quantities). Throughout the process, I tried several fonts in conjunction with the ExpressionEngine logo, and, at times, when I had been too hung up on the prototype for too long - I went to iStockPhoto , and started looking for images there that I could use for the project. I tell this because I find it useful when the various design phases overlap a little. It is important to be able to imagine what will be in place of the gray blocks. The level of detail that I display at the markup stage varies for different clients. If I feel that it is difficult for the client to imagine the final look of the product and make a decision, I add details until the client is comfortable enough to continue working. Conversely, if I feel that the client is focusing too much on the little things in the early stages, in block marking I limit myself to gray blocks to help them focus directly on the markup itself.



Design study



Typography


As I said, the search for a new font began during the stage of creating the markup and continued during the design study phase. Intuitively, I wanted something pure and simple, like DIN or Gotham fonts (Figure 2A). Although these fonts were better compared to Charcoal , which was used in the previous design, none of them gave rise to the feeling of energy or uniqueness that I was looking for. After rejecting these two options, as well as from my entire font library, I went to MyFonts and spent most of the work day there (or was it three days?) Looking for the right font. First of all, I was looking for a font with a wonderful lowercase “g” and beautiful italic, since I wanted the logo to convey a sense of energy and movement. In the end, I settled on the Agfa Scene font, which completely satisfied both my requirements.



Now, when I found a suitable font, it seemed to me that the emblem could also be slightly changed. First of all, I wanted to try to make “e” more elegant. I settled on the Century Schoolbook Italic font, because its shape and thickness fit the curved arrows perfectly.

Now that everything else has been updated, the arrows looked a little sloppy compared to the other elements. I cut off the inner teeth at the arrows, rounded the edges, and slightly turned the arrows so that they could better fit the “e” and the logo looked more energetic.



Since EllisLab did not ask me to change the logo, I was convinced that with my changes I did not deviate too much from the original logo and it was still recognizable to existing users of ExpressionEngine. In order to preserve the correspondence between the logo and the entire site, I used the Scene font also for top-level headings and page titles. I again turned my gaze to Gotham and decided to use it to name small blocks, where his neatness really shines.

Images and colors


At the same time as I worked on the logo, I also thought about what colors and images should be used on the main site. By that time, it was the hardest part of all the work. At first I thought about the concept of “engine”, and spent many hours searching for an abstract photo that I could use in the main banner block and set the overall tone of the site with it. I didn’t really like the images I found, and during the search I came to the conclusion that the design should speak not about the “engine” (engine), but about expressiveness (expression). One of the main advantages of ExpressionEngine is the high level of flexibility of the possible design, which allows people to express themselves visually, and not limit themselves to what a regular CMS can provide.

When I created the first layout, it seemed to me that flexibility was best shown using a screenshot of an ExpressionEngine website. It would have several unusual features and a different layout than the one commonly used in blogs. I used designer Veerle Pieters' blog , and also used his review, which mentioned the flexibility of this system.

The layout that I used in the first layout after the markup stage was almost the same as the one in the latest version. In addition to the five blocks with the text under the main banner: I decided to combine the three of them into one block. Among other things, this change created enough free space for the introductory paragraph.



This layout was well received, but EllisLab wanted to make a little more impression with the help of color, and they called this palette slightly pastel. Quite reasonable. I darkened the background color of the site to highlight the banner a bit, and added a couple screenshots of the ExpressionEngine control panel.



Everyone really liked this option. Everyone except me. I felt that the repetitive horizontal dark stripes stretched across the entire page (as a result of darkening the background) too split the look of the page, and you can find a better solution. As a result, I tried to combine the two areas and using the background color to separate the sections. This decision still seemed to me unfinished, so I decided that I would try again to correct this point before agreeing on an option that everyone liked.



I don’t think that I ever showed the layout of the EllisLab to the guys below, but it was he who served as the basis for the final version of the site, which we finally chose. The buttons turned into bookmarks, and the opening paragraph moved up to the banner area.



There were many other options and ideas besides those shown here, but the ones I showed represent the most linear way from beginning to end. By the time the project was completed, I had twenty-three files from Photoshop with slightly different design options for the main page alone, and more than a hundred files for all EllisLab sites combined.

Icons


One of the most important discoveries I made while working on this project was a couple of IconDrawer icon sets. These icons really carry the design of some pages on their pixel backs. Take, for example, the main page. If I had to remove the large icons from IconDrawer and replace them with my favorite and frequently used famfamfam icons, these tabs would not have begged them to click on them. Another example: a product feature description page (one of my favorites) that would be completely flat without these icons. The best $ 113 I ever spent.



We pull out the pixels


When I decided that the chosen direction in the design has good potential, I began to impose on the design a new layer of subtle improvements and details. The dictionary in my Mac defines “ subtle ” as “ differences so minor that they are difficult to analyze or describe .” This definition describes well the balance that I sought to achieve by adding more details to the design. The goal here is not to attract attention to the details, but to create some kind of visual component that is very difficult to analyze or describe - it is difficult , but not impossible.



Take, for example, the basement: if you compare the basement of one of the earlier options with the finished one, you will see several minor changes that were made to give spice. I changed the icons so that they harmonized with the rest of the site, added a soft gray gradient along the bottom edge to create the impression of volume and slightly changed the buttons, giving them a more “push-button” look. None of these effects stand out by itself, but their total totality is much better than the sum of the parts.



However, the basement was not yet fully prepared. After I enlarged the image several times, I saw that my vector graphics did not completely coincide with the photoshop pixel grid, as a result there were blurred edges at the bottom right. If you look again at the original screenshot above (), you will see the difference. Pixel detailing, like this one, although almost invisible to the naked eye, plays a big role in the long run.



Be able to get out


Initially I didn’t plan to write this part of the article, but after right before launching the site, unexpectedly for me, a significant change was made in the design, I thought that I could write some tips describing what to do if something goes wrong. according to plan. You may have already noticed that the sections “who uses our product” in the layout and on the live site are slightly different. In the morning, when the project was about to start, I uploaded the developed site and found that the block with users was replaced by a new block with an image and a message.



I was very surprised by this change and went to iChat to ask Rick about him. I was very attached to those three columns, and I was wondering what happened to them. Rick said that he had a lot of thought on this, and he was confident that the new block with the message was what was needed, and if I wanted to change the image a little, I could do it. My first impulse was to fight against the change, and convince them to return the layout to its original form. Having on hand only fifteen minutes before the launch of the site, I quickly sketched and showed Rick the layout, which, according to my feelings, combined a new message and an old general style.



Rick obeyed his instincts (which I fully respect), and
insisted that this information should be presented as he intended. Then I conducted a quick funeral ceremony for those three columns (I will miss you very much), rolled up my sleeves and began to do what designers do best - to solve problems. The new image on the left visually weighed about the same as the photo in the block of special users on the right, they vied with each other for attention. In addition, the new title and text did not coincide with the main five-column grid, which made the transition from the title to the content of the blocks a little sharp.

I made the logo as light as possible to resolve the issue of visual weight, and placed it under the heading, which could now be leveled to the left. Rick approved the changes and we managed to implement them in a matter of minutes before the launch of the site.



Fuh.




And this is not the end


The launch of the site does not mean that my work is over. I think it is very important to have a clear idea of ​​what you want to see on the site and to be confident in your choice, it becomes easier in the process of gaining experience. At the same time, we are talking not only about the designer, but also about customers and users. I think that we will still feel the need for some improvements over time, when these sites will be used and we will have time to watch them.
In this sense, the site is not static in terms of design and after launch it is not so much my creation as a living, growing and breathing creature, which will vary from user interaction.

PS from translators : I hope you enjoyed the article. We will be happy if you point us to errors in the translation so that we can correct them promptly. Write me in PM, please :)

Source: https://habr.com/ru/post/114943/

More articles:


All Articles