Mobiiliajastul on desktop-veebi disain jätkuvalt väga tähtis

Matija Vujovic
Matija Vujovic

Intervjuu Kuldmuna 2017 disainiþürii esimehe ja rohkelt auhindu võitnud agentuuri Kitchen Prague loovjuhi Matija Vujoviciga.

Millised on Sinu arvates praegu põhilised trendid disainis?

Digidisainis on need kindlasti suured tähed, suured fotod, selgus, minimalism. Tagasi tulevad raster, tugevad värvid, lihtne disain, geomeetria, gradatsioon - need on sel aastal trendikad elemendid.

Digidisainis on lõputu võitlus funktsionaalsuse ja ilu vahel. Tihti on veebileht väga ilus, auhindu võitev, aga mitte kasutajasõbralik...

See on tõsi! Aga digidisainis on vaja järgida tehnoloogiat ja see muutub iga kuu. Kui parendatakse näiteks foto- või videokompressiooni, saab veebilehel kasutada suuremaid pilte või kvaliteetsemaid videoid. See on pidev võitlus hea disaini ja mugava kasutajakogemuse vahel. 

Kui rääkida kasutajakogemuse ekspertidega, siis nende arvates tuleks kinni keerata kõik nö kellad ja viled, et teha veebilehed võimalikult kasutuslihtsaks.

Oleneb, kas see on veebipood või mõne toote müügileht. Lihtsa disaini kontseptsioon toimib hästi veebilehtedel, mille peamine eesmärk on otsene müük. Disaini nimi, tegelik mõte ongi ju kasutajakogemus. Võib ju luua väga võimsa kogemuse lisades videoid, pilte ja graafikat, aga kui eesmärk on midagi müüa, peab leht olema selge ja arusaadav ning disain hoopis taustal. Esiplaanil peavad olema kommunikatsioonielemendid: pealkirjad, nupud jms.

Palju on räägitud nn mobile first põhimõttest, sest üha enam kasutatakse nutiseadmeid internetis surfamiseks. Samas pole palju võimalusi teha telefonile muljetavaldavat disaini, sest selle ekraan on nii väike. Kas alustate oma veebidisaini protsessi pidades esmalt silmas telefone?

Jah, see on tõsi. Praegu töötame ühe start-up'i veebi kallal, mille eesmärk on müüa ja see peab toimima ka telefonis. Aga kui eesmärk on oma äri tutvustada, muljet avaldada või mõnda uut toodet või projekti esitleda, siis ei saa keskenduda mobiilile.

Tõsi, ca 40-45% külastusest on nn mobile first, kuid see ongi esmase info saamiseks -- koju jõudes avame arvuti ja saame tootest või brändist päris elamuse desktop-veebi vaadates.  

Nii et desktop on võrdse tähtsusega, kui mitte tähtsamgi kui telefon?

On jah, kui me räägime pildi või toote veebilehest. Arvutis saad sa kasutada heli, palju rohkem animatsioone, interaktiivsust ja seeläbi luua ka brändi. Mobillne veeb on hea toote otseseks müügiks või selleks, et saada kiiret infot millegi kohta - näiteks uudised, kuid sellele platvormile ei saa luua esitluse eesmärgiga disaini. Mobiiliversiooni puhul on kõige olulisem see, et see toimiks. Desktopi kaudu on võimalik edastada palju rohkem informatsiooni. 

Kui intervjueerida auhinnatud disainiagentuure ja küsida tulemuste kohta, siis tihti pole loovjuhtidel ja disaineritel aimugi, kas nende töö on reaalselt ka äri edendanud. Mis sa arvad - kui tähtis on disaineril mõista kliendi ärihuvi?

See on väga oluline! Klient peab oma ärieesmärgid briifi kirja panema ja disainerid peavad neid teadma. Disaineril peab olema arusaam, mida klient saavutada tahab. Kas uut veebi on vaja müügi edendamiseks või brändi loo rääkimiseks.

Aga tavaliselt disainereid ei huvita. See on vist tööstusharu eripära või suhtumise küsimus, et nad on kurikuulsalt ükskõiksed ärilise poole vastu ja huvitatud ainult kunstilisest poolest.

