LESS CSS: Apple style menu. The history of brand design in Apple's new book Compiling LESS to CSS

Yablokovskiy design has always been very popular among my clients. When it comes to design, I am often told “I need a simple design with a light gray background” and use apple.com as an example.

If you browse their site a bit, you'll find some really nice blue buttons. There they are made in the form, so if you want the same ones on your site, you will have to use Photoshop.

So I lay out the buttons in pure CSS:

Apple-button ( cursor : pointer ; padding : 3px 10px; text-decoration : none ; color : #fff; font-size : 13px; text-shadow : 0 -1px 1px rgba(0 , 0 , 0 , .3) ; background-image :-webkit-linear-gradient(#52A8E8 , #377AD0#377AD0, #52A8E8 ) ; background-image : -o-linear-gradient(rgb (82 , 168 , 232 ) , rgb (55 , 122 , 208 ) ) ; background-color : #52A8E8 ; -moz-border-radius : 23px; -webkit-border-radius : 23px; border-radius : 23px; border : 1px solid #205 59A; box-shadow : 0 1px 2px rgba(0 , 0 , 0 , .5) , inset 0 1px 0 rgba(255 , 255 , 255 , .3) ; ) .apple-button :hover , .apple-button :focus ( background-image :-webkit-linear-gradient(#54A1D8 , #196 7CA) ; background-image :-moz-linear-gradient(0 % 100 % 90deg, #196 7CA, #54A1D8 ) ; background-image : -o-linear-gradient(rgb (84 , 161 , 216 ) , rgb (25 , 103 , 202 ) ) ; background-color : #52A8E8 ; box-shadow: 0 1px 0 rgba(255 , 255 , 255 , .6) , inset 0 1px 0 rgba(255 , 255 , 255 , .3) ; ) .apple-button :active ( background-color : #2D7CD1 ; box-shadow : 0 1px 1px rgba(255 , 255 , 255 , .5) , inset 0 2px 5px rgba(0 , 0 , 100 , .5) ; )

Demo: live example (try hovering over it and clicking it)

A few words about cross-browser compatibility. Since we used the CSS property gradient, then there may be some problems when displaying in older versions of the Opera browser, well, box shadow is a CSS 3 property.

Misha

In recent years, I didn’t know for a long time what to do with the site site, because it practically does not bring any profit, but recently I realized that my mission is to promote the spread of WordPress. After all, WordPress is the best engine for developing websites - both for those who are ready to use the built-in structure of this CMS, and for those who prefer headless solutions.

I myself first got acquainted with WordPress in 2009. Organizer . Teacher at Epic Skills and LoftSchool.

If you need help with your site or maybe even development from scratch with WordPress / WooCommerce - . My team and I will do everything for you at the best level.

The Apple cult leaves no one indifferent, and it's worth facing the truth: one of the key factors in Apple's popularity is their unique design. The book "Designed by Apple in California" clearly illustrates that designers treat their products as art.

Cupertino, California - On November 16, Apple announced the release of a new hardcover book, Designed by Apple in California. Two decades of design innovation are captured in 450 photographs of the company's past and current products, from the iMac (1998) to the Apple Pencil (2015). The book was created for 8 years and 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 ideal and the goal with which Apple is moving into the future,” says Jony Ive.

"Designed by Apple in California" is the result of close collaboration between many groups of designers and specialists from very different fields. All of them share the hope that the book will give people an understanding of how and why Apple products are created and exist. All photographs are taken by Andrew Zuckerman in what he describes as "a deliberately modest style." The pictures 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 the style, image and ideology of Apple design. Many products look so clear, simple and logical, as if they 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 have already done, and are obsessed with what we haven’t done yet”

“One of the most important things we've learned in 20 years of working together is the need to listen to each other, because the brightest ideas are often the ones who speak very, very quietly”

Designed by Apple in California is a limited edition book in two sizes: small (25.9 x 32.4 cm) for $199 and large (33 x 40.6 cm) for $299. It is printed on specially made paper of a special color with matte silvered edges. Sold exclusively on Apple.com in the US, Australia, UK, Germany, Hong Kong, Korea, France, Japan, and Taiwan, and select Apple Stores.

Introduction

When it comes to design, there is one company that is impossible to miss. This is Apple - every product they have is the result of the work of a team of designers. The site of this company also always attracted attention.

In this tutorial we will make a gallery - slideshow "a la" Apple. Approximately the same is used on the Apple website to represent the company's products. To create, we do not need PHP or a database.

STEP 1 - XHTML

Let's take a closer look at the XHTML markup:

• 
• 
• 

The idea is very simple - there are two main DIV containers - one with id="menu" contains the thumbnails, the second "slides" contains the slides themselves.

To add a new slide, you just need to add new elements to both containers. Slides - pictures in JPG format, thumbnails - transparent PNG. But you can use other formats as well.

You can also embed any HTML code. For example, you can make a certain slide a link in the form of a picture.

It is very important that the slides have a height and a width - they are used by jQuery to define the scroll area.

Also notice the LI thumbnail elements. The first one is given the fbar class to display a vertical dividing bar. The other elements are assigned the class menuItem - and they are used as slideshow control buttons.

Let's move on to the next step.

Step 2 - CSS

Let's take a look at our style sheet.

Body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label( /* Page reset */ margin:0px; padding:0px; ) body( /* Setting default text color, background and a font stack */ color:#444444; font-size:13px; background: #f2f2f2; font-family:Arial, Helvetica, sans-serif; ) /* Gallery styles */ #gallery( /* CSS3 Box Shadow */ -moz-box-shadow:0 0 3px #AAAAAA; -webkit-box-shadow:0 0 3px #AAAAAA; box-shadow:0 0 3px #AAAAAA; /* CSS3 Rounded Corners */ -moz-border- radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius :4px; border-bottom-right-radius:4px; border:1px solid white; background:url(img/panel.jpg) repeat-x bottom center #ffffff; /* The width of the gallery */ width:920px; overflow:hidden; ) #slides( /* This is the slide area */ height:400px; /* jQuery changes the width later on to the sum of the widths of all the slides. */ width:920px; overflow:hidden; ) .slide( float:left; ) #menu( /* This is the container for the thumbnails */ height:45px; ) ul( margin:0px; padding:0px; ) li( /* Every thumbnail is a li element */ width:60px; display:inline -block; list-style:none; height:45px; overflow:hidden; ) li.inact:hover( /* The inactive state, highlighted on mouse over */ background:url(img/pic_bg.png) repeat; ) li .act,li.act:hover( /* The active state of the thumb */ background:url(img/active_bg.png) no-repeat; ) li.act a( cursor:default; ) .fbar( /* The left-most vertical bar, next to the first thumbnail */ width:2px; background:url(img/divider.png) no-repeat right; ) li a( display:block; background:url(img/divider.png) no-repeat right; height:35px; padding-top:10px; ) a img( border:none; )

In this stylesheet, we have used several CSS3 properties:

* box-shadow, There is a small shadow in the corners of the gallery. Using this property - you need to provide X and Y coordinates (0 0 here), dither (3px in our example) and shadow color;
* border-radius, circular borders at the bottom of the gallery.

Unfortunately, these properties only work in Safari, Chrome, and Firefox at the moment.

Now it's time for the jQuery magic.

STEP 3 - jQuery

We will need the following code:

$(document).ready(function()(
/* This code is executed after the DOM has been completely loaded */

vartotWidth=0;
var positions = new Array();

$("#slides .slide").each(function(i)(
/* Loop through all the slides and store their accumulative widths in totWidth */
positions[i]=totWidth;
totWidth += $(this).width();

/* The positions array contains each slide"s commulutative offset from the left part of the container */

if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});

$("#slides").width(totWidth);

/* Change the cotnainer div"s width to the exact width of all the slides combined */

$("#menu ul li a").click(function(e)(

/* On a thumbnail click */
$("li.menuItem").removeClass("act").addClass("inact");
$(this).parent().addClass("act");

var pos = $(this).parent().prevAll(".menuItem").length;

$("#slides").stop().animate((marginLeft:-positions+"px"),450);
/* Start the sliding animation */

e.preventDefault();
/* Prevent the default action of the link */
});

$("#menu ul li.menuItem:first").addClass("act").siblings().addClass("inact");
/* On page load, mark the first thumbnail as active */
});

The main idea is that in cycling the slides, the widths of the slides are summed up and that width is assigned to the container. Since the slides are aligned to the left, there is enough room for them to stack one behind the other.

When clicking on a thumbnail, the script calculates which slide to show and scrolls them by assigning a negative indent value using the animate method.

Just 40 lines of code and our slideshow gallery is ready!

Conclusion

It took us only three steps to create a super beautiful gallery in the style of Apple. She is able to decorate any site.

Apple-style web design has evolved over the years since 1996. As the name implies, the design idea belongs to Apple Corporation: the site and product interfaces were designed in this style. Apple-style site design has gained wide popularity due to its minimalism and user focus on a specific product.

Characteristic features of the design of the site in the style of Apple

1. Strict hierarchy in the composition of elements. The main priority is the image of the product. High quality photo, clear, large, placed in the center of the page and surrounded by white space. In the best traditions of minimalism.
2. The color palette, as a rule, consists of three shades: black, white, gray. At the same time, unlike the flat style, gradients, shadows, and ways of conveying volume are widely used.
3. characteristic fonts. Headings are designed by Adobe Myriad, plain text by Lucida Grande.
4. Content. On the main page of the site - a minimum of information. Detailed descriptions are on separate pages. There is no oversaturation effect. The user himself chooses the information that interests him.
5. Technical features. Apple design is focused on HTML 5 format, the use of modern standards in design. On the official Apple website, Flash is fundamentally not used.

What sites are suitable for?

• • Jumsoft http://www.jumsoft.com/money/
  • Versionsapp https://versionsapp.com/

You are a happy owner of a small but cool company. There is still a long way to go to triumph, but you have no doubt that over time your business will become a reason for pride and an example to follow. By the way, you do not have to wait for this moment: you can position yourself as a high-class professional right now, making a convincing one, like a big and serious company.

Don't know what such a site should be like? Do not worry, now we will explain everything and tell you how to proceed. If you use our tips, then you will no longer have to sigh sadly when looking at the sites of Apple, Nike or L'Oreal, because your own will be just as good. So, here are some guidelines for creating a solid, professional website.

Follow the trends in web design

Big brands are constantly updating and refining their websites. Teams of experienced designers and developers are working to make an unusual and modern resource that makes people curious and want to take a good look at everything.

Yes, it's very expensive, but there are also free options like Wix. Our editor is specially designed for you to make a nice site for any kind of activity and add some fancy effect to it, like parallax scrolling or video as a background. You can make an actual “long” page and complement it with elements of a “flat” design*.

We think that at this stage it will not hurt you to walk around the sites for designers and be well inspired. Our recommendations: magazine web inspiration, blog Lopart and design magazine duty room; if English is not a hindrance for you, read Vandelay Design , Smashing Magazine And Web Design Depot .

*Don't understand what all these words mean? So you need to read ours.

Get Branding

Large companies have a recognizable corporate identity and very clear positioning. They use strictly defined fonts, colors and slogans. You will unmistakably recognize the red Coca-Cola logo, whether on the website, bottles or billboards hanging along the street.

So what if your company is not as big as Coca-Cola? This doesn't mean that you don't need to do branding. Thoughtful corporate identity is important. Thanks to him, people will be able to quickly identify your product, and there is already a stone's throw before buying. So draw a nice logo, come up with a slogan, choose branded fonts, colors, and style your social media pages accordingly. More tips - in our article on.

Less is better

We understand that you want to talk in detail about your product and business, but we do not recommend overloading the site and tiring visitors. The site is very poorly loaded, hard to read and repels visitors. The best is the enemy of the good, so you need to learn how to stop in time.

Let's think about what can be removed from your site. If the texts are full of technical and professional terms, get rid of them. Do you think visitors really need to know the detailed biography of all your employees? Unlikely. Something, of course, cannot be shortened, for example, a detailed description of goods or services, but this is normal, this information is useful. It is even worth moving it to where it definitely will not go unnoticed. And everything that slows down the buying 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 all unnecessary pictures and pay attention to typography. Remember to leave plenty of free space, also known as "air". When there is a lot of “air” on the site, people notice all the critical elements, for example, necessary to encourage visitors to buy, subscribe, register, etc.

Show the product on the main page

Do you want to increase the number of orders? So, make it so that people immediately see your product. Look at the websites of famous brands. You see, they put products not only on the shopping page, but also on the main page so that people will definitely notice them. If you have, and you are thinking about how to increase sales, feel free to copy this technique.

Of course, product photos should be large and very high quality. Don't forget that this is an online store where you can't touch or try on anything, so people make their buying decisions by looking at the picture. If you do not have money for a professional photographer, read our article on. A little practice - and everything will turn out! And do not 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 thing of interest and take a good look at it.

Make Good Navigation

We think you have ever landed on a poorly designed site and rushed back and forth in confusion in search of the desired page. As a rule, we leave such places empty-handed and with a desire to never return. And all the fault - ill-conceived navigation. Do not repeat this mistake and make sure that the visitor understands everything from the very first seconds.

If you get asked the same question all the time, make a FAQ page. You can use the application Wix FAQ. Its plus is that people get the information they need, and at the same time you are not distracted from other things.

Want to show that your company is responsive and friendly? Add 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 business and be in touch at the same time.

Show that people trust you

It's good that you try to be in touch and answer questions in a timely manner, but this is not enough to build a trusting relationship with customers. To do this, you need to work on the site again. Make a separate section with the history of the company, tell us who you are, what you believe in and what you think is important. Too much information is useless: 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 that such a page will do the job perfectly.

We also recommend adding customer reviews to the site - on the main page or in a separate section. After 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 affect.

Make a mobile version of the site

More than half of Internet users go online from tablets and smartphones. This means that the mobile version of the site is not a whim, but a necessity. Luckily, you don't have to worry about how to make it. In the Wix Editor mobile version is generated automatically, you just need to test it and tweak a few things. Do not forget that the mobile version is not an exact copy of the desktop one, so remove all unnecessary elements and make the buttons and contacts visible.

Don't forget about social networks

Pay attention to how older and more experienced colleagues maintain their pages on social networks. Yes, for a more complete coverage of the audience, you need both a website and pages on Facebook, Vkontakte, Instagram, etc. Social networks are ideal for posting 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 start a page on a particular site, tell your site visitors about it. Add social media buttons to your header, footer, or contact section. We also recommend adding the application - it is free, and large companies are willing to use it. With it, you can manage up to ten accounts from your site: publish news, respond to comments in a timely manner and surprise customers with speed, impeccability and professionalism.

Ready to join the big brands? yourself on Wix - it's easy and free!