Tag Archives: webdesign

tubik studio web design

6 Big Reasons to Start a Website

For centuries, people have found hundreds of ways to communicate and collaborate for both professional and personal aims. Still, since the time when the Internet came into play, these directions of human activity have witnessed really prominent progress. It got especially significant and impressive for the last decade, with broader availability of the Internet and development of new technology. Decent ten or twenty years ago having a website was seen a sort of luxury while today it is often a widely-used and important factor of personal, professional and business growth.

 

There is a great number of big and small goals standing behind the incredible variety of websites whose number seems to grow every single minute. According to Internet Live Stats, there are over 1 billion websites in the World Wide Web today. This milestone was first reached in September of 2014, as confirmed by NetCraft in its October 2014 Web Server Survey, and first estimated and announced by Internet Live Stats. The number had subsequently declined, reverting back to a level below 1 billion due to the monthly fluctuations in the count of inactive websites before reaching again and stabilizing above the 1 billion mark starting in March of 2016. In general, this is the sort story of the amazing path from 1 website in 1991 to 1 billion websites in 2014. 

 

No wonder, more and more people are thinking over the idea of setting their websites and they come to this decision along the different ways reaching various life destinations. Let’s review the most popular reasons that make people work over their websites either by themselves or hiring professionals for that job, and in some cases applying both of the mentioned options. The ideas will be supported with web design concepts accomplished by Tubik designers and corresponding to particular objectives.

 

E-commerce

 

Nowadays this reason would definitely take its place in the top. With better technical abilities of presenting goods and services as well as fast and secure payments enabled via the Internet, more and more people take opportunities of buying and selling online, right from their desktop. It can deal even with the case of personal websites, if people both communicate and sell the goods or services they produce via this website. So, getting real financial profit can be named among the prominent reasons of creating a website. Moreover, modern content-management systems support this aim with tools and features strengthening the website rates in search browsers. 

 

tubikstudio ui webdesign

Design concept of online comic bookshop

 

tubik studio UI design

Design concept of online auction

 

tubik studio design UI

Design concept of the randomizer for e-commerce platform

 

tubik_studio_website_ui_bakery

Design concept of the bakery enabling online orders

 

Business presentation

 

Another reason connected with professional activity and encouraging more and more people to start their websites is presentation of their business, whatever is its nature and volume. It can be anything, from simple one-page website giving basic description of the professional and contact data to complex web platforms providing the variety of business directions or extensive portfolio. The core distinguishing feature comparing to the previous position is that this website doesn’t provide full cycle of direct sales from order to payment and delivery, its aim is to present the services or goods as well as the ways of getting them. This can be the reason for not only fully packed websites of broad functionality but also landing pages fulfilling the same need.

 

tubikstudio homepage design

Web design concept for a company organizing open air events

 

website design tubik studio

Web design concept for a company organizing hot-air-balloon rides

 

website design UI

Web design concept for an architectural bureau 

 

tubikstudio ui animation website design

Design concept for the interior design studio

 

Sharing information

 

This is the reason why people set up diverse blogs and websites aimed at sharing information: these can be online magazines and newspapers, thematic collections and bloggers’ reviews etc. It is usually not aimed at direct communication, only providing users with fresh and actual information.

 

online magazine design tubik studio

Design concept of online newspaper

 

web design UI concept tubik studio

Design concept of the online magazine devoted to travelling

 

tubik web design

Web design for the blog devoted to design news and trends

 

Education

 

One more reason to start the website is the ability and wish to provide some materials and/or communication with educative objectives. These can be different stuff, from personal teacher’s blogs to interactive encyclopedias or platforms for online courses.

 

tubik studio web ui design

Web design for online encyclopedia

 

Communication

 

The Internet presents great and easily available opportunities for communications, so communication can be one more good reason for creating a website, like blogs with direct discussions, forums, social networks for general or special themes etc.

 

sport social network design tubik

Design concept of a social network for sport fans

 

Self-expression and practice

 

Sometimes, people create the website with the aim of getting a platform for expressing their creativity and trying particular skills, like, for example, creative writing. Again, complexity and quality of these websites can be very different, still the basic reason behind them is self-expression and growth.

 

tubik studio design

Design concept of a personal blog devoted to architecture

 

Surely, this list is not totally full, it mentions only some of the globally popular reasons for creating websites. Stay tuned and don’t miss the new articles analyzing all the mentioned directions in closer detail.


Welcome to see the designs by Tubik Studio on Dribbble and Behance

Welcome to read UI/UX glossary on web design

web design interactions tubik studio

Web of Life. Creative Web Design Concepts.

Nowadays, World Wide Web could definitely be named the web of life. It connects people from all around the world whatever their aims and wishes are about. Personal and professional communication, ordering and delivery of goods and services, education and mentoring, searching for new information, advertising, watching films, tracking everyday stuff and accounting finances, and so on, and so forth—seems, there’s no sphere to which the Internet wouldn’t add its own two cents. No doubt, there are both advantages and disadvantages brought by technology and new ways of broader and faster communication of all kinds. Still, today we are going to focus more on the variety of perspectives for positive influence of the web on people’s lives of global society.

 

In the design glossary issue devoted to key terms of web design we mentioned that as a domain of human activity it lies on the crossroads of many sciences and practices. Among them the following should be mentioned:

  • drawing and composition
  • painting and coloristics
  • logic and schematism
  • analysis and statistics
  • visual arts
  • programming
  • user research
  • psychology
  • copywriting
  • branding and marketing etc.

 

Covering diverse aspects of a website functionality and appearance, some designers work in teams every member of which specializes in a particular sphere while the others can work out different of the mentioned aspects individually. Anyway, in vast majority of cases web design is the sphere of digital products which have to be functional and user-centered. As famous American designer Charles Eames said “Design is a plan for arranging elements in such a way as best to accomplish a particular purpose” and his words totally reflect the idea of modern web design.

 

Working over a website, designers have to concentrate on such aspects as:

usability (the website is convenient, clear, logical and easy to use)

utility (the website provides useful content and solves users’ problems)

accessibility (the website is convenient for different categories of users)

desirability (the website is attractive and problem-solving, it retains users and creates positive experience which they are ready to repeat).

 

Here in Tubik Studio we have felt all the power of web, both from the perspective of professional growth and positive user experience. If you take a virtual trip around Tubik Blog, you’ll see the case studies and articles devoted to the theme of creating websites solving users’ problems, providing natural and effective flow of human-computer interaction and positive experience. Being a team knowing the inside-out of web design and development, today we are going to continue the topic with the collection of practical design concepts presenting design solutions for the variety of websites with different objectives, target audience and visual style. Here you’ll find the concepts for particular web pages, animated web interactions, ideas for landing and home page design and the like. So, let’s get started!

 

Website on travel destinations in Iceland

 

tubik studio ice ui website

Presented concept features the set of interactions with a website devoted to the theme of traveling around Iceland. Working over the color palette, the designer chose the light background featuring the theme of Iceland and a contrast bold headline. Images are used in the scheme one-per-page so that they could support the theme but not overloading the page or distracting the user. Thorough attention was paid to typography and composition as key sides of user-friendly minimalism enhancing usability, navigability and visual harmony transferring the spirit of the presented place. Navigation features the right side menu with titles placed vertically still easily readable due to the choice of font, the rest of the navigation links are hidden in extended menu behind the hamburger button. Animation shows transitions between pages to give the feeling of general design consistency.

 

Design concept for online magazine

 

online magazine design tubik studio

 

The design concept of an online magazine features the page of a particular article presenting a famous person so an image showing the personality becomes the center of composition still doesn’t take too much attention from the text as the bearer of information. All the design is concentrated on user-friendly solutions around readability and stylish non-distracting looks as well. So, the concept is based around clear visual hierarchy applied in general layout of elements and also copy blocks. As for navigation, the page features the header including the title of the website as a central element of the top part composition, two active links to basic categories of publications, link to live mode and search field marked with a magnifier icon.

 

