The Micro Website

web

Designing a micro website (which is a promotion oriented single page site that gives limited but crucial information for a business) will be a discrete project within the bigger branding project that will bring together typographic content, images, visuals within a screen based layout. We will start to work on this as soon as the “3D objects” part of the project has been put together.

Here continuing the system that you developed for the series of 3D things will only be possible to a limited extent  – or indeed it may not be possible at all (as the images below will show you) since a website is a design product that has its own rules to which the “object system” of the previous part of the project may or not be applied with ease, especially since a website seems to call for the usage of plenty of photographic material that explains the content more so than other visual elements. web01web02web033 micro websites made during VA302 in previous years. Nesli Malkoç (top), Gözde Karaoğlan (middle), Deniz Uncular (bottom).
_____________________________

First things first – Create a page map which shows the anchors on the page like the one here:

site-plan
_____________________________

Second! In order to create any type of graphic design project we need text! And that certainly includes web sites. So, before you can even think about things such as layouts and visual elements you will need to have the text ready since, when it comes to graphic design work, it is the text that determines the design.

For a micro site we only need small amounts of text – nothing lengthy. Headlines and body texts which consist of just a few sentences that can also be used as spots. The class of 2020 is working on a branding project for an organic restaurant / juice bar. Click here to read the pdf that I gave them with tips on how to create text for their subject matter.
_____________________________

Third step – site basics:

(Note: We will be using the wix web editor to design the site, so all the screenshots I will be giving you are taken from there.)

1) Different screens, different sizes: The really important thing that we need to be aware of when we design a website is that it will be viewed on all sorts of devices (phones, tablets, laptops and desktop computers) and at all sorts of monitor sizes. Leaving the phone aside since that is a whole different ball game, the minimum size that we need to pay attention to is 1024 pixels which is the height of most tablets. From there the measurements go up, however we need to ensure that what we put on the page is visible to someone who views the site on their tablet by holding the device sideways.

web-design-safe-area

This screenshot above gives you an overview of the different sizes and the all important squiggly lines on wix that you absolutely need to stay inside.

There are of course also responsive websites in which the various elements move around and reorganize themselves as the screen size gets smaller. However, these are very rigidly coded and unless you are a star coder it will be quite hard for you to do this. Adobe’s Muse software (which is now discontinued btw) can let you do this without any coding know-how. However, the way it works there is that you re-design the site manually over and over again according to the narrower screen size. So, in effect you will design 4 – 5, maybe even more sites in order to get the responsive mechanism with Muse. Not really worth it.

Wix does not let you design entirely responsive web sites. However, with all the strips, the strip columns, and the responsive galleries that they have (and that they are adding to all the time – latest are these new grids that they now have…) you can achieve almost responsive behavior on a wix edited site.

2) The basic structure of the site: This consists of a header, the actual page, and the footer.

web-design-header-footer-page

Usually the header is where the name of the company, the logo and the menu is. (Note: On a micro-site this can also be an anchor menu that is not inside the header itself but on the page where it floats together with the content.) The page is where you have the actual content of the site. And the footer is usually reserved for things such as legal info, contact info and so on. (Note: I am saying “usually” since there can always be exceptions when it comes to header and footer content.)

web-design-fixed-header

In the screenshot above you can see that the header and the footer can also be “fixed” so that they always remain visible as people scroll down the page content. And you can also add some other effects when it comes to the header.

(Note: Although we usually have a header and footer, this is not always the case and there are some sites that do not have one or the other – especially when it comes to the footer. Or there can be web sites which do not have headers and footers on some pages. On wix you can adjust this to your preference on individual pages as seen below.)

ScreenHunter 299

3) Web layouts: These seem to have become very standardized over the past few years. We usually get an alternation between long strips and centered, narrower informational content. While this is not good news for us as designers, it does have its rationale: A standardized layout makes it very easy for site visitors to find content since they have encountered the setup many times before. So, for any commercial site (and this includes portfolio sites also, I would say), where it is crucial that the visitor reaches information very quickly without having to wander around inside a format that they are not familiar with, sticking to this standardized type of layout is a good idea since it is quite likely to increase business.

4) Starting with a completely blank template:

blank-template-pick

When you go to the “blank templates” section on wix you will see that there are quite a few pre-formatted “semi” blank templates that adhere to standardized layouts. Obviously, as conscientious designers with our dignities intact ;-), we will not pick any of them but go for the one on the top left, which is a truly blank page into which you will drop all of your own content from scratch via the add tab on the left of the editor, as shown in the screenshots below.

As you can see in the gallery above, the “add” tab provides you with pretty much all that you need. And whatever you cannot find can also be added to with a special html widget.
_____________________________

A few more things about menus and anchors:

The screenshots in the gallery above will show you how menus can be placed and their designs be reconfigured.

The gallery above shows you how anchors are created and how anchor menus are designed, added to the page and how they are then “fixed” to the page.

(Note: Not only anchors but any design element can be fixed to the page, the header or the footer. Just click on the pushpin icon on the far right.)
_____________________________

Fonts: Wix has a default font called “Proxima Nova”. So, every time you add a piece of text from the add tab this will be the default typeface. You need to change this right away in order 1) for your site to not have that “wix template” look, 2) because it is a really unattractive font, so why use it when there is such good stuff out there, and 3) because Proxima Nova does not have any Turkish glyphs.