Nagu öeldakse, töö pole loominguline kui see ei müü (David Ogilvy: “It’s not creative unless it sells”). Müügile suunatud digikampaaniad on dünaamilised.  Ei ole nii, et kujundad plakati ja ootad 2 kuud tulemuste nägemiseks. Digikampaaniatega tegeled iga päev või iga paari päeva tagant ja optimeerid vastavalt sihtgrupile ja tagasisidele. 

 

Osale arutelus

ERROR: Object template SessionInfo is missing!

Toetajad

VIGA

Meil on tehnilised probleemid. Katsume need kiirelt lahendada. Vabandame!

Palun kliki mõne aja pärast uuesti: www.aripaev.ee

Kuniks veebileht ei avane, on meil pakkuda teisi tooteid:

Infopank Äripäeva käsiraamatud Äripäeva Akadeemia Äripäeva Raamatuklubi Äripäeva veebipood

"; content = content.replace("Path not found","").replace("Permission denied","").replace(//g, ""); content = JSON.parse(content); var utmLink = "?utm_source=http://www.bestmarketing.ee&utm_medium=KuumadLood"; // ReadNext block var ReadNext = (function () { var $readNextBar = $(".js-read-next"), $readNextItems = $readNextBar.find(".js-read-next__items"), $readNextItemsContainer = $readNextBar.find(".js-read-next__container"), contentSelector = ".article-content", width = 0, height = 0, mostReadArticles = [], unreadArticles = [], currentElement = 0, numberOfElements = 24, numberOnPage = 4, maxAvailable = 24, showFirstUnlockedArticles = 2, showSecondLockedArticles = 2, mobileSlideWidthSeen = 110, alreadyScrolling = false, currentTransition = 0, animationDuration = 600 var init = function () { // Create click handlers _setNextButtonClickHandler(); _setPrevButtonClickhandler(); _bindWidthCalculation(); ReadNext.showRecommendations(); }; var showRecommendations = function () { _calculateWidth(); $readNextItems.css("width",width); if (window.innerWidth < 768) { numberOnPage = 2; maxAvailable = 20; } else { numberOnPage = 4; maxAvailable = 20; } var readArticleIds = _getReadArticles(); unreadArticles = _.chain(mostReadArticles) .filter(function (article) { return !_.contains(readArticleIds, article.id); }) .first(maxAvailable) .value(); numberOfElements = unreadArticles.length; if (unreadArticles.length > 0) { _reaarrangeArticles(); _initElements(); _showBar(); _miscOperations(); } }; /** * If article is not too old to be in most-read box and is not already read, * add it"s id to cookie */ var addToReadArticles = function (id, date) { var readArticleIds = _getReadArticles(); if (readArticleIds.length > 64) { readArticleIds = _purgeOldIds(readArticleIds); } var readArticles = readArticleIds.join(","); if (!_isTooOld(date) && readArticles.indexOf(id) < 0) { readArticles = (readArticles.length > 0) ? readArticles + "," + id : id; createCookie("readArticles", readArticles, 2, "/", null); } }; var setArticles = function (arr) { mostReadArticles = arr; }; var isHidden = function () { var style = window.getComputedStyle($readNextBar[0]); return (style.display === 'none'); }; var _showBar = function () { $readNextBar.fadeIn(500); _detectSwipe($readNextBar, _swipeToDir); }; var _showNextPage = function () { if(alreadyScrolling) { return; } currentTransition--; alreadyScrolling = true; var $prev = $(".js-read-next__items__prev"); var $curr = $(".js-read-next__items__current"); var $next = $(".js-read-next__items__next"); $readNextItems.css({ "transform": "translate("+(currentTransition * 100)+"%)", "transition-duration": animationDuration+"ms" }); setTimeout(function() { $prev.remove(); $curr.removeClass("js-read-next__items__current").addClass("js-read-next__items__prev"); $next.removeClass("js-read-next__items__next").addClass("js-read-next__items__current"); _addNextElements((-currentTransition + 1 ) * 100 ); $readNextItems.css("transition-duration","0ms"); }, animationDuration); currentElement += numberOnPage; while(currentElement >= numberOfElements) { currentElement = (currentElement >= numberOfElements) ? (currentElement - numberOfElements) : currentElement; } _miscOperations(); }; var _showPrevPage = function () { if(alreadyScrolling) { return; } currentTransition++; alreadyScrolling = true; var $prev = $(".js-read-next__items__prev"); var $curr = $(".js-read-next__items__current"); var $next = $(".js-read-next__items__next"); $readNextItems.css({ "transform": "translate("+(currentTransition * 100)+"%)", "transition-duration": animationDuration+"ms" }); setTimeout(function() { $next.remove(); $curr.removeClass("js-read-next__items__current").addClass("js-read-next__items__next"); $prev.removeClass("js-read-next__items__prev").addClass("js-read-next__items__current"); _addPrevElements((-currentTransition - 1 ) * 100 ); $readNextItems.css("transition-duration","0ms"); }, animationDuration); currentElement -= numberOnPage; while(currentElement < 0) { currentElement = (currentElement < 0) ? (numberOfElements + currentElement) : currentElement; } _miscOperations(); }; var _miscOperations = function () { //calc the container height so it would not block the content $(".js-read-next__item").each(function() { var item = $(this); var elementHeight = item.height(); if(elementHeight > height) { height = elementHeight; $readNextItemsContainer.css("height", height); } //adding utm tags var a = item.find(".js-article-exit"); a.attr("href", a.attr("href") + utmLink); }); setTimeout(function() { //after animation enable navigation alreadyScrolling = false; }, animationDuration); }; var _initElements = function () { alreadyScrolling = true; $readNextItems.append(_getElements(0, numberOnPage).addClass("js-read-next__items__current")); _addPrevElements(-100, -numberOnPage); _addNextElements(100, numberOnPage); currentElement = 2 * numberOnPage - 1; while(currentElement >= numberOfElements) { currentElement = (currentElement >= numberOfElements) ? (currentElement - numberOfElements) : currentElement; } alreadyScrolling = false; }; var _addPrevElements = function (transition, elementIndex) { var firstElement = currentElement - 3 * numberOnPage; if(typeof elementIndex !== "undefined") { firstElement = elementIndex; } while(firstElement < 0) { firstElement = (firstElement < 0) ? (numberOfElements + firstElement) : firstElement; } var items = _getElements(firstElement, numberOnPage).addClass("js-read-next__items__prev").css("transform","translate("+transition+"%)"); $readNextItems.append(items); }; var _addNextElements = function (transition, elementIndex) { var firstElement = currentElement + 1; if(typeof elementIndex !== "undefined") { firstElement = elementIndex; } while(currentElement >= numberOfElements) { firstElement = (firstElement >= numberOfElements) ? (firstElement - numberOfElements) : firstElement; } var items = _getElements(firstElement, numberOnPage).addClass("js-read-next__items__next").css("transform","translate("+transition+"%)"); $readNextItems.append(items); }; var _addToHtml = function ($container, data) { var html = ''; $container.html($container.html() + html); }; var _getElements = function (firstElement, numberToTake) { var $itemGroup = $(''); var elementIndex = firstElement; for (var i = numberToTake; i > 0; i--) { if(elementIndex >= numberOfElements) { elementIndex = 0; } _addToHtml($itemGroup, unreadArticles[elementIndex]); elementIndex++; } return $itemGroup; }; var _bindWidthCalculation = function () { $(window).on("resize.readNext", function(){ _redefineElementWidth(); }) }; var _redefineElementWidth = function () { _calculateWidth(); $readNextBar.find(".js-read-next__items__group").css("width",width); $readNextItems.css("width",width); }; var _calculateWidth = function () { width = $readNextBar.width(); if(window.innerWidth < 768) { var padding = parseInt($readNextItemsContainer.css("padding-right")) + parseInt($readNextItemsContainer.css("padding-left")); width = window.innerWidth - padding; } }; // Article management var _getReadArticles = function () { var readArticles = decodeURIComponent(getCookie("readArticles")); var readArr = readArticles !== "null" ? readArticles.split(",") : []; return _.map(readArr, function (val) { return parseInt(val); }); }; var _purgeOldIds = function (readArticleIds) { // convert ids to integers in case they are given as strings readArticleIds = _.map(readArticleIds, function (val) { return parseInt(val); }); // get article id"s from most-read box var mostReadIds = _.pluck(mostReadArticles, "id"); return _.intersection(mostReadIds, readArticleIds); }; // Article is too old if it's date is set more than 2 days ago var _isTooOld = function (date) { var y = parseInt(date.substr(0, 4)), m = parseInt(date.substr(4, 2)) - 1, d = parseInt(date.substr(6, 2)); var expireDate = new Date(y, m, d); expireDate.setDate(expireDate.getDate() + 2); var now = new Date().setHours(0, 0, 0, 0); return expireDate < now; }; var _reaarrangeArticles = function() { var unlockedArticleCount = 0; var lockedArticlesCount = 0; for (var i = 0; i < unreadArticles.length; i++) { var article = unreadArticles[i]; if (article.lockID === "" && unlockedArticleCount < showFirstUnlockedArticles ) { unreadArticles.splice(i,1); unreadArticles.splice(unlockedArticleCount, 0, article); unlockedArticleCount++; } else if (article.lockID !== "" && lockedArticlesCount < showSecondLockedArticles) { unreadArticles.splice(i,1); unreadArticles.splice(unlockedArticleCount + lockedArticlesCount, 0, article); lockedArticlesCount++; } else if(lockedArticlesCount >= showSecondLockedArticles && unlockedArticleCount >= showFirstUnlockedArticles) { break; } } }; // Bar visibility var _getArticleContentHeight = function () { var contentParts = $(contentSelector); var contentHeight = 0; _.each(contentParts, function (content) { var height = $(content).height(); contentHeight += height; }); return contentHeight; }; var _getArticleDistanceFromTop = function () { var $firstArticlePart = $($(contentSelector)[0]); return $firstArticlePart.offset().top; }; var _getShowBarOffset = function () { var articleContentHeight = _getArticleContentHeight(), articleOffset = _getArticleDistanceFromTop(), windowHeight = $(window).height(); return articleOffset + (2 / 3 * articleContentHeight) - windowHeight; }; // Click handlers var _setNextButtonClickHandler = function () { $(document).on("click", ".js-read-next__next", _showNextPage); }; var _setPrevButtonClickhandler = function () { $(document).on("click", ".js-read-next__prev", _showPrevPage); }; var _swipeToDir = function (dir) { if (dir === "l") { _showNextPage(); } else if (dir === "r") { _showPrevPage(); } }; var _detectSwipe = function (ele,func) { var swipe = { x: 0, x1: 0, xMin:30 }; var dir = ""; var currTranInPx = width * currentTransition; ele.bind('touchstart', function(e){ var t = e.originalEvent.touches[0]; swipe.x = t.screenX; currTranInPx = width * currentTransition; }) ele.bind('touchmove', function(e){ e.preventDefault(); var t = e.originalEvent.touches[0]; swipe.x1 = t.screenX; if(swipe.x1 === 0 || alreadyScrolling) { return; } var diff = swipe.x - swipe.x1; diff = (diff > width) ? width : diff; diff = (diff < -width) ? (-width) : diff; var calculatedTransform = currTranInPx - diff; $readNextItems.css("transform","translate("+calculatedTransform+"px)"); }) ele.bind('touchend', function(e){ if (swipe.x1 === 0 || alreadyScrolling) { return; } if ((swipe.x - swipe.x1) >= swipe.xMin) { dir = "l"; } else if ((swipe.x1 - swipe.x) >= swipe.xMin) { dir = "r"; } if (dir !== "") { if(typeof func == 'function') func(dir); } else { $readNextItems.css("transform","translate("+currTranInPx+"px)"); } dir = ""; swipe.x = 0; swipe.x1 = 0; }) }; return { showRecommendations: showRecommendations, addToReadArticles: addToReadArticles, init: init, setArticles: setArticles, isHidden: isHidden }; })(); ReadNext.setArticles(content); ReadNext.init();

Jälgi Bestmarketingi sotsiaalmeedias

RSS

Toetajad

Valdkonna töökuulutused

Rademar otsib TURUNDUSSPETSIALISTI

Rademar OÜ

31. märts 2017

EuroPark otsib SÄRTSAKAT TURUNDAJAT

EuroPark Estonia OÜ

04. aprill 2017

Sirowa Tallinn otsib TOOTEJUHTI

Sirowa Tallinn AS

31. märts 2017

KAJA

märts 2017