Web design for architecture blog

 

tubik studio design

 

Another concept full of light and air for readable text and stylish visuals. Animated interactions demonstrate the consistency of the flow while scrolling the page with the smooth move of visuals elements, headlines and copy blocks, imitating movement of physical objects while pulling. The presented design of a website has a fixed header which doesn’t hide while the page is scrolled. However, it follows minimalist principles featuring brand name lettering as a center of composition, magnifier icon marking search functionality and hamburger button hiding links to navigation areas.

 

Corporate website for an architectural company

 

website design UI

 

This concept is also devoted to the theme of architecture, still it has different objectives and core target audience: it is the corporate website for a company presenting the variety and potential of its services. The general performance of the webpages is following minimalist and functional approach. The layout is accomplished on the basis of priorities in presenting this particular business field. Taking into account that the nature of the company activity is deeply visual especially in terms of presentation to new clients, the designer selected the background and fonts that have to leave the immediate impression of style and sophistication. The key words brought out in capital letters become the integral part of stylistic concept being also informative and quickly setting the company ideas and approach to work. The visual effects are supported with smooth animation.

 

Landing page for the website of seafood recipes

 

landing page UI design tubik studio

 

This example presents a landing page for a website collecting recipes of meals with seafood from all over the world. As well as in the previous case, dark background is chosen to make the images of meals look even more delicious and also create stylish appearance for general visual presentation of the layout. The landing quickly provides general understanding of the website purpose and content featuring different sections that could be interesting for users.

 

website UI design

 

Website on Swedish ski resorts

 

tubik studio web UI design

 

Obviously, traveling is the great way to get inspired and we really believe it’s true. This concepts adds one more example on this theme. Here is the set of animated interactions for a website Slopes presenting Swedish ski resorts and enabling users to get full scope of information about them. Home page features the video background immediately setting the theme, and color palette based on strong contrast and concise color combinations also visually supports the idea of active winter holidays. The basic points are shown in header for quick availability while all the other variety of content categories is hidden behind the hamburger button to support minimalist design approach.

 

Web interface for design blog

 

design4users blog

 

This case shows the web interface for Design4Users, a content project created, designed and developed by Tubik Studio team. Design of the webpages is accomplished with a view to effective presentation of both copy and visual materials featured in wide variety.

 

webdesign tubik studio

design blog web UI

 

Web design for an online magazine about traveling

 

tubik studio web design

 

Here’s the design concept for a website which presents the online magazine «The Big Landscape». Its target audience is primarily people keen on traveling and learning more about the world. The interface is minimalist following the principles of clear visual hierarchy, good readability, intuitive navigation and aesthetic pleasure from visual perception.

 

Website for a design studio

 

tubikstudio ui animation website design

 

It is a promotional webpage of the particular product by design studio. Its purpose is to present the design object via descriptions and visual details providing users with the link to this item in online shop. Thus, this page, which is actually the part of a sales funnel for the e-commerce website, is in charge of attracting users and informing them about the product. Minimalist design full of air makes visual accents noticeable and engaging while general layout presents the actual direction of company services. Broader aim was to transfer the atmosphere and spirit of the brand by means of design solutions.

 

Web platform for an encyclopedia

 

tubik studio web ui design

 

This case realized the idea of web encyclopedia devoted to the theme of birds-of-paradise. The designer concentrated on main aspects of usability and utility of such a resource for readers and at the same time set the goal to make it attractive and giving clear message of the site features with general stylistic concept. Animated transitions make  scrolling interactions engaging and add style to general performance.

 

Web design for photography workshops service

 

website design for photographers

 

Here is the landing page for a company organizing photo tours and workshops for photographers. Functional and stylish minimalism is the basic approach behind this web interface, visual elements inform users and provide quick harmonic perception of the nature of the services while animation is provided to show the transitions between content blocks.

 

Landing page for coffee delivery service

 

web design UI tubik studio

 

It’s not a secret that drinking coffee is the daily habit, sometimes even obsession, for many people, and different services speeding up the process of getting a cup “on the go” are getting more and more popular. This example shows you a design concept of a landing page which presents an experimental service «Coffee Wings» providing coffee delivery by drones. Landing was created in the manner combining traditional visual elements setting positive associations with coffee and images of innovative technologies involved to this user-friendly service. Copy blocks are not overloaded so that visitors could get the idea and benefits of the service quickly and clearly and obtain more information, if they want, following the calls to action.

 

Design concepts for 404 page

 

web page illustration

 

There are tons of design solutions for 404 webpage, which is strategically important for any website, and still this design object is always actual. This sample shows web design accomplished with some artistic approach featuring the original illustration of the penguin directing everyone back from the Pole where nothing can be found.

 

tubik studio web design

 

Another concepts shows different stylistic approach and features a page 404 for e-commerce website. It is based on harmonic interconnection of the background and actual layout elements such as header, CTA button and copy.

 

Today’s list is over but studio practice is full of many other interesting examples of design concepts for different purposes and needs of modern users. Don’t miss new presentations in our future posts.


Welcome to see the designs by Tubik Studio on Dribbble and Behance

Welcome to read UI/UX glossary on web design

copywriting tips

Tips by Famous Writers for Good Copy Content

Creating high-quality content for the digital product is the issue of the same importance as thought-out design and careful bugless development. Copy is what makes design even more powerful breathing deeper life and sense into the webpage or app screen. Copy is information. And information, as it is known well, is the tool of incredible diversity and the key to many doors.

 

William G. Pollard once wrote: «Information is a source of learning. But unless it is organized, processed, and available to the right people in a format for decision making, it is a burden, not a benefit.» Working with copy content for digital products, writers get even closer to the issue, as the texts they usually write are aimed at supporting the goals set behind a particular product, mostly solving problems or improving lives. Good copy strengthens design significantly, poor copy is able to kill great design solutions and hours spent creating code for the app of website.

 

One of our previous articles here in Tubik Blog was devoted to the topic of copywriting for UI. Today we would like to continue this theme with the set of practical and useful tips on writing from famous and recognized authors. They performed successfully in different genres of literature, mostly fiction, still many tips they give generally about organization of writing process, creative approaches and self-critique are applicable and useful for copy content of all kinds. Let’s review the first set and chalk them up for creating high-quality and user-friendly copy.

 

copywriting for digital products

 

You can’t wait for inspiration. You have to go after it with a club. (Jack London)

 

In one of our articles with tips for designers we have already unveiled this aspect of creative job, and the ideas which were offered are also fair for writers, especially those, who are working within particular tasks and products rather than in free creative flow. Creative people often say that they cannot work without necessary inspiration: they are just waiting for the muse which will help them to find the best solution. Like it or hate it, but muse which doesn’t arrive on time is not the reasonable explanation of broken deadlines or inappropriate result. Therefore, if you want to have the serious name and get respected by the clients, if you set the goal to have constant flow of projects and earn more and more, find the ways to call your muse when you need it, not waiting when it wants to come. By the way, the process of research and writing drafts is one of great ways. Appetite comes with eating, muse comes with working.

 

Write drunk, edit sober. (Ernest Hemingway)

 

That is another absolute truth for writers of any kind. Certainly, drunk is not meant literally here, still any writer knows that feeling of being a bit besotted by the idea under writing. When you caught the necessary state and vibe, you often see and feel the whole piece of writing in your mind and will wish not to stop until the last line is dropped on paper or screen. That’s the stage of pure creativity and it would be a big mistake to interrupt it: don’t hesitate, get dip into the process and write until the last full stop is reached. Still never ever show the result to the public: always take time to review and edit with sober and concentrated mind. This will let you see the small mistakes, misprints, duplication, poorly structured sentences and phrases. This will enable you to provide your reader with high-quality well-structured copy, which is the highest form of respect. So, in other words, write with hot heart, but edit with cold head.

 