In the three screenshots above you will see how you can change the default font, not only with other fonts that are in the wix library, but also how you can upload your own fonts from your computer. When you do this it is usually a good idea to go with fonts that you get from google fonts since these are universal. An esoteric font that exists only on your computer may or not display properly.

(Tip: Do not upload huge families of fonts to wix. Select carefully and only upload the weights that you think you will really need.)
_____________________________

Site background – yes, you can add an image (or even a video) to the background of your site. It would have to be at least 1920 x 1200 so that we do not get an unpleasant tiling. Is this something I would advise you to do? Unless it is a very subtle thing, I wouldn’t, since site background images can become quite overwhelming and distracting if they are not delicate enough. That said, there are exceptions to the rule, such as the site designed last year by Aleyna Tezer:

aleyna-site
Click here to see the background (which is animated) in action:
https://tezeraleyna.wixsite.com/aladdin
_____________________________

Finding visual material: One of the most important things that will set your web site apart, give it individuality (even if you are sticking to a standardized format) is the quality, the beauty and of course the relevance of your visual material. While there are paid stock sites such as shutterstock (and from where you will probably be making purchases for clients in the future), there are also a lot of very high quality free to use (or free to use with attribution) photo and video stock portals online. I will give a list of some of the best known ones below:

ScreenHunter 327

Free high resolution images: You may use some of what you find as is, but my guess is that you will mostly be cropping them in order to create better close-ups for container boxes. When you put the images into strips make sure you have them at least 1920 pixels wide. If you put them in a strip with a parallax scroll effect then the height of the image will have to be at least double that of the strip.

(Tip: Never upload an image that is larger than it needs to be. Reduce the size of the image to the needed one in photoshop before you upload it. Most of the images you find on the high res web sites below will be well over 3000 pixels wide, some even as high as 7000 pixels wide. You definitely do not need these huge sizes. They will only slow down the loading of your site. So, make sure you have everything in the right size before you bring it into wix.)

https://unsplash.com/
https://www.pexels.com/
https://www.freepik.com/
https://pixabay.com/
https://www.foodiesfeed.com/

PNG images: Not all your images need to be in boxes. Some may work very well as transparent PNG images that go over a background or are placed across different areas and container boxes or embedded into other images that have rectangular formats. Some good, high resolution ones can be found on the following websites:

https://pngtree.com/ (Careful! Only 2 downloads per day. Choose wisely!)
https://www.snipstock.com/
https://www.cossyimages.com/
https://www.freepngs.com/

What applies to PNG images also goes for vectors and clip art. These are things that can be used very effectively together with images and text:

https://www.vecteezy.com/
https://all-free-download.com/
https://www.freepik.com/

(Tip: Both background transparent images and vectors will need to be brought into the wix editor as PNGs that are saved in photoshop – and not Illustrator! The thing with PNGs however is that, unlike JPEGs which you can scale down with no quality loss, they display absolutely correctly only when they are in their actual pixel size. So make sure you have resized them correctly before you upload them to the editor.

resizing-pngs

A smart way to resize PNGs and vectors to their exact size is to take a screenshot of the whole wix editor page and to paste it into photoshop, which is what I am showing you in the screenshot above. Place the PNG or vector on a new layer as a smart object and resize it here where you can see the exact relationship that it has to the site material. Then ctrl select the layer that the object is on and copy paste it to a new document which will be exactly the size of what you copied to the clipboard. Close the eye of the background layer and save what you see as a PNG from File > Export > Save for Web (Legacy).)

You can also add videos and covers (the big picture or video at the top of a web page that stretches all the way across is called a cover) to your site. However pay attention to two things – 1) Quality, 2) streaming / playback speed (which you need to test from a different computer from the one you are working on since your own machine will be keeping the video you uploaded as a temp file):

ScreenHunter 328

https://www.videvo.net/
https://coverr.co/
https://videos.pexels.com/
https://www.videezy.com/
_____________________________

Using shapes – Container boxes, strips, columns: Putting things against a plain background is the simplest but hardly ever the most effective way of doing web design. Content (both text and visuals) need to get differentiated and hierarchized so that our eyes can make sense of what is in front of us. A good way of achieving differentiation and hierarchy on a website is by placing content inside different colored areas. A few examples of websites will show you this quite easily:

website04website05website06
_____________________________

It is always a good idea to think of your website as a whole, continuous page rather than as something we only see in segments as we scroll down. Yes, people will see it that way, of course. But there is a fundamental difference between something that looks good as a whole, systemic object and something that is designed in partitions. So, zoom out and look at your site in its entirety as you work on it.

(Tip: wix has added a zoom out button at the very top of the editor which will give you an excellent result.)

_____________________________

And finally, we come to animating different elements on your design: First off, you can use scrolling effects on the strips as well as the individual strip columns. And then every individual item on your page (texts, images, shapes) can get animation effects such as slide-ins, fades, tilts, turnarounds, rotations and so forth. What I have to say about these is  – go easy. Do not combine too many of them, try to use only one consistently, do not mix them up too much – especially when it comes to the individual item effects.
_____________________________

Obviously each site has its own design strategy and there is no way I can go into specifics as to how to place items, how images should be cropped, how to use effects, how to establish size hierarchies, how to create negative space, how to combine things, as well as set them apart and so on on this blog. All of that, which actually constitutes the main work to be done, will be handled in class.