Many clients, when describing their wishes for the future website, express themselves succinctly: “We want something in Apple style!” In their opinion, such a response should give the performer comprehensive information, immediately dot all the i’s and eliminate any ambiguity. But in reality, of course, everything is more complicated. After all, anything can impress a person in the Apple style - the presentation of a new tablet, a simple white iPhone box, or the Apple website itself. And the most offensive thing is that, quite likely, when saying “make it in Apple style,” the client himself simply does not know what this really means. What about the unfortunate performer, who, perhaps, simply has no idea what is ultimately expected of him?
Let's try to figure it out!
Apple principleApple's approach is based on a very simple principle - you cannot make a truly high-quality product without taking on all areas of work on it. Everything needs to be done actually high level. When releasing a new phone, you cannot hope for the phenomenal quality of its screen and low price, if there are cracks in its clumsy body, and the advertising slogan on a huge billboard is misspelled.
“Well, we saved on copywriting - we don’t sell texts, but a telephone,” most will think.
But that’s the whole point! From Apple's point of view, the experience of owning their products begins even before you shell out your hard-earned money for any iPod, and therefore there are no insignificant elements in this chain. This is not only technology, not only packaging, but also advertising, and a showcase, and a website, and texts on the site. There are no minor elements here. And “the packaging itself can tell a whole story.” Accordingly, the first thing worth understanding about the “Apple style” is scrupulous attention to all areas of work.
The second important feature of Apple products is their elegant simplicity. It plays a very important role at Apple.
“Why do we think simplicity is good? Because when we deal with objects, it is important for us to feel that we are in control of them.”
Well, the third critical feature is the details. All those little things that you don't notice, but that create that everyday comfort of using Apple products - transition animations, sounds, the click you hear when adjusting the volume, the feeling of smoothness with which you scroll through the page and much, much more.
But everything that I have described so far has concerned the product. And in our initial example we were talking about creating a website. How to apply these approaches in web design? To answer this question, let's take a look at the Apple website and try to understand what stylistic devices are used on it.
Approaches Photos and illustrationsThe first thing that catches your eye when visiting the Apple website is high quality photos products. Truth be told, I think these photos do half the work of evoking a drawn out "Wow!" from the visitor. They are all large, bright, made in the same style and allow you to see all the details.
The same magic of photographs. According to some, it is “an ordinary block with rounded corners,” but in such photographs it evokes admiration.
Our next point will be airiness - all elements on the page are very comfortable and free, white background gives the content area a feeling of lightness. And to avoid the impression that the entire page is falling apart, it is collected by a light gray background with a light frame.
FontsThe Apple site uses only two Adobe Myriad typefaces for titles and standard font MacOS X systems - Lucida Grande. Both typefaces are strict and modern sans serif fonts that only support the overall minimalistic style. What is characteristic is the desire for high quality is also present here - due to the desire for large headings on the site to look guaranteed beautiful in any conditions, Apple uses images rather than text for inscriptions.
Apple also owes its reverent attitude to fonts to Steve Jobs - after he left college, he attended various courses, including a course of lectures on calligraphy.
Rounded cornersAlso on the site there are the famous (where would we be without them!) rounded corners. They are literally everywhere! To be honest, sometimes it seems that the iPhone was invented only to continue the tradition of using rounded corners.
Rounded corners are everywhere - in the phone body, application icons and even on the “Home” button.
The next item is also the famous Aqua glare and gradient effects. Recently, their number on the site has noticeably decreased. They are often used to emphasize a particular element.
Main menu on the Apple website. A tribute to the famous Aqua style - after the resignation of Scott Forstall, minimalism is increasingly dominated by skeomorphism and caramel effects.
ContentApple paid no less attention to the content of the site, the text and its presentation. Interesting feature One might consider the absence of the much-loved “About the Company” section, because the main thing on this site is products.
Modern effectsIncreasingly, websites are starting to use animation or other similar effects - they add dynamics, show advantages in a new light, or help to understand the principle of operation of some detail.
Is that all?Obviously, this approach cannot be used indiscriminately for all sites. It belongs on presentation or promotional sites. And most importantly, you cannot repeat a style based only on visual cues. A website is a holistic, finished product, each stage of its creation must be performed at a high level, with love and ideas.
Insufficient development of just one of the stages will instantly destroy the fragile magic of the “Apple style”.
Using the techniques described above will help you create a beautiful, neat and modern design, but will not free you from the remaining stages of creation - writing competent texts and using them in required quantities, creating video presentations and high-quality photographs.
The Apple cult leaves no one indifferent, and let's face it: one of the key factors in Apple's popularity is their unique design. Designed by Apple in California illustrates how designers treat their products as art.
Cupertino, California - On November 16, Apple announced the release of a new hardcover book titled "Designed by Apple in California." Two decades of design innovation are captured in 450 photographs of the company's past and present products, from the iMac in 1998 to Apple Pencil(2015). The book took 8 years to create and was dedicated to the memory of Steve Jobs.
“The idea of creating something important for humanity motivated Steve from the very beginning, this idea is our ethos and the purpose with which Apple moves into the future,” says Jony Ive.
“Designed by Apple in California” is the result of close collaboration between many teams of designers and specialists from completely different fields. They all share the hope that the book will give people an understanding of how and why Apple products are created and exist. All photographs were taken by Andrew Zuckerman in a technique he describes as a “deliberately modest style.” The photographs illustrate the details of the design process as well as the finished products themselves.
This is a book about design, but it's not about the designers themselves, the creative process, or product development. It objectively reflects Apple's style, image and design ideology. Many products look so clear, simple and logical that they seem to have no reasonable alternative. For each device, even the design of the tool with which it is made is thought out.
“As designers, we live in the future, love what we’ve already made, and obsess over what we haven’t yet made.”
“One of the most important things we have learned in our 20 years of working together is the need to listen to each other, because the brightest ideas are often those who speak very, very quietly.”
Designed by Apple in California is a limited edition book available in two formats: small (25.9 x 32.4 cm) for $199 and large (33 x 40.6 cm) for $299. It is printed on specially produced paper with a special coloring and matte silvered edges. Sold exclusively on Apple.com in the US, Australia, UK, Germany, Hong Kong, Korea, France, Japan and Taiwan, and at select Apple Stores.
Once upon a time, Apple was famous for its ability to develop simple and easy-to-understand products. She was a champion of graphical interfaces within which users could intuitively understand what actions were available to them and how they could be selected. Having completed this or that operation, people always received clear feedback and had the opportunity to cancel everything if the result did not meet their expectations.
But all this came to an end. Even though Apple products now look even more attractive, this external beauty came at a price. Gone are the fundamental principles of good design: clarity, feedback, recovery, and more.
In their quest for visual perfection, the Apple team created fonts so small and thin (combined with low contrast) that they became impossible to read even for people with normal vision. They created a bunch of vague gestures that even the developers themselves can't remember, and a lot of cool features that most of us don't even know exist.
Products, especially those based on iOS, Apple's operating system for mobile devices, no longer follow well-known and established design principles developed decades ago. These principles, based on both experimental science and common sense, have introduced the power of computer technology to several generations and given Apple products an excellent reputation for their clarity and ease of use.
Unfortunately, Apple is now gradually abandoning these ideas. Their design guidelines for iOS and Mac OS X still include similar concepts, but many of them are not practiced internally at all. Apple has lost its way and now, by emphasizing style and appearance, they are acting at the expense of the values that were once their main trump card in the fight against competition.
Apple is destroying design. Moreover, by their actions they again make people believe that good design relies only on a beautiful wrapper. But this is not so! Design is a way of thinking: first identifying the fundamental needs of your audience and then satisfying them with products and services. This discipline requires developers to understand people, technology, society and business.
Creating beautiful objects is only a small part of modern design: today specialists from this industry work on problems such as the design of cities, transport systems or medical facilities. And yet Apple continues to reinforce the old, tired idea that a designer's only job is to make things beautiful, even if it comes at the expense of functionality, clarity, and ease of use of the interface.
Apple, you have always been leaders. Why are you acting so self-centered now? But more importantly, why does Google follow all your worst examples?
Yes, Apple was once known for ease of use, with computers and apps that were easy to understand, had impressive features, and could be used without any instructions. All operations were easily detected, any actions could be canceled and corrected, and the system provided you with detailed feedback so that you always understood what you did. Users raved about the capabilities of their Apple devices, and Apple's design guidelines and principles were powerful, popular, and influential.
However, when the company switched to gestural interfaces with the advent of the first iPhone and tablets, its management intended to abandon many of the key principles that had previously been observed. There is no more evidence of actions - we are left with only pathetic scraps feedback. Why? Apple took a radical step towards visual simplicity and elegance, and in doing so dealt a serious blow to the learnability, usability and productivity of their solutions.
They started implementing delivery systems that customers had difficulty using and learning, but they got away with it because people don't recognize such problems until it's too late and the money has already been transferred. But even then, for the shortcomings of their devices: “If only I weren’t so stupid...”.
Today's iPhones and iPads are a treatise on visual simplicity. Great fonts. Clean layout, free of extraneous words, symbols or menus. It doesn't matter that many people can't read the text. But he is handsome.
In one survey, a woman claimed that she had to use Apple's assistance tools to make their tiny fonts large enough and contrasting enough to be readable. However, she also complained that in many sections of the app, this option made the fonts so huge that the text simply didn't fit on the screen. Given the fact that she had no vision problems, she would likely have been able to read the same text with ease before Apple switched to font types with finer strokes and less visual contrast.
What design philosophy causes millions of its users to feel limited when using a product? Apple could have designed their smartphone so that most people could use it and read text from it without being labeled as inferior.
But what's even worse is that the auxiliary tools destroy the very beauty that the Apple company relies on so much, because sometimes because of them the text does not fit on the screen. If the font had a little greater width, higher contrast and a little less anti-aliasing, Apple would have retained not only its beauty, but also its legibility.
The cancellation was refused. And do you know what happened? There were a lot of complaints so they returned this function in a slightly different format: all you had to do to undo the action was shake your phone or tablet hard. However, cancellation was never implemented universally, and you could only find out about it by shaking your device. Moreover, if the function did not work, users did not know whether the problem was that the gadget was not shaken hard enough, or that the cancellation was not provided for this particular situation.
On touch screens, especially relatively small devices, a lot can go wrong when an active link or button is accidentally touched. These random touches direct the user to a new destination. The standard, simple way to eliminate such mistakes is to have a “back” button: in smartphones running Android OS, this function is built in as a universal controller that is always available, but Apple does not use it. Why? Unknown. Perhaps they are trying to avoid using buttons or menus? As a result, they get a clean and elegant appearance, but this visual simplicity is deceptive, because it increases the complexity of the interface.
Apple places the back arrow in some places, but unlike Android, where it is available everywhere, their undo and back buttons are implemented at the discretion of the developer. Not everyone, including Apple, implements these capabilities.
How can a person know which way to swipe, how many fingers to use, and how often or for how long to touch the screen in the absence of any pointers on the display? People must remember these gestures by hearing about them from a friend, by "reading the instructions" (which there are none), or by discovering them completely by chance.
Apple products are beautiful and attractive! That is why, when faced with difficulties, its users tend to blame themselves. This is good for Apple, but completely unfair to customers.
A good design should be visually noticeable and pleasant to use. However, pleasantness requires that the device be understandable and convenient. It must adhere to basic psychological principles that lead to feelings of understanding, control and pleasure. These include clarity, feedback, proper display, appropriate use of restrictions, and of course, the ability to undo your actions. These basic design concepts are taught to future UX professionals first and foremost, and if Apple were involved in similar training, they would fail.
More attractive, but more difficult to use
What are the consequences of avoiding proper design methodology? Higher maintenance and support costs. And ultimately, the “defection” of unhappy customers who may openly praise Apple's simple interface, but at the same time will save money for a phone from another brand, in the hope that they will be smart enough to manage all its capabilities.
In this case, stories about grandparents who could not master a computer, but now easily use technological devices such as tablets, will be inappropriate. Just think, to what extent have they mastered new technologies? Yes, gesture devices, tablets and phones have a lower barrier to entry for initial use, but mastering their advanced functions (for example, sending three photos in one email, formatting specific text, or combining the results of several different operations) is much more difficult. You can perform these and many other actions on traditional computers much easier and more efficiently.
New generation software has made giant leaps in attractiveness and processing power, while at the same time becoming more complex to use.
This problem is not limited to Apple. Google Maps also evolve according to the same principle and become more confusing with each iteration. The same applies to Android. operating room Windows system Microsoft's 8 has a pretty smart design for gesture-based devices, which solves a lot of the problems described above, but it fails to integrate the different style of work needed for desktops that are designed for productivity.
So what's the problem? The point is that design comes in many versions, just as each discipline has several varieties. When creating software, the lead programmer does not necessarily understand interactive programming, and the kernel developer may not know anything about telecommunications coding. On the other hand, interaction designers with a background in psychology know the principles of conceptual models, clarity, and understandability, while for computer science experts it is the “dark forest.” However, design professionals tend to think that interaction design means websites, and they often do not understand the intricacies of programming and human-computer interaction.
This is important because people end up doubting themselves because they can't use an interface that is designed to appear perfectly clear when it isn't. This is important because cutting-edge technology products are regressing in both usability and usefulness.
What went wrong?
One of the Nielsen Norman Group partners, Bruce Tognazzini, worked with Steve Jobs in the early days of Apple. A usability expert (Donald Norman) joined the company shortly after Jobs left and then left after Steve returned in 1996. They didn't witness the transition from easy-to-use and understandable products (when Apple could actually boast that manuals weren't necessary) to today's devices, which don't come with manuals but still often need them.
Before Jobs returned, they say, Apple approached product development with three factors in mind—user experience, engineering, and marketing—all of which were involved in the design cycle from day one until the product shipped.
Today, Apple no longer tries to make its products understandable and useful. Instead, she designs them ethically. Unfortunately, as research from scientific journals on human-computer interaction and human factors shows, visually simple appearance does not translate into ease of use.
Apple deliberately hides the complexity of its products by hiding or even removing important controls. It would seem that what could be simpler than a one-button controller? Yes, this is a very simple solution, but with one button your options for using the system are extremely limited unless it has certain modes. They allow you to set the control to different values at different times, but this confuses users and leads to errors.
Alternatively, one controller can have multiple hidden functions, due to which the button (or touch screen) is capable of performing various operations with a single, double or triple press, when touched with one, two or three fingers. Or perhaps by using a given number of fingers, a given number of times, in a given direction: just open the "panel" System Settings» on the Macintosh and explore the choices (and differences) in the meaning of touches and gestures on an Apple mouse or trackpad.
A simple appearance can make controls more complex, more arbitrary, more difficult to remember, and more vulnerable to various errors. In fact, in the early days of the Lisa and Macintosh computers, Apple's slogan was "No Modes." The only way to avoid mods is to use dedicated controllers, each of which must always perform the same task.
The principle of modes and the trade-off between appearance of simplicity and actual simplicity in action are taught in elementary courses in interaction design. But why don't Apple want to apply this knowledge?
All modern computer companies issue manuals for user interface for their developers. Apple was the first to create such a guide, and it served as an excellent description of the principles of good, clear design. The earliest edition of the Apple Human Interface Guidelines was written in 1978 by Bruce Tognazini. By the time it was released in 1987, and it was created over two years (1985-1986), all the key principles of modern interfaces were incorporated. When Steve Jobs returned to the company in 1996, they were still being followed.
That complete set of Apple concepts was the result of Tognasini's project, which studied the basic principles of the interface of their Macintosh. Before that, they were known only to a narrow circle of people involved in UI development. Thanks to the writing of this manual, training new employees has become much easier, and the number of developers for Macintosh products has begun to grow significantly.
In creating the principles, the team relied heavily on research conducted by the newly formed Human-Computer Interaction (HCI) community. Focused on the work of Donald Norman and his students at the University of California, San Diego, which was published in papers at PCI conferences in the early 1980s and in a book entitled User Centered System Design, edited by Norman and Stephen Draper in 1986.
It is important to note that these fundamentals reflect the needs, desires and abilities of people, not the machines they use. They apply to today's interfaces just as much as they did to early versions of the 1980s, and will remain so until users evolve.
Apple's modern iOS UI Guide for Developers does outline many relevant principles, but the emphasis is still on simplicity (specifically, the appearance of simplicity) and user satisfaction and enjoyment in general. These attributes play an important role, but are far from decisive.
More specifically, the guidelines remind developers no less than 14 times to ensure that their visual communication is sufficiently sophisticated. It is clear that the design should be as clean and simple as possible, but this should not be achieved at the expense of removing necessary cues. How can a designer know if they are the right ones? The only known way is to conduct user testing. But what can a user interface manual tell you about usability testing?
This is a really good idea. You should conduct tests with people who are representative of your expected purchasing audience, not with a few peers, as Apple suggests.
Apple's original design principles emphasize the importance of creating systems that are clear, easy to learn, and functional. But somewhere along the way, the company lost the key fundamentals it had always followed. The image below shows how the fundamental principles of Apple's guidelines have changed over time.
This table describes the evolution of Apple's user interface guidelines from 1995 to 2015. Because gesture devices use operating system iOS guidelines are located to the left of the 2015 guidelines for the more traditional OS X.
As you can see, the perceived stability and regimelessness disappeared sometime after 2008. Forgiveness and mental models were lost in the transition to iOS, along with the evaluation of explicit and expected actions. See-and-Point was removed from iOS guides in late 2010 with the release of iOS 4. Back in 1995, aesthetic integrity was one of the least important factors, but in 2015 it is crucial. Along with this, metaphors and user control have lost several positions and slid down.
Missing Principles
The most important principles that are completely or partially ignored in iOS are clarity, feedback, restoration, consistency and encouraging growth:
Clarity
Clarity, or the ability to look at a system and instantly discover all the suggested actions, has always been a key element of Apple's design success. In the early stages this principle was called “see and point”, since everything available operations were presented in the form of buttons, icons or menu items visible to the user: you see the action you want to perform, move the cursor over the corresponding object and click on it once.
Simply put, clarity involves filling the interface with more visible and understandable elements so that people don't have to remember them. Menus on traditional PCs follow this idea nicely. Labeled icons too. Unlabeled icons fail most often, but the lack of any hint of interactivity is to blame. Please note that clarity is no longer mentioned in Apple's guides.
Feedback
Feedback and its “friend” feedforward allow a person to find out what happened after an action was performed or understand what will happen if the action is selected.
People rely on a constant stream of feedback to evaluate the effectiveness of their actions. In the real world we receive feedback automatically, but in the virtual world it occurs only if the designer has thought about it. Without feedback, users may not be confident in their current state within the system and will not feel any responsibility.
Recovery
Mistakes happen. The recovery principle states that it should be as easy to undo an operation as it is to perform it. Referred to as leniency, it has also disappeared from current guidelines and the table above. Recovery was implemented using the "undo" button, which was invented in 1974 at Xerox Corporation's Palo Alto Research Center (PARC), probably by Warren Teitelman. As you know, the Lisa and Macintosh computers borrowed their basic structures from early developments of PARC (Apple bought the rights from Xerox).
The Cancel command can be undone using the Redo button. Undo and redo help people not only correct their own mistakes, but also experiment with new things more freely.
Undo allowed users to restore content, and the back button was a utility command that allowed them to return to a previous location in the navigation system. The original graphical interfaces eliminated the need for people to backup, excluding navigation. Instead, all documents and tools were made available to users. Browsers and iOS are relics of early navigational interfaces, where people wandered through a maze of transitions leading to modal screens.
Browsers that support Internet navigation provide a back button to allow users to return to previous parts of their journey. iOS doesn't provide such a generalized tool, so if you accidentally click on a link within an app, for example, it will direct you to Safari or Youtube or wherever, without providing you with any escape route. Back and forward buttons should be standard in iOS so that the interface forgives people for accidentally navigating instead of punishing them for it.
Consistency
Most modern users have multiple devices, but the operations of these various gadgets often intersect. Even within one Apple devices managed to break consistency: rotate the iPhone and the keyboard layout changes, rotate the iPad and the icons on the home screen rearrange in unpredictable ways.
Consistency is still listed in the guidelines, but this principle is hardly followed. Magic Mouse works differently than a trackpad, and its controls are different from the gestures used on an iPhone or tablet. Why? Such contradictions usually occur when designers work in isolation, without exchanging ideas with their colleagues.
Encouraging Growth
Good design encourages people to learn and grow by taking on new and more complex tasks as soon as they master the basics. Snapshot enthusiasts evolve to become photographers, authors personal diaries turn into bloggers, and children try their hand at programming and eventually try to build a career in computer science. For decades, encouraging growth has been Apple's the most important principle, which has always been accepted by users.
Hello, dear readers! Web design and web development are evolving very quickly. Every day we see more and more new products, be it applications or new services, that make our online life more productive and convenient. And web design is simply a limitless space, limited only by the talent and skills of the “artist” (designer). So, today we’ll talk about LESS - a dynamic style markup language that will simplify the writing of CSS styles.
LESS is a superset of CSS. This means that any CSS code is valid LESS, but additional elements LESS will not work in simple CSS code. This is great because the existing CSS is already valid LESS code, which reduces the barrier to entry into the new technology.
LESS adds a lot of useful dynamic properties to . It introduces variables, operations, elements and mixins. Being able to write stylesheets modularly will save you a lot of hassle. 
LESS makes writing styles much easier. For example, using mixins, we create something like functions that can take arguments. Mixins - allow you to include all the properties of a class in another class by simple switching on the class name as the value of one of the properties.
1 | Rounded-corners (@radius: 5px) ( |
And the compiled CSS will look like this:
1 | #header ( |
Load the prefix-free.js library and link it to index.html:
< script src= "prefix-free.js" type= "text/javascript" > |
Let’s finish the preparations here and move on directly to creating a menu in the Apple.com style
HTML markupThe menu layout is quite simple. The menu is based on an unordered list. Open the HTML editor and paste this code:
1 |
In this section we will start writing menu code in LESS language. For those who are new to programming, both writing and LESS syntax, don’t worry, I’ll try to break everything down to make it clear. Perhaps even someone will like this way of writing styles for a site, because it is really more productive.
Let's look at what components the menu will consist of: 
As we can see in the screenshot above, the Apple.com navigation has the following 6 main parts:
- Shadow is used;
- Border;
- Separator between menu items;
- Gradient for background;
- Dimming effect on mouse hover;
- Menu text.
You can use written styles in two ways:
- Crunch
Important: when using the first method, styles.less must be included before the less.js library is included! Also, don’t forget to connect prefix-free .
Thus, connecting styles looks like this:
1 |
|
We will use 2 files: config.less in it we will define all the variables, mixins, etc., after which we will import it into the second (styles.less) in which we will already create styles for the menu elements.
Now let's look at the code in config.less. Let's define the base color of the menu using variables. A variable in LESS is declared using the @ symbol.
In the code above I have not included a prefix for box-shadow , the prefix-free library will automatically add it. Additionally, the shadow color is inherited from the color of the @theme variable.
Let's define a style for the menu borders using mixins with a parameterOur menu will need a border with rounded corners. Mixins with a parameter - actually has the same functionality as a simple mixin, the only difference is that it also has a variable parameter.
1 | Border(@radius : 3px ) ( |
In the example above, we set the default @radius to 3 pixels and, as we said, this value can be changed.
Define the gradient, separator and hover style using operationsIn LESS, you can use operations to increment, decrement, divide, and multiply both property values and colors, allowing you to specify complex relationships between properties to achieve the desired result. Let's take a look at the following code, which sets the properties for the menu separator:
1 | Divider ( |
In the example above, we subtract the color #111 from the @theme variable, so the left side of the separator will be slightly darker than the base color, and the right side will be lighter. These are the kinds of manipulations we can do with HEX color.
To make color manipulation more clear, let's look at the color scheme: 
The maximum dark color is #000 (black), the maximum light color is #FFF (white) and the base color is #555. So, if we want a color three levels darker, we'll subtract #333 .
Now the gradient styles:
1 | Gradient ( |
We plan to use 2 text colors and text shadow colors. One option is used if the background of the menu is light then the text color is dark and vice versa.
First, if the text color does not have a brightness equal to or greater than 50%, then the shadow should darken, in this case the color #000000.
At this stage, we finish creating the config.less file and move on to creating the styles.less file
Import config.lessLet's create a file called styles.less and first of all attach the already created config.less to it, in the following way:
At the moment, the result of our work looks like this. 
Not very attractive yet. But there is still more to come.
Basic style for menus with nested rulesIn LESS, we can nest the styles of any element directly into the style of the parent. The navigation tag is nav HTML5 specification, which contains all the necessary elements for navigation. Here are his styles:
1 | nav( |
Notice that instead of writing a bunch of CSS rules, we just defined the height, width, and padding. While we pick up the border and its style, as well as the shadow using mixins, we specify the class name .border and .shadow and the rules of these classes, which we wrote in the config.less file, are added to the nav class. 
1 | nav( |
However, in LESS inheritance occurs differently, it is easier and more logical to understand:
1 | nav( |
As you can see in the picture, the elements of the li list are located vertically, but we need them to be positioned horizontally. To do this, set the property display:inline;
1 | nav( |
1 | nav( |
In the above example we are using hex color #f2f2f2 , this color has brightness over 50% so the shadow will be set to black automatically. The rest of the code I'm sure is quite obvious. 
li (
display: inline;
a (
text-decoration: none;
display: inline-block;
float: left;
width: 156px;
height: 45px;
text-align: center;
line-height: 300%;
.divider;
.gradient;
}
}
li: first-child a (
border-left : none ;
}
li: 50px auto 0 ;
width: 788px;
height: 45px;
.border;
.shadow;
ul(
padding: 0;
margin: 0;
li (
display: inline;
a (
text-decoration: none;
display: inline-block;
float: left;
width: 156px;
height: 45px;
text-align: center;
line-height: 300%;
.textcolor(#f2f2f2 ) ; // You can change this line
.divider;
.gradient;
&:hover (
.hovereffect;
}
}
}
li: first-child a (
border-left : none ;
}
li: last-child a (
border-right : none ;
}
}
}
Well, that’s all, writing apple.com can be completed here. It remains to decide how we will attach the written styles to the web page. As I mentioned above, you can use written styles in two ways:
- connect styles.less and the less.js library;
- or compile styles.less in the Crunch program and already attach regular styles.css to the page
Of course, the second option is better, why attach 2 files and do double work on the client side, so let’s compile the written LESS styles into regular static CSS.
To do this, click on the big Crunch It button! And keep the normal styles.css 
This concludes the lesson.
P.S.: Anyone can make such a simple menu, but if you need a really cool website with beautiful effects, then I can recommend you one of the best web studios in Ukraine. The guys will be able to make you a truly unique design, perform search engine optimization and promote your site!
You are the happy owner of a small but cool company. Triumph is still far away, but you have no doubt that over time your business will become a source of pride and an example to follow. By the way, you don’t have to wait for this moment: you can position yourself as a high-class professional right now by making a convincing statement, like that of a large and serious company.
Don't know what such a site should be like? Don't worry, now we will explain everything and tell you how to proceed. If you use our tips, you will no longer have to sigh sadly looking at the websites of Apple, Nike or L’Oreal, because your own will be no worse. So, here are some guidelines for creating a solid, professional website.
Big brands are constantly updating and improving their websites. Teams of experienced designers and developers are working to create an unusual and modern resource that arouses people's curiosity and desire to take a closer look.
Yes, it is very expensive, but there are also free options, such as Wix. Our editor was created specifically so that you can make a nice website for any type of activity and add some fashionable effect to it, for example, parallax scrolling or video as a background. You can make a current “long” page and supplement it with “flat” design elements*.
We think that at this stage it won’t hurt you to visit websites for designers and get some inspiration. Our recommendations: magazine Web Inspiration, blog Lopart and design magazine Duty room; If English language no problem for you, read Vandelay Design , Smashing Magazine And Webdesign Depot .
*Don't understand what all these words mean? So you need to read our.
Large companies have a recognizable corporate identity and a very clear positioning. They use strictly defined fonts, colors and slogans. You will unmistakably recognize the red Coca-Cola logo, whether it is on the website, bottles or billboards along the street.
So what if your company is not as big as Coca-Cola? This doesn't mean you don't need to do branding. A well-thought-out corporate identity is important. Thanks to it, people will be able to quickly identify your product, and then it’s just a stone’s throw away before making a purchase. Therefore, draw a nice logo, come up with a slogan, choose branded fonts, colors and design your social media pages accordingly. More tips in our article about.
Less is betterWe understand that you want to talk in detail about your product and business, but we do not recommend overloading the site and boring visitors. The site loads very poorly, is difficult to read and repels visitors. The best is the enemy of the good, so you need to learn to stop in time.
Let's think about what can be removed from your site. If the texts are full of technical and in professional terms- get rid of them. Do you think visitors really need to know detailed biographies of all your employees? Unlikely. Some things, of course, cannot be shortened, for example, detailed description goods or services, but that's normal, this information is useful. It’s even worth moving it to a place where it definitely won’t go unnoticed. And everything that slows down the purchasing process can be removed without the slightest regret.
Now let's look at the design. Reduce the number of colors to three or four, remove any unnecessary pictures, and pay attention to the typography. Don't forget to leave more free space, also known as "air". When there is a lot of “air” on a site, people notice all the critical elements, such as those necessary to push visitors to purchase, subscribe, register, etc.
Show the product on the home pageDo you want to increase the number of orders? So, make sure people see your product right away. Look at the websites of famous brands. You see, they place products not only on the shopping page, but also on the main page so that people are sure to notice them. If you have and are thinking about how to increase sales, feel free to copy this technique.
Of course, product photographs must be large and of very high quality. Don't forget that this is happening in an online store where you can't touch or try on anything, so people make purchasing decisions by looking at the picture. If you don't have money for a professional photographer, read our article about. A little practice - and everything will work out! And don’t forget about the capabilities of our editor; you can add an application to the site so that the client can enlarge the image of the item of interest and take a good look at it.
We think you've ever found yourself on a poorly designed website and wandered back and forth in confusion in search of the right page. As a rule, we leave such places empty-handed and with the desire to never return. And it’s all due to ill-conceived navigation. Don’t repeat this mistake and make sure everything is clear to the visitor from the very first seconds.
If you get asked the same thing over and over again, make a page with answers to frequently asked questions. You can use the application Wix FAQ. Its advantage is that people get the information they need, and you are not distracted from other matters.
Do you want to show that your company is responsive and friendly? Add the application " Live chat Tidio” to answer questions in real time. You can install it on your smartphone and not sit at the computer all day, but go about your business and stay connected.
Show that people trust youIt's good that you try to be in touch and answer questions on time, but this is not enough to build trust with clients. To do this, you need to work on the site again. Make a separate section with the history of the company, talk about who you are, what you believe in and what you consider important. There is no need for too much information: the text should be short, sincere and understandable. It's quite difficult to show what kind of person you are on the Internet, but we think a page like this will do the job perfectly.
We also recommend adding customer reviews to the site - at home page or in a separate section. By reading them, people will understand that your product is trustworthy. By the way, Yandex and Google also pay attention to reviews, which means that they influence.
Make a mobile version of the siteMore than half of Internet users access the network from tablets and smartphones. This means that mobile version a website is not a whim, but a necessity. Fortunately, you don't have to worry about how to do it. IN Wix editor mobile version is generated automatically, you just need to test it and tweak a few things. Don't forget that the mobile version is not an exact copy desktop, so remove all unnecessary elements and make buttons and contacts visible.
Pay attention to how older and more experienced colleagues manage their pages on social networks. Yes, to reach your audience more fully, you need both a website and pages on Facebook, VKontakte, Instagram, etc. Social networks are ideal for publishing news, writing about a product and answering questions. It is important not just to talk about work, but to form an image and build normal, trusting relationships. If you don’t really know what to do, read the article about and follow all our recommendations.
After you create a page on one site or another, tell visitors to your site about it. Add social media buttons to the header, footer, or contact section. We also recommend adding the application - it's free, and large companies they use it willingly. With its help, you can manage up to ten accounts from your website: publish news, respond to comments on time and surprise clients with speed, impeccability and professionalism.
Are you ready to stand on par with big brands? do it yourself on Wix - it's easy and free!