The first draft of everything is shit. (Ernest Hemingway)

 

One more rule by Hemingway clearly echoes the previous tip. Always take the draft as just a draft. Any piece of writing needs revision, not only in the aspect of minor errors or technical alterations, but also reviewing the text thoughtfully after the first wave of inspiration has washed away and common sense comes into play. Review allows enhancing the initial idea with analysis, enables to feel the integrity and unity of general performance, estimate the appropriateness of stylistic elements and hierarchy of the elements etc.

 

The main rule of writing is that if you do it with enough assurance and confidence, you’re allowed to do whatever you like… So write your story as it needs to be written. Write it honestly, and tell it as best you can. I’m not sure that there are any other rules. Not ones that matter. (Neil Gaiman)

 

It’s quite easy to imagine this state of things for fiction writers, who mostly choose the theme and genre by themselves, but there will be many people saying that it’s impossible for copywriters: they write what they are told to write. Still, in this sphere the impact of sincerity and creative passion hasn’t been cancelled. Certainly, a great professional master will create copy for sometimes highly diverse themes: the trick is that in most cases this amazing proficiency level will be supported with the writer’s natural diversity and curiosity as well as broad outlook. People, knowing a lot, with lively and constantly learning minds, are able to get sincerely inspired by various issues and tasks. The best bloggers and copywriters are the ones who write on topics they really believe in and have something to share about — in this case, they have that great courage to write honestly and feel what the readers need to get from them. Finding your themes and strengthening in them has a huge benefit of getting tasks and being paid for writing on topics you really feel yours.

 

design4users blog

 

Always carry a note-book. And I mean always. The short-term memory only retains information for three minutes; unless it is committed to paper you can lose an idea for ever. (Will Self)

 

Certainly, in present-day reality notebook can get transformed into a laptop, the tablet, the simple app for taking notes on the mobile phone — it doesn’t matter.  What does matter is being able to take a note any moment a fresh thought important to remember comes to mind. Sometimes it happens you come up with a brilliant solution or word combination, the brand name or great headline being far from your workplace and that is not the reason to lose it. As well as it doesn’t mean you should stop anything you’re doing if the good thought on work issues occurs to you suddenly. A small note, a couple of words taken down anywhere will really help. They will save the thought, will set the small tag to enable the writer pull it out and use at the moment when it’s convenient. Many writers know this small secret is an effective step to creative productivity.

 

Always be a poet, even in prose. (Charles Baudelaire)

 

The tip can seem a bit unrealistic for non-fiction writing. However, it definitely works. Words are the great tool transforming not only sense and information, but also voice, tone and mood. One of the big mistakes about copywriting is thinking that it doesn’t present such a wide field of expressiveness and imagery as writing fiction or big publicist works. Vise versa: in vast majority cases, copywriting requires high and intensive creative word processing as texts are mostly concise and restricted with many limitations and still they need to inform users, create necessary mood, transform information and often — persuade or touch some sensitive layers of perception. Lots of mechanisms and methods used by fiction writers and poets can be applied in copywriting: synonyms, idioms, metaphors and metonymies, alliterations and assonance, hyperbolas and litotes, anaphoras and epiphoras added thoughtfully and properly to the copy let it reveal new shades of the textual content. They can make the copy more creative, more vivid, more human-like and original. Furthermore, they enable the author to set the unique style of writing that will get recognizable, which is in particular need for those who create quite big texts for websites and blogs, advertising materials or presentations. Being a poet means adding an original creative spark to what is written.

 

copywriting tips

 

 

When you can’t create, you can work. (Henry Miller)

 

Copywriting is not only creativity. It is also analysis and learning, obtaining knowledge about object and spheres the copy is created about, researching and testing the created copy, editing and proof-reading. There is always plenty of work, even for the moments, when you do not feel yourself flying on the strong wings of inspiration. One more thing to mention: creativity gets stronger with practice. If your mood today is not creative, then set the practical tasks for yourself and make your skills better for the moment you muse comes to help you.

 

You can fix anything but a blank page. (Nora Roberts)

 

In creative work, sometimes the only thing which is needed is taking the first step. Have you ever experienced the moment at an exam or test when you see the task and feel the surge of panic: «I know nothing on that! That’s total failure! Nothing to say! No single word!» and then after a minute or two, getting calmer and colder, you bring out the best of your potential and give the good answer? Supposedly, many people went through that. And this is the part of creative routine, in particular working with copy, which can go through the variety of stages, from «I don’t know anything on this topic» to «There are tons of texts on that, how can I create something unique and original…». The secret is simple: start writing. Any result of the process will stimulate your creative force. Perhaps, you will create something horrible that will obviously need rewriting, and that will be the result also: you will know what is definitely inappropriate for this task and feel how to fix it. Just turn the key with the first line to start the ignition.

 

Writers do not merely reflect and interpret life, they inform and shape life. (E. B. White)

 

This is particularly true for copywriters. In most cases, they don’t have the luxury just to reflect the life as well as their own thoughts and feelings. Their key professional aim is to inform people, sometimes to educate and give instructions, guide and help, solve problems and persuade, to shape values and stimulate opinions. This is not the set of pathetic expressions, this is a real ground for the great responsibility a copywriter bears every day. Considering it and forming the professional approach with deep respect to the readers provides useful and thoughtful copy.

 

tubik studio free ebook design for business

 

Do not … address your readers as though they were gathered together in a stadium. When people read your copy, they are alone. Pretend you are writing to each of them a letter on behalf of your client. (David Ogilvy)

 

This secret from the guru of copywriting has survived through several epochs of information and technology revolutions without any slight change. Readers still are keen to read something which they feel helpful and sincere, which appeals to them and brings a pinch or loads of actual usefulness or enjoyment.  As well as they do feel hypocrisy and purely technical approach to creating texts.

 

On the average, five times as many people read the headline as read the body copy. When you have written your headline, you have spent eighty cents out of your dollar. (David Ogilvy)

 

The principles of visual hierarchy have set strong rules for writers, journalists and editors for many decades, being transformed and revised for copy content created for digital products. It’s vital to remember: the text on a webpage or screen should be easily scannable and skimmable. And the first thing scanned by users is headlines. They need as much (if not more!) attention as the rest of copy. No wonder: in most cases headline is a crucial element of making the decision, it stimulates the reader to spent more precious minutes on further reading and creates first vibes of tone and style.

 

tubik studio home page design

 

If you’re trying to persuade people to do something, or buy something, it seems to me you should use their language, the language they use every day, the language in which they think. (David Ogilvy)

 

Writing for readers, know your readers. Using inappropriate style and language is able to destroy the chances of creating the text that will get target readers interested and wishing to read more. Surely, that doesn’t mean going to oversimplification and making your copy primitive aka clear for everyone. It means keeping the balance and making the text you create natural, first of all for the core target audience. So, definition and research of target readers is the important part of copywriting routine, preferably on pre-writing stage of working out a particular task.

 

If you want to be a writer, you must do two things above all others: read a lot and write a lot. (Stephen King)

 

It’s not a secret that practice makes perfect. Reading a lot, you get passive practice; writing a lot you level up you active writing skills. Both are crucially important for broadening professional horizons and setting up creative sails for every wind.

 

tubik studio reading list design

 

Use the time of a total stranger in such a way that he or she will not feel the time was wasted. (Kurt Vonnegut)

 

People, reading the copy you write, trust you the most precious of their resources: their time. Consider that,  respect their time and effort, make use of that time and do it in smart and elegant way — your readers will be grateful and happy while you will get this respect back in professional recognition.

 


Welcome to read the article about copywriting for UI

Welcome to read the free e-book by Tubik team Design for Business

tubik studio web development

Front-End Development. From UX Design to Code.

User interface serving the aims of positive and problem-solving user experience is one of the key aspects of creating digital product, still it’s web development that enables users to get real and live surfing experiences. With the course of time, more and more businesses are going online, so there appear some loose ends that need to be cured through user experience. In business struggle, everyone wants to please their customers and engage them to return again. Today, businesses realizing the value of thought-out and professionally built user experience are able to take the best from digital technologies and products. Full-cycle UX design gets its live version via web and mobile development transfroming step by step from subtle idea to real digital product.

 

Getting down to cases, online businesses are all about user experiences and of course the products and services they are selling. Have you seen websites like Amazon, eBay, AliExpress? They are convenient and helpful for their users even being huge websites that offer millions of products and thousands of services. The value of thought-out UX and efficient UI is irreplaceable. How could this result be achieved? This is the point when the power of front-end development comes into play to not just enhance the look and feel of website but also take the major role in increasing the level of user experience.

 

Tubik Studio design team

 

What is front-end?

 

All websites consist of structure, data, design, content, and functionality. Creating user-facing functionality is the task of front-end developer. Using a combination of markup languages, design, client-side scripts and frameworks, they create everything that users see and interact with: content, layout, and functional elements.

 

Three main parts of every website are: the client, the database, the server. The client is simply the web browser a person is using to load a site, and it’s where client-side technology is unpacked and processed. In a general way, a server is a computer, a device or a program that is dedicated to managing network resources and data. The server is at a remote location anywhere, it is holding data, running back-end of a website, processing requests, and sending response to the browser. The client is anywhere the users are loading a site: mobile devices, laptops, or desktop computers. Server-side scripting is executed by a web server; client-side scripting is executed by a web browser.

 

front end develoment tubik studio

 

Let’s have a closer look at this process.

 

The Server — this part of website is responsible for holding data, running the website’s back-end architecture, processing requests, and sending response to the browser.

 

The Client — requests pages from the Server, and displays them to the The User. In most cases, the client is a web browser.

 

The User — uses the Client in order to surf the web, fill in forms, watch videos online, in other words and interact with webpage.

 

web development server

 

To see how it works in practice, let’s take the flow of interactions with Tubik website for example.

 

The User opens his/her web browser (the Client), then loads http://tubikstudio.com/. The Client (on the behalf of the User) sends a request to http://tubikstudio.com/ (the Server), for our home page. The Server then acknowledges the request, and replies the client with some meta-data (called headers), followed by the page’s source. The Client receives the page’s source and renders it into a human viewable website. The User types «Case Study» into the search field, and presses ‘Enter’. The Client submits that data to the Server. The Server processes the data, and replies with a page matching the search results. The Client, once again, renders that page for the User to view.

 

Processes running in web browser are the following: when the page is in process of loading, scripts are embedded within and interact with the HTML of a site, selecting elements of it, then manipulating those elements to provide an interactive experience. Next, scripts interact with a CSS file that styles the way the page looks. It dictates what work the server-side code will accomplish and returns data that’s pulled from the site in a way that’s readable by the browser.

 

For example, when we open home page of Tubik Studio website, the back-end is built to pull specific data from the database to Client, while front-end scripts render this data into readable for human view webpage.

 

Front-end languages

 

Widespread client-side languages which front-end developers use regularly and have to know include:

 

JavaScript: With its frameworks and libraries, it’s the core of front-end development, and beyond. It is called the first client-side language and is still the most common client-side script on the web.

 

HTML: Every front-end developer has to know this language. It dictates a site’s organization and content and all interaction. HTML elements can annotate footers, headers, how text is displayed , how media and images are appeared, and more.

 

CSS: Cascading style sheets (CSS) is broken into modules and comprises the code for every graphic element—from backgrounds to font—that make up the look and feel of a website.

 

programming languages fron-end

 

Front-end frameworks

 

A framework is a hierarchical directory that encapsulates shared resources, such as a dynamic shared library, nib files, image files, localized strings, header files, and reference documentation in a single package. Here are some popular frameworks that are usually used.

 

AngularJS: This framework and several other JS frameworks, like Backbone.js, Ember.js, Express.js or ReactJS demonstrate the capabilities of JavaScript.

 

jQuery: It is a fast, small, JS object library that streamlines how JavaScript behaves across different browsers.

 

Bootstrap: This leading mobile-first framework includes HTML, CSS, and JavaScript to facilitate rapid responsive app development. With Bootstrap, website is compatible with all modern browsers and looks great on any size screen, from tablets to phones, from laptops to desktop computers.

 

Foundation: Responsive front-end framework is used by sites like Facebook, Yahoo!, and eBay.

 

Semantic UI: It is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

 

Yeoman: It is a generic scaffolding system allowing creating of any kind of app.

 

Pure.css: It is the set of small, responsive CSS modules that you can use in every web project.

 

Skeleton.css: As Skeleton’s developers stated: “A dead simple, responsive boilerplate.” It is the set of small and easy, responsive CSS modules that can be used in every web project.

 

web development framework

 

The next posts about web development are coming soon for those who are interested and in them we are going to tell you more details about different aspects of the job: the closest ones will tell about specific features and tools for back-end, web developers work flow, and trends for front-end development. Don’t miss!


Welcome to read the article about basic terms and tools of web development

Welcome to see the designs by Tubik Studio on Dribbble and Behance

book swap app design

UI Animation: Eye-Pleasing, Problem-Solving.

Animation applied in user interfaces is the topic drawing high attention and provoking hot debates nowadays. Although there is a big army of those who find animation an unnecessary feature overloading user interface and making it more complicated, most users expect motion as an integral part of interaction experience. So, designers and developers work over more and more sophisticated methods to make animation pleasant-looking and problem-solving characteristic of modern apps and websites.

 

Why do users love motion so much? Mostly, because animation supports the essence of actual and real interaction, it creates the level of feelings and perception close to what people have when they are interacting with a physical object in real life. This sort of feeling can boost user experience rate of positiveness really high as the more natural user feels, the less effort is needed to deal with the app or a website and the more clear it is how it works. Certainly, it makes users satisfied. No secret, satisfaction and pleasure are among top things encouraging people to use the product again.

 

Like everything that is put into the interface and process of interaction with it, animation must be a functional element, not just a decor. Considering motion elements while planning user journey around the digital product, designer should deeply analyze its potential for increasing usability, utility and desirability of the product before making a decision to apply it in the layout or transitions. Animation in UI requires thoughtful approach and always needs to have a clear purpose set behind. Advantages and utility of using it in the interaction process have to be obvious and outweighing possible disadvantages. Animation should become icing on the cake, not a fly in the ointment.

 

Tubik Studio

 

Define the problem

 

One of the best approaches to make animation functional not only attractive is to reveal the problems that it potentially can solve. It can be done at all the stages of design process:

 

user research will let you know who the target users are, what’s their age, preferences, level of tech literacy, environments and conditions at which the product will be used, and plenty of other factors from the users’ side that can influence user experience;

 

marketing research will give the insights of existing products, their strong and weak sides as well as methods of forming user loyalty, which is the good basis for defining USP solving particular users’ problems as well as original ways of the product presentation and performance;

 

UX wireframing stage will enable to think over the logic of interaction, layout and transitions and get the first assumptions of the points which can be strengthened with animation;

 

prototyping stage will reveal new aspects of live interaction with the screens;

 

UI design stage will provide the complex of visual presentation for the product scheme and system setting a new perspective of applying animation into the app or website;

 

 user testing will show if the decisions made about animated elements were correct and their benefits really outweigh possible pitfalls.

 

tubik studio work

 

At every stage, if designer sets the goal to reveal possible big or small problems users can have, animation as well as any other design element can take the role of problem-solver for the case.

 

Let’s review some typical problems that can be solved by means of interface animation.

 

Problem: I want to know the action is done.

 

This is one of the problems that can be easily and quickly solved by animated details applied in UI. Microinteractions supported by clear finalization via motion create fast feedback for the user and make the experience positive and efficient while navigation simple and intuitive. Animated buttons, switchers, toggles and other interactive elements inform user in split seconds activating all the potential of fast visual perception.

 

switch animation tubik studio

Switch Control Animation

 

hamburger_menu tubik studio

Hamburger Menu Animation

 

hamburger button tubik studio

Hamburger button interaction

 

tubik studio button ui

Tab Bar interaction

 

add button animation

Add Button interaction

 

pageindicator tubik studio

Rubber Indicator

 

Problem: I want to know that action is in progress.

 

This is also a huge area of application for diverse motion design potential. When users interact with a digital product, they want to know what is going on at every single step. Making users wait in uncertainty is the risk of losing those users. Still, when users are informed, waiting can be not so annoying and stressful. So, this aspect should always be taken into account and there are many ways to support it via interface animation. This is the high time for pull-to-refresh indicators to come into play and show their best.

 

pull_to_refresh tubik studio

Pull To Refresh

 

preloader animation tubik studio

Preloader

 

pull to refresh animation tubik

Pull to refresh

 

pull-down animation tubik studio

Pull Down — Hourglass

 

tubik studio pull down

Pull Down — Space Ship

 

Problem: I can’t see the progress and don’t understand how long it will take.

 

Quite often it’s not enough just to let users know that the process is going on. They often want more: to see how fast it is progressing and how long it will take. Again, interface animation can be a great helper here. Load bars and progress bars, animated timelines and other dynamic elements can kill several birds with one stone:

 

— they inform user about the level of progress

 

— they can become the entertaining element blunting negative experience of waiting in the process of interaction

 

— designed and animated in an original way, they can become a viral feature which users will want to share with others and engage more users into action.

 

tubik studio motion design

GIF for the Timeline App

 

tubikstudio motion design

GIF of Dynamic Scroll

 

Problem: I don’t want to make my screen a mess.

 

That is really a vital thing to think over in the interface design. If the screen or page looks like mess overloaded with tons of data which is not clearly organized, it will require additional effort from the user to understand how it works and where the needed information can be found. The more effort, the higher chances are getting that users will go away in search of simpler solution. In vast majority of cases users wish to have apps and websites that will simplify and improve their life, perhaps even will do some job for them rather than will take additional effort and time on interaction. Animation can be a good way to enhance interaction with various data blocks and sections and make everything feel organized even in highly data-saturated and complex interfaces.

 

sport app motion ui tubik studio

GIF for Sport App

 

tubik studio motion design ui

Cards Animation

 

UI Design Interaction Tubik Studio

Boat Station App

 

tubikstudio blog app ui animation

Blog App

 

Problem: I want to see the key things first.

 

Visual hierarchy and clear navigation are always a great concern for designers creating interactive digital product. Users’ attention should be immediately drawn to the key element of interaction according to its goal and conditions. Animated interface elements present great supportive force for this aspect, enabling faster and more distinct visual marking of important elements in the layout.

 

tubik studio tapbar ui

Tapbar Interactions

 

tubik studio behance weather app

GIF for the Weather App

 

App screens by Tubik Studio

Resto App 

 

Problem: I want to feel the interaction natural.

 

This is the problem that most users will not be able to formulate, still it has a great influence on user experience. If users say something like «I’m not sure what’s wrong but there’s definitely a thing», try thinking over more natural interaction. Animation in the interface can create pleasant illusion close to natural interaction with physical objects which often doesn’t need too much cognitive process. For example, if you pull the object, press it, move out the tab, the movements should feel natural.  Again, users won’t be able to see this sophisticated work accomplished by designers: they will take it for granted and the fact it makes them comfortable will be the biggest praise for design solutions.

 

tubik studio_social_network

GIF For Social Network 

 

tubik_studio_book_swap

Book Swap App

 

Dribbble shot by Sergey Valiukh

GIF for Restaurant Menu

 

This sort of problem is also popular in interaction with web interfaces. Thought-out movement of layout elements while the webpage is scrolled can enhance user experience significantly and create the feeling of one integral smooth interaction rather than several separate parts or blocks of the page. All in all, it’s pleasant and engaging, and these emotions are a good factor of retaining users.

 

Landing Page Animation Tubik Studio

Landing page animation

 

landing page animation Tubik studio

Landing page animation

 

landing page for capitoledge by TUBIK

Capitoledge — Free Screensaver

 

tubikstudio ui animation website design

Bjorn Website

 

 

Problem: The screen/page is boring.

 

Obviously, talking about interfaces, people often move functional side and usability to the foreground, as key or sometimes even the only aspect requiring consideration. And that’s right and logical, still it cannot null the fact that people are driven not only by logic. There are also such big factors as emotional and aesthetic satisfaction able to influence user experience greatly. Thoughtful balance of utility and usability on the one hand with emotions and aesthetics on the other can bring user-friendly product. And animation is a great booster in this perspective of interface design. It can mark out the beauty of colors and gradients, breath life into layout, make movements dynamic or vise versa smooth, strengthen the power of UI elements with motion and original transitions.

 

calendar-app animation tubik

Calendar App Animation

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Contact List Concept Scrolls Tubik

Contact List Concept

 

tubik studio application recipes and cooking

Recipes App

 

juicy player UI Tubik Studio

Juicy Player

 

So, definitely, animation in user interfaces has massive potential in solving diverse problems of interaction. Still, even the slightest piece of motion added into UI requires thoughtful approach analyzing not only advantages but also possible drawbacks. Animation should support the user, that is its main goal in the interface.

 

Tubik quote UI animation

 

Recommended reading

 

Diverse issues of applying animation in UI design have been an object of professionals’ attention for a considerable period. Here is the collection of articles for those who would like to read more on the topic.

 

Interface Animation. The Force of Motion.

 

Animated Interactions. Motion on Purpose.

 

UI Animation. Microinteraction for Macroresult.

 

UI in Action. 15 Animated Design Concepts of Mobile UI.

 

How to Use Animation to Improve UX

 

Functional Animation In UX Design: What Makes a Good Transition?

 

Experience Design Essentials: Animated Microinteractions In Mobile Apps

 

The ultimate guide to Web animation


Welcome to see the designs by Tubik Studio on Dribbble and Behance

ToonUP design by Tubik Studio

Tubik Products: Feel the Way of Outsource Clients.

Design is always the story of creative process for a particular purpose. However, the story itself can be written in a hundred of different ways and styles. It can be done individually or become the result of effective teamwork. It can be simple or complex. It can be narrow and specific or multipurpose. It can be outsourced or fully accomplished in-house. There are tons of shades for this story and all of them influence the final result that goes to users.

 

Here in Tubik Studio we have had the lucky opportunity to create a considerable number of design stories, all so different but all so definitely bright. It gave us the opportunity to feel all the benefits and pitfalls of design provided in terms of outsource partnership. To go further and get even closer to final users, to feel all the pains of our clients and all the variety of steps needed for creating an efficient product out of thin air, we have decided to make the next step and launch our own digital products. Extended design practice we have got through the years encouraged us to dive into all the path of product creation, testing, promotion and analysis to obtain that precious knowledge that will enable us to be even more helpful for our clients all over the world.

 

design studio TUBIK

 

No doubt, full-scope product design is not the way to start light-headedly. First of all, we had to analyze how design provided in outsorce differs from product design provided in-house. Let’s look over some insights together.

 

Outsource design

 

Being a team with a broad portfolio of outsource projects and having studied experience of our clients as well as plenty of successful product companies, we have marked out the following points needing consideration.

 

In outsource design process you are given a particular design task. That means you are able to concentrate on design tasks only as the strategic decisions are mostly made on the customer’s side. In practice, however, this disclaimer works a bit differently: creating design solutions solving users’ problems and bringing profit to the customers, designers can and often should influence the strategy of the product progress on the market. Anyway, all the final decisions and small or big changes of the product strategy are made by the customers team as they bear the final responsibilities and all the alterations or suggestions should be made in tight collaboration with the side launching the product.

 

In outsource design you work on the task you are assigned for, you are not a chooser of the strategy and not a decision-maker if this product is needed and if the idea behind it is good or bad. You have to study how to like and love any idea you have to work with because it is the only way to create good result and by the way to earn money. That is not in your scope of work to get into deep layers and tell the client that this idea will not work — your task is to make it work. That is what you are paid for.

 

In outsource design you need to have good skills of getting dip into the business goals and correspondent wishes of your client. In fact, if you are lucky you get a clear task supported with outlined target audience of the final product, perhaps marketing plan and ideas on client’s stylistic preferences. In other cases, you will get just a general line containing highly blurred task like «I want you to design a social network for drivers» and that is the part of the job to get all the details of how the clients sees it. It can be done by designers, sales and project managers, but whoever the doer of this vital job is, it is the only way to make the process of collaboration on the stage of design smooth and resultative.

 

—  In outsource design you aren’t always provided with the opportunity to communicate with stakeholders and influence their decisions. You are hired to accomplish a particular scope of works. It has to be mentioned that for many designers it is a benefit as they start work with a particular task in mind and do not need to get involved deeply at predesign or post-design stages. However, there also can be projects at which after launch of the product designers are later given additional tasks on maintenance and alterations of the existing product.

 

Design Studio Tubik

 

Product design

 

— In product design accomplished in-house all the scope of stages from ideization up to sophisticated testing and maintenance is done by one team. This means that designers get more chances of being involved into all the phases of strategical decision-making upon the product which is even more creative and analytical job but at the same time requiring more diverse skills and much higher responsibility.

 

— Full-scope in-house product design goes much further than actual design tasks. It includes all the creative cycle, with complex of tactic and strategic plans, ideas on commercialization and promotion, budgeting and content marketing, product philosophy and full-scope branding and so on and so forth. It means that the team will need diverse specialists that will establish solid foundation of specific skills strengthening design and bringing effective product into life.

 

— In product design the creators are the stakeholders. This certainly means deeper involvement of all the participants into creative process and at the same time more responsibilities.

 

Product design is the domain of higher financial and creative risks. In outsource design, especially when the process is already tuned and clear, the earnings can be more predictable and flexible in budget planning of the company.

 

— Product design suggests deep concentration on one project and one aim for a long time while outsource projects can be different and support the feeling of refreshment. Should be said,  none of the ways is better or worse, they are just different and sometimes what is one designers’ meat is other designer’s poison according to the individual peculiarities of nature and creative approach.

 

To sum up, in outsource design you are a vital part of the product creation and support while in product design you are actually in the heart of all the processes being not a part but the whole story. In outsource design you are a sort of hired executive while in product design you are a stakeholder with all the responsibilities of this not-so-easy job.

 

Broadening the horizons: Tubik upcoming products

 

Considering all those issues, we have decided to know it first hand: the work was organized in several direction so that our team could obtain as broad experience of full product cycle as possible and it could bring us even closer  to the pains, problems and pitfalls which our clients tackle on their way. We have set the purpose to create products helpful for their target audience and adding some social value as well as giving us comprehensive experience of full path of goal-centered design.

 

So, the directions in which we are working over the digital products are:

— content

— entertainment

— business

— education.

 

The first two of the mentioned points are actually represented with the products by Tubik team we are happy to announce. «Content» direction is presented with recently launched website Design4Users and «Entertainment» direction is presented with an application ToonUp which is really close to its release.

 

Design4Users

 

Design4Users Tubik Studio

 

Design4Users is a blog devoted to diverse design issues solving users’ problems. It is organized via the basic categories such as «Branding» «Product» «Print» and «UI/UX» and plenty of more detailed tags in the mentioned domains. This resource was started with the aim to provide designers, customers and all those who are interested in this sphere of human activity with a wide variety of useful and interesting content supported with attractive and functional design. The blog is designed, developed and curated fully by Tubik studio team.

 

Tubik Studio design team

 

ToonUp

 

ToonUp is a brand new alarm application for iPhones designed and developed by Tubik team. At the moment it is being prepared to release and its live version is coming up very soon. In this case, we have set the purpose to combine functionality with entertainment and support the product of everyday use with stylish graphics, which have been recognized our house specialty by great deal of clients, and gamification elements. If you would like to get updates about its release and sweet bonuses from our team, welcome to sign up here or keep up with the news on its Facebook page.

 

toonup application tubik studio

 

In our next articles and case studies we will tell you more about the creative process for these products and unveil some considerations on product design features, issues and requirements. Follow the news!


Welcome to see designs by Tubik Studio on Dribbble and Behance

Welcome to Design4Users

wordpress theme design tubik

WordPress Theme Design: Ready-Made vs Custom.

Today there is no point explaining numerous advantages which a website can bring to personal and business development. Websites provide companies, readers and sharers with a great variety of opportunities and niches, from personal presentation and communication to global educational programs and large business partnerships or charity projects. Every day more and more people are looking for a way to efficiently use the unlimited potential of the world wide web for self and professional growth without spending too much time on its maintenance and studying how to operate with web dashboards or write code.

 

Understanding this growing need, there are platforms providing needed functionality: they allow people with intermediate or even basic skills of using the web to start their own website or blog quickly and easily. As the issue is debatable today in perspective of design and user experience of the websites created on these platforms, we have decided to add our ideas to this global discussion here in our blog. Naturally we will start with the most popular option which is widely used worldwide and is called WordPress.

 

wordpress theme design tubikstudio

 

What is WordPress?

 

WordPress is a content management system (CMS), at the moment it wins the top position in its niche. Content management systems are web applications created for making and operating (aka managing) different sorts of content via uploading, editing, and publishing posts containing copy, images, audio and video etc. So, this is the multifunctional platform for blogging, both personal and professional, and also creating websites for various businesses or non-profit organizations and movements.

 

There is a number of content management systems nowadays, all of which have their wide or narrow audience. However, at the moment WordPress presents the market leader opening wide opportunities for setting websites quickly and easily. Let’s look closer what are the benefits attracting people so much.

 

What are general benefits of WordPress?

 

To the benefits that have really positive impact on any sort of website set in this CMS we would definitely mention the following:

 

— WYSIWYG  («what you see is what you get») editor that enables people to work with the system and operate with content without knowledge and skills of coding in HTML or other languages. This means that, for example, professional copywriters or journalists can be involved straight into the process without necessity of additional training. Basic skills of operating with text editors is enough to start publishing. Moreover, it’s a great way to start for those people who can offer their services and goods but are really far from any sort of coding.

 

— Individual and group operations. One WordPress account presenting a website or blog can be controlled and filled with content by either one admin user or multiple users. That enables efficient teamwork which is especially appreciated for big informative resources.

 

— SEO-oriented URL formation and copy processing. Content applied in the products created on the basis of CMS can be automatically optimized for search engines that creates higher chances for the content to reach its readers. In addition, in the admin dashboard writers are offered the ability to even work over optimization of all the images uploaded to posts.

 

— WordPress offers its users detailed documentation and technical support, which makes interaction with the platform much easier.

 

The rich system of plugins enables to effectively adapt the websites along the requirements of its creators and final readers/users.

 

The variety of themes (design templates) enables users to select the design which is the most suitable for their aims, target audience needs as well as their own tastes.

 

Definitely, there are many other benefits, but the outlined ones are among the most popular features creating the feeling of user-friendly and multipurpose resource. Furthermore, today they are added with steadily growing field of design for WordPress themes that have already formed a huge repository of themes and templates for the users worldwide. So, let’s look a bit closer at the design aspect of the story.

 

front end develoment tubik studio

 

What is a WordPress theme?

 

A WordPress theme is a set of design templates that determines the general visual concept of a website as well as the interactive layout of its interface. Basically, it is the designed frame of a website which later will be filled with content. Themes are the way to display your content in attractive and edible manner to the final visitors and readers.

 

The theme can be chosen from the admin area and there are several ways to apply:

— the theme can be used in its original variant without changes;

— the theme can be slightly modified with the help of plugins or adding alterations to the original code;

— the theme can be massively changed via alterations in the code.

 

Themes define website layout on different pages (for example home page, post page, about page etc.), design features and elements (color combinations, typography, theme icons, buttons and illustrations etc.) and perhaps some special features (for example, sliders, preview models, menus, footer and header options, widgets etc.).

Summing up, choosing a WordPress theme, users can expect them to contain:

— typefaces and fonts styling

— the general visual design stylistic concept of the website

— color palette that often offers several combinations to choose from

— widgets availability and options for their location

— layouts of the webpages

— stylistic solution for blog or website archives.

 

There are themes that can be chosen for free and the ones that are paid for. Some of the themes could be defined as universal which means they can be adapted for different sorts and types of content, while others are designed aiming at more specific purposes like e-commerce, personal blogging, business presentation, portfolios, social communication, professional blogging for particular topic etc.

 

tubik studio landing page design

Vinny’s Bakery — website design concept by Ernest Asanov

 

In this perspective, the big question worrying many people thinking over the options of dealing with WordPress is the choice of selecting the ready-made theme, making slight alterations or creating totally unique design frame for their content management. Let’s consider this issue a bit deeper.

 

WordPress Theme: ready-made, adjusted or originally designed?

 

Actually, the theme choice is an issue of great importance. Visual impression is actually a card of invitation which gives readers of your blog or visitors of your website general imagination about its purpose and utility as well as can engage their interest to learn more. Carefully chosen theme can literally define the success of the business as well as reduce the chances of attracting broad audience.

 

It does mean that in any case users starting their path of interaction with WordPress CMS have to make a decision standing on the crossroads. Should they use a free theme or a buy a premium one? Should they select a universal theme or specified would be more efficient? Should they alter the theme anyhow or rely upon the original solutions made by professional designers? This sort of questions seem not really easy. And there is no a single universal answer for all of them, which is why, perhaps, the market of WordPress themes is so comperehensive and dynamic today.

 

Looking at the options and grounding on the extended practice in webdesign for different purposes here in Tubik Studio, we are certain that choosing the topic or asking professionals to do it for them, prospective users selecting the theme should find the answers for several questions:

 

— What is the purpose of the website? What is it launched for?

— What is the target audience of the website? What is their motif to use your website? What their problems can you solve? What are their general preferences and psychologic peculiarities?

— What is the color scheme appropriate to your content and to the preferences of your prospective visitors?

— What sort of data should be shown on the home page?

— What sort of previews you find effective?

— What kinds of content are going to be presented?

 

These and many other questions can seem quite specific, especially if we are talking about the idea that is launched just for communication rather than for having profits, like personal blog, for example. However, any project having even a simple goal can use design means directly to achieve this goal. Design with thought-out interactions brings positive user experience and is a solid foundation for successful use of the CMS whatever it is used for.

 

Free themes

 

Free themes can work well, especially when users only start dealing with WordPress. They will definitely get all the benefits of the CMS platform, mentioned above, and perhaps even will be able to select the theme which will correspond to their aims. However, they should be ready that the number of variants will be quite limited and there will be not so many themes designed for specific purposes. Moreover, it will be hard to make your website look original as you will use something available to anyone. Still, for users with very limited skills and no experience of coding it can be a great platform to start getting familiar with the process. Knowledge of coding will make possible to alter some settings and features in the theme.

 

However, for users starting websites with clear and particular business or personal goals and time frame of their achievement, this option can be too restricted and moreover too slow in providing result. For them, it is vital to start the website with clear, thought-out and recognizable design which will definitely attract their target audience and engage it to interact with the website content. In this case, more active help of professional designers can set the right route. And it can be accomplished in two ways.

 

Bought ready-made theme

 

Firstly, users can select the appropriate theme in the directories presenting them, such as ThemeForest, for instance. There is a big selection of various themes which get available for the buyers only after careful review checking the quality of their design solutions and code accomplishment. You can see the theme preview showing its main features. The themes are created by professionals who know how to deal with user-friendly solutions and think over the options not so obvious for average users but influencing final usability and conversion rates. You can see the creators of the theme and review their portfolio if you wish to ensure that they are professional enough. One more positive point is that the themes are categorized, so having specific goals it is easier for users to select the theme they need. For example, if you create a corporate website you set this filter and the list gets concentrated on what could be appropriate for your particular needs. This is a sort of goal-driven start of the way which makes possible to find the best match.

 

website design tubik studio

Adventure Agency Website by Valentyn Khenkin

 

Custom-design theme

 

Next step which can be also applied in the process of theme selection and its implementation for a user-centered and efficient website is theme of custom design. That means that all the features of the website like colors, layouts of the webpages, transitions and scrolling animation, call-to-action elements, responsive adaptation and many other design aspects will be originally created, tested and coded specifically for the requirements of this particular website and its target audience.

 

This approach allows website creators to think over the slightest details which will be empowered by general benefits of WordPress CMS. Design will be purposefully concentrated on clear goals and ways of their achievement, providing unique and custom user-friendly solutions on the basis of user research and then user testing. To make the thing even better, designer or design team curating the website can maintain the small alterations on the basis of practical analytics or provide general redesign on the basis of solutions that already proved themselves effective.

 

wordpress theme design tubikstudio

Originally designed theme created by Tubik Studio for Design4Users

 

To sum up, every above mentioned approach has its points and peculiarities in the aspects of pricing, adaptability, workflow and maintenance, usability of webdesign and many others. Anyway, we have to emphasize that every mentioned option has its own benefits for its segment of users. There is no one universal variant: each of them is good and appropriate when applied in accordance with corresponding conditions.

 

If you want to try yourself as a blogger, let’s say, posting short notes about traveling to different cities or visiting interesting events, then trying a free theme can be quite applicable to get familiar with a dashboard and the system in general.

 

For goal-centered business or personal blogging setting particular aims and timing for them, careful selecting and buying an appropriate ready-made theme can be a more efficient variant which increases the chances of getting more original looks for the website, as paid themes are used not so broadly and can offer more functionality and design templates or features.

 

For big websites with complex interface or those that require particular originality, creating a custom theme totally adapted to specific requirements and supported by the CMS abilities and benefits can show itself as the best and highest-performing option, but can involve bigger investments. Any individual choice of approach should be made on the basis of the particular goals, requirements, target audience and budgeting.

 

In our next articles we will concentrate more on applying these approaches in practical design perspective. Stay tuned!


Welcome to see designs by Tubik Studio on Dribbble and Behance

tubik studio landing page design

Soft Landing. 10 Design Concepts of Landing Pages.

What makes the journey by air good? Easy take-off, smooth flight, breathtaking view from the air. And soft landing with feeling safe and convenient. These final minutes of getting to your destination can become the icing on the cake, enhancing comfort and excitement of the flight, or vise versa, the dark spot crossing out all the amazement and positive moment if landing is hard and unpleasant, perhaps confusing or painful. Landing really does its job.

 

In webdesign it works similar. For many users well-thought-out landing page will be the good experience of getting to the right destination and starting a journey around the website from the proper point. In our previous article sharing the details of design for efficient landing pages we mentioned that process of creating landing pages lies on the crossroads of design, marketing, user research, psychology and other spheres dealing with people, their behavior and solving their problems. 

 

Here we have collected 10 different UI design concepts accomplished by studio designers. They represent different landing page reflecting various business goals, natures of presented offer and visual styles supporting the purpose.

 

Landing page for the shop selling organic products

 

Tubik studio landing page design

 

The aim of the presented landing page is to promote a shop of organic food. It is composed in several blocks presenting the name of the shop, products, highlighting some important aspects of service, call to actions and testimonials. The designer sets the purpose to make it informative but not overloaded, appealing but not aggressive. So, all the visual accents, first of all key images of food selected carefully to immediately transfer the appropriate message to the user, support the basic theme. To make the experience more attractive and engaging, the process of scrolling the page was livened up with animation and the visual elements were selected to support the general theme and provide immediate visual perception of basic idea.

 

We can also see that in this case the designer chooses quite short and condensed copy blocks which provide users with basic data and give the links to learn more following the call-to-action. At the same time keywords describing the most important benefits like ‘organic’, ‘home-made’, ‘quality’ are marked out visually so that they could be noticed at once. This strategy is wise as users do not need to spend much time reading to learn about the service, but see the opportunity to learn more any time they need. 

 

Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh

 

Landing page for a website providing services for everyday life

 

landing page design by TUBIK

Here is the landing page concept designed for a website of the agency that presents its services. The variety of provided services is echoed by the variety of colors used in the interface. The designer’s aim was to make it lively, vivid and attractive, creating catchy first impression and supporting positive user experience with engaging design solutions. Dynamic motion accents add much to the general stylistic solution whereas good combination of fonts with balanced contrast of layout elements create the field of good visual perception and enhance readability.

 

landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko

 

Landing page for museum exhibitions

 

Tubik studio UI animation

Tubik Studio | Museu by Ernest Asanov

 

This example presents a landing page promoting art exhibitions. The idea behind it is to make this sort of promotion aesthetic and unobtrusive for the user as well as highly informative. The balance of minimalism and utility appealing is kept by means of style, color and motion. The minimalistic presentation still is highly informative and successfully uses the studies along eye-tracking for applying the most important layout elements in the zones of the highest usability.

 

As we mentioned in the article devoted to benefits of dark background in UI, color of background can be not only the effective field of presentation but also the carrier of its own message. Dark colors are usually associated with elegance and mystery. Moreover, black is often associated with elegance, formality, prestige and power. That is, perhaps, one of the reasons why many powerful brands build their visual presentation around black-and-white scheme with dark dominating and light presenting and informing the recipient. Playing out this aspect in interface design can provide additional support to other design solutions and general presentation of the product which we can definitely observed in the presented design concept. Dark background make the images of the exhibits look more deep and stylish while the readability doesn’t suffer being supported with the right choice of fonts.

 

Landing page for a non-profit charity organization

 

Tubik studio landing page ui

 

The provided example shows the design concept of a landing page for a non-profit organization accomplished. It uses considerable copy blocks and supporting visual elements to set the understanding of the club activity. Decision on the amount of copy used on the page should be the aspect of thorough research and testing as it directly and highly influences conversions. However, it doesn’t mean that every landing page should contain minimal number of words. If it presents a famous company product or service or informs about special offers, sometimes short and concentrated copy is enough to encourage users. However, if a new unknown product or service is presented, it is important to provide users with more information persuading them to follow call to action. So, in this case copy becomes a tool of engagement and informing as the service is not concentrated on the product that can become the primary visual accent, but with the activities that should be verbally described.

 

tubik studio landing page design

Arts, Culture & Education Curation | Landing by Polina

 

Landing page for a native Mac application

 

tubikstudio swiftybeaver landing

SwiftyBeaver Landing Page by Ludmila Shevchenko

 

Here is a landing page for SwiftyBeaver native Mac application whose target audience is developers. As we can see it is designed in minimalist manner and concentrates users’ attention on short copy about the product’s functionality and CTA enabling to request a free beta access. Although the page provides other important links, they are designed in a way not distracting from the main elements providing conversion. The work on landing page for the product was also an interesting and challenging design task as far as the product doesn’t offer a lot of visual material for user engagement and attraction. Therefore, the main visual design solution was made around the colored accents echoing the design solutions of the application interface layout. 

 

Landing page for a gym

 

gym_landing_page_concept

 

Here is the landing page of a gym presenting all the basic information necessary for user: general description, provided services, trainers, prices and location. Slight colorful accents and motion effects are used to make the interface more engaging and scrolling more smooth. In this sort of service selection of appropriate motivational images is vital as people associate workouts first of all with attractive and athletic body and positive energy. So, photos applied in design presentation support this particular aim creating clear and obvious perception of the theme and benefits of the service. Bold and strong font applied for headlines adds to both fast readability of key messages and general visual consistency of all the design.

 

gym landing page concept by Tubik

Gym Landing Page by Dima Panchenko

 

Landing page for the shop selling travel gear

 

Travel Gear Landign page by TUBIK

 

This one features the layout of a landing page for e-commerce. The company presented by it sells gear for extreme sports and active traveling so images were selected to set immediate understanding of the main theme. The page includes general description of the shop, presents ability of transition to the catalog via description of hot offers and also has testimonials part to provide users’ opinion about the service. Good combination of visual elements on the background as well as dynamic photos support the clear setting of the theme and provide the strong associative link to potential buyers engaging them and informing about the nature of the offer.

 

tubikstudio travel gear landing

 

Travel Gear Landing Page by Tania Bashkatova

 

Landing page for a service selling wood products

 

landing page TUBIK design

 

Here is a landing page concept for the company offering handcrafted wood products for everyday life. The main design idea was to use wooden textures in some parts of the page to visually maintain wooden atmosphere and create a feeling of naturalness. The dark background helps to emphasize the colorful elements and make the overall color scheme more intense and stylish. Types and fonts were carefully selected and tested in order to strengthen general composition and provide readability for all the copy elements on the page.

 

TUBIK webdesign landing page

Wood Products Landing Page by Alla Kudin

 

Landing page for a digital non-profit product

 

landing page for capitoledge by TUBIK

Capitoledge — Free Screensaver by Vladyslav Taran

 

The landing presented here has the aim to inform users about a free education service Capitoledge Screensaver which provides the opportunity to use screensaver for studying capitals. Here you can see the upper part of the landing page which features interesting and engaging animation activated by smooth scrolling. Visual presentation is full of air due to light background which also provides easy readability and quick perception of the background map image. 

 

Landing page for an adventure agency

 

landing page design TUBIK

Adventure Agency Website by Valentyn Khenkin

 

Here is the concept design, presenting a landing page for an adventure agency specializing in air-balloon tours. All the information blocks are supported with bright thematic photos while copy blocks move users through the sales funnel stages. Again, light background feels harmonic and naturally adds air to general design presentation.

 

So, practice shows the diversity of techniques and methods to make a landing page informative and attractive. Nevertheless, to retain users, trendy and pleasantly-looking design should just cover effective functionality and user-friendly solutions which are accomplished according to business goals and user research. Otherwise, beautiful design will work like a hard landing immediately erasing all the positive vibes caught during the flight and that is a fast way to reduce conversion rates which are actually the main purpose of landing pages. Put usability, informative value and functionality first, think over the logic, transitions and intuitive navigation — and visual design will become a great support for smooth and effective landing!

 

Today’s list is over but studio practice is full of many other interesting examples of design concepts for different purposes and needs of modern users. Don’t miss new presentations in our future posts.


Welcome to see the designs by Tubik Studio on Dribbble and Behance