Tag Archives: product design

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

mobile application testing

The Brief Guide to Testing Mobile Interfaces

Mobile technology and smart devices have already brought massive and significant changes in human behavior, communication, way of thinking and lifestyle. In fact, the boom of apps popularity can be seen in plenty of industries, among which we can easily sort out some noticeable ones such as Media (magazines and newspapers), Travel (maps), Medicine (patient records), Finance (apps for real-time trading), Education (translators and dictionaries) and Social (games and social media platforms). With steady and obvious progress of the sphere, mobile and web apps are definitely going to become more critical for personal, professional and business success and efficiency. So, creating and launching a new application, all sides of its production should test the solutions and environment and well as practical quality of design and development outcome. Extensive practice we have got here in Tubik Studio proves that this is the well-lit way to providing users with positive experience and helpful products.

 

Testing is vital for product quality

 

In our previous article, devoted to the full cycle of creating a mobile application, we have already mentioned the great part of testing in providing high quality products, able to solve problems and improve lives. As it was outlined in general terms, testing is one of the crucial phases of the entire app design and development process: it helps to reveal bugs before the app is brought out to actual users. Practice shows that in the majority of cases, users abandon the app if it has functionality problems, no matter how promising and engaging it seems. Vise versa, even the simplest apps can be successful for commerce, business, advertising and other aims if they work correctly and efficiently, according to target audience’s expectations and solving their problems.

 

Testing doesn’t mean that designers or developers do not provide the upper quality. To set the analogy, the fact that every book, magazine or newspaper issue goes through editor’s eye doesn’t say that journalists or writers are not talented and qualified. Different specialists have different goals and skills in the process to increase general productivity and efficiency, and it works the same way for design and development of mobile apps. Supposing that developers have done a great job and made no mistakes, the task of testing is not only finding errors. Quite the opposite, it helps to understand the quality of the app and find the way to improve via real interactions.

 

Peter Drucker once said “Quality in a service or product is not what you put into it. It is what the client or customer gets out of it.”  In the majority of cases, if users see that anything in the app is broken or it constantly takes large amount of time to load preventing them from quick accomplishment of the task at hand, the risk is really high that they will bounce it and never come back. That’s why testing phase is the hidden hero of mobile app development.

 

Today we are going to concentrate more on perspective of testing mobile apps, as websites testing has its own specific features worth another article. So, let’s review the basic steps and aspects important for effective digital product testing.

 

mobile app testing

 

Start with the type of the app

 

Mobile app testing has plenty of challenges based on multiple factors: there are some compromise decisions testers or developers need to consider and choices they need to make on combinations of different techniques and methods to be used. One of the aspects to think over is the nature of the app itself directly influencing the process and limits of testing. In this perspective, the following basic categories of the apps should be mentioned.

 

Native apps. The apps of this sort are created specifically for one platform, aka operating system of device. They can take full advantage of all the device features such as the camera, the list of contacts, the flashlight, the accelerometer, the compass or others, and are installed via an app store (Google Play, Apple’s App Store, Microsoft store, etc.).

 

Mobile web apps. They are mobile-optimized websites that look and feel like native apps, still they are run by a web browser.

 

Hybrid apps. This type representatives provide the mix of native apps and web apps. Like native apps, they are installed through app stores and can take advantage of the numerous features available on device. As well as web apps, they rely on HTML being rendered in a web browser.

 

Toonie Alarm UI design

 

The type of the app under construction directly influences all creative stages from UX wireframing to final check of all the code. Different operational systems set their own guidelines and recommendations on design solutions and performance, development tools and restrictions.  Neglecting those limitations and rules can bring to fail of submitting the app to open use and turn all the creative process into wasted time and effort.

 

Plan the testing levels

 

Starting actual work over the app, creative and production team needs to consider a testing plan combining different testing levels. Testing is not the process taken as one single stage or action: it is spreaded via different stages. Schematically, this process can develop in vertical and horizontal directions. Vertical dimension is presented with testing levels and usually deals with going deeper to the code and functionality from separate units to whole app, its connection with the server if its needed, and its technical correspondence to the requirements. Horizontal dimension deals with different aspects of app performance and user experience.

 

Taking the testing levels to account, their basis is variety of tests grouped according to the stages when they are used in the development process, or by the level of specificity of the test. The main task of testing levels is to identify missing areas and prevent overlap and repetition between the development phases. Let’s briefly describe the various levels of testing.

 

Unit testing. This testing is commonly done by the developers to make sure that their code is working correctly: they test the sections of code like classes, functions, interfaces, etc.

 

Integration testing. Integration testing is done when particular units are integrated with each other, with the aim to test the behavior and functionality of each unit after integration. This testing level is usually carried out by a software testing engineer. There are a few types of integration testing such as big bang integration testing, top down and bottom up.

 

System testing. Here the name says everything: at this level all the components of the app are tested as a system in order to ensure that the product at the pre-launch stage meets the specified requirements. As the app is almost ready, it can be tested in the environments really close to the actual in which users will get their experience once it is deployed.

 

Acceptance testing. The main objective of this testing level is to evaluate whether the app system complies with the user requirements and whether everything is ready for release.

 

ios-developers-tubik-studio

 

Define the types of testing

 

All aspects of the app usage should be tested. Designers, developers and testers will need to check it across different devices as the points like screen resolution, processors, battery life and memory are different and can significantly affect on the efficiency and performance of the app, functionality, handling and loading time, as well as UX and UI solutions.

 

Among the variety of types, applied to test the mobile app at different stages of its creation, we should definitely mention the following list.

 

Usability testing. It is carried out from the early stages of app creation to verify if the app fulfills the established objectives and tasks getting a good response from users. The primary focus of this testing is on easy and quick use of an app, simple on-boarding and user’s satisfaction with the entire experience. For higher efficiency and productivity of general creative flow, this type of testing should start much earlier than any single line of code will be written, from the first schemes and transitions put into UX wireframes.

 

Installation testing. At the initial stage on installation, the app should add required software to the device automatically. And uninstalling, it should remove all the available content and databases from the device which are used by the app. So, this type of testing checks that the install/uninstall flow goes properly.

 

Functional testing. It is the most basic test for any app to ensure that it is working according to the defined requirements and there are no functions missed in the process of interaction. Functional testing mainly includes finding possible specific bugs of the device or navigation issues of the app. This type of testing should be done at the primary stages of development. In enables developers or testers to check and measure database or network queries with response times, crashes and memory issues.

 

Performance testing. Rather stressful part of any app testing is performance test revealing the omissions which left unnoticed during functional and user interface testing. This testing is required to be done on actual device only so it means the whole app is coded t this stage. This type covers client-side, server and network performance. For example, it checks the performance specifications and behavior of the app under certain conditions such as low battery, bad network coverage, low available memory and etc.

 

Interruption testing. An app may face various interruptions being in active mode, such as incoming calls or network coverage outage and recovery. This kind of testing shows what the app will do in this variety of cases. The common types of interruptions are:

 

  • Incoming and Outgoing calls, SMS or MMS and different notifications
  • Low memory warning
  • Cable insertion or removal
  • Network outage or recovery
  • Media Player on/off
  • The device power cycle, such as low battery notification.

 

Memory testing. This type checks that each app maintains optimized memory usage throughout surfing. As mobile devices have definite limits of available memory, this testing is crucial for the appropriate product functioning.

 

Security testing. It checks vulnerability of the app to hacking, authentication and authorization policies, data security, session management and other security standards. The fundamental objective of security testing is to ensure that the app data and networking security requirements are met according to standards.

 

Tubik Studio iOS development

 

Don’t forget to test design

 

One of the huge mistakes that could be done about testing it planning this part not earlier than the development stage starts. Obviously, the product getting live via code presents wider perspective of testing its actual functionality and performance. Still, we should remember that any digital product is not just code — it is the set on user interactions which should be thought-over and designed thoroughly with target audience in mind. Therefore, testing should take its first steps at the stage of wireframing to check if all the elements take their places, communicate to users, provide them with feedback from the system and what is more, achieve the goals and solve users’ pains.

 

Numerous prototyping tools enable to simplify and speed up the process of testing user interface so that developers obtained the verified version of design not taking major design alterations in the process of development. This is the efficient way to optimize the general creative flow and provide maximum efficient outcome at every stage. Prototyping gets testing sides, be it client, designer or even potential users, closer to real interaction with the concept of the future interface. Prototypes should not be seen as the analogue of the final product as they aren’t those. Their main aim is to check the correctness and appropriateness of the design solutions way before they will be transferred to developers.

 

The most effective point to involve prototyping for testing design is the step between UX wireframing and UI design.  The prototypes on UI stage can also be created for presentation of application general looks rather than for testing and improving its functional features. Still, it crucial that usability should be thoroughly checked first of all at the UX stage, otherwise it will be much harder to change inefficient solution after having accomplished a lot of work on UI and then development.

 

All the numerous aspects of design testing are definitely worth a separate article which will continue this topic in our blog very soon.

 

InVision for UI prototyping tubikstudio

 

Check the code thoroughly

 

When the design is transformed into code, the developers and testers need to make sure that all the quality and performance nuances are considered and included. Pointers in this area are testing on actual devices and simulators. Testing on devices is proceeded on the actual handset where app is installed, run and tested. Testing in simulator applies the software that can accurately imitate a mobile phone.

 

Simulator testing is useful at the primary stages of development as it allows quick and efficient checking the app, but it doesn’t fully measures performance and usability which should have their healthy doze of actual human testing. Still, automated testing got really popular now because it is effective, cheap and quite reliable. iOS Simulator as well as testing tools such as Appium, Frank, Calabash and others are available to support moving the app through the testing process and point out the issues requiring attention.

 

Continuous testing at all stages lays the strong foundation for keeping small bugs from becoming major issues later on. The final testing is conducted on actual devices so that crashes and hangings could be identified. Testing on device is obligatory for every app as it provides developers with actual data on the app behavior in different environments.

 

Test and measure after launch

 

Another mistake that should be avoided is stopping testing after the product is launched. Vise versa: testing will get even more diverse and comprehensive as it will inform the sides maintaining the app viability and efficiency about behavior, problems and preferences of real users. This information is the direct route to product improvements providing users the updates they really need and want.

 

testing digital product

 

Mobile technology is transforming the way of using devices. Smartphones and tablets of all kinds are rapidly becoming the valid method of interaction between consumers and businesses. People use mobile apps to connect socially, find information, order and track goods, book places and set appointments and do hundreds of other operations improving their lives regularly. It is important to build an app with all features and functionality that are required. Without effective testing plan, users are likely to come across unexpected bugs and errors. In the modern world with tough and growing competition in this field, the risk is high that they will quickly lose interest to the app while thoughtful testing and analysis is the solid way to avoid this risk.

 

Recommended reading

 

Diverse issues of applying testing at different stages of creating digital products have been an object of professionals’ attention lately. Here is the collection of recommended sources on further reading for those who would like to read more on the theme.

 

Testing Strategies and Tactics for Mobile Applications

 

Mobile: Native Apps, Web Apps, and Hybrid Apps

 

Beginner’s Guide to Mobile Application Testing

 

Mobile Testing: Complete Guide to Test your Mobile Apps

 

17 Strategies for End to End Mobile Testing on both iOS and Android

 

Levels Of Testing

 

Software Testing Levels

 


Welcome to read The Ultimate Guide to Creating a Mobile Application

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

Toonie Alarm UI design

Case Study: Toonie Alarm. App UI Design.

Designing a product for everyday use, it is vital to ground it on the thorough market research, thought-out design presentation and deep analysis of the target audience. No wonder: the stuff like note-apps, alarms, to-do lists, calculators, calendars and the like surround users in their everyday life, help in common situations and sometimes add color to the routine. We have checked that well and now would like to present you the first case telling the design story of the brand new alarm app for iOS called Toonie Alarm which today is featured on Product Hunt and has reached top-5 in the category Tech in 4 hours after featuring.

 

Toonie Alarm UI design

 

Task:

 

Full-cycle UI/UX design for the simple and engaging alarm app for iPhones.

 

Process:

 

The design process for this case was different from typical ones in the studio as before it we had worked more on outsource projects which means that creating initial product concept and setting the task was done mainly by the client’s side. The process for Toonie Alarm took the other direction and gave us what it was set for: the feeling of full product creation process from the very first steps. We had to set the idea and test it competitive potential, establish its USP and marketing plan, branding and usability foundation and all the other stuff like this.

 

Initially the idea behind the app was to create a simple alarm clock with attractive design and consistent element of motivation and support for such a basic and often far-from-pleasant process as waking up. The basic brand image was set as fun, cute, bright and cheerful, and marketing research supported this concept with the analysis of competition and ideas on adding original features to the app.

 

User research and analysis enabled the team to form the USP for the product on the basis of the following set of key features:

  • All the features of the app free for everyone
  • Simple, clear and intuitive navigation
  • Bright and pretty interface
  • Huge set of beautiful stickers
  • Achievements and rewards for waking up
  • Eye-pleasing interactive animation
  • Animated time picker
  • Instant sharing achievement with friends.

 

Let’s look over the details of UI created by Tubik designers.

 

Cute Mascot

 

In one of our previous articles we have already mentioned the great role of mascots in branding and UI design. As for Toonie Alarm, the idea of applying the mascot was set almost instantly as mascot is not only a sort of communicator between interface and user, but also a great representative of the brand able to enhance its recognizability. Moreover, it has a great impact on easy establishing the voice and tone of the product, creating the feeling of natural communication and supporting the mood. That was the point when Toonie was born to be a funny cheerful bird, whose mission is to make the world  brighter and help users to interact with the alarm. It informs users about news, rewards, errors and just adds some fun and color to everyday life.

 

Toonie Alarm mascot design

 

toonie alarm mascot design

 

App Tutorial

 

App tutorial is an important part of the interface which helps users to get informed on the basic interactions. In Toonie Alarm it consists of three screens that tell the user about the functionality of the app. Small concise copy blocks are supported by smooth and pleasant animation of transitions to create the feeling of integrity and cheerful mascot featured as the consistent element and the center of the screen graphic composition.

 

Toonie Alarm Tutorial design

 

Home Screen

 

The home screen shows the alarms which user already set for particular time and days and the tab with funny stickers already collected for waking up. Active alarms toggles feature the animated sun. Left swipe opens active options for the particular alarm.

 

Toonie Alarm UI design

 

Stickers Screen

 

Various stickers become the reward for waking up at the particular period. Moreover, waking up several times at this time, users can level up their stickers and enrich their collection. All the stickers can be shared to social networks to mark users’ achievements.

 

toonie alarm stickers

 

Toonie alarm stickers screen

 

Time Picker

 

Another prominent feature of the app is the animated time picker. The app has simple navigation and nice motion makes it even more intuitive. Picking time for the alarm, users can enjoy animated march of night and day.

 

Toonie Alarm time picker screen

 

Animated Stickers

 

Animated stickers make interaction even more lively and enjoyable and also enhance user experience making the interface attractive and playful.

 

toonie alarm stickers

 

Logo Style

 

Logo design keeps style of lettering associated with fun and entertainment and creating harmonic link to the fonts typical for cute cartoons.

 

Toonie Alarm logo

 

Product Video

 

To catch more details and see the interactions with the app in real, welcome to review the video guide on Toonie Alarm.

 

 

You can also review the presentation of Toonie Alarm design on Behance or check full pack of the details via Toonie Press Kit


Welcome to see full presentation on Product Hunt

Welcome to download Toonie Alarm via App Store

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

design4users blog by Tubik

Design4Users Blog. Official Release.

Here in Tubik Studio we have had the opportunity to create a considerable number of design stories, all so different and so unique. It gave us the chance 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 take the next step and launch our own digital products.

 

Today we are happy to announce the release of our first product called Design4Users. It is a content-driven professional platform fully created by the studio team from the ideation and concept phase, to creating branding, developing content strategy and communication model, designing logic and layout (UX), original interface and navigation (UI), providing full-cycle of front-end development and creating responsive webdesign, careful testing and thoughtful content writing.

 

D4U design4users blog

 

Welcome to get a bit more details about the project.

 

Mission and background

 

Design4Users is a blog devoted to diverse design issues solving users’ problems. It’s mission is establishing a solid highly informative platform for designers, customers, managers, product creators and marketologists focused on the aspects of user-friendly design trends, process, organization, collaboration, resources and tips.

 

One more objective of the blog is promoting and inspiring young designers and sharing expertise of well-known masters in the sphere.

 

Initially, the blog was created as small in-studio platform for sharing useful information on current projects as well as helpful resources, tools, design hacks, inspirational collections etc. Still, growing and active Tubik Blog readers community encouraged us to transform it in the open platform and share our knowledge, practical experience, tips on tools and sources, projects and concepts we find inspiring. And all of them have one thing in common: they are concentrated on design for problem solving, on helping users and making their life brighter, easier, more productive, more profitable and more beautiful.

 

design4users logo

 

Description and functionality

 

The website is organized around several basic categories reflecting different design directions.

 

design4users blog

 

Categories

 

Design: the broadest category focused on general design trends and strategies. It also features reviews for design books and tools, sets of quotes, historical retrospective on design trends, recommendations about useful resources and articles, stories about designers and projects, advice on organization and management of design processes and efficient collaboration with clients etc.

 

Branding: the category considering various issues of design for branding and marketing, creating identity, logo design, copywriting and brand naming, marketing research and content management tips.

 

UI/UX: the category focused on the comprehensive presentation of design processes via practical case studies and articles about design for digital products like websites and mobile applications. Covers all the variety of topics about user interfaces, user experience, user research, usability testing, interaction design, applying psychology and analytics in design process, organizing effective teamwork for complex design projects.

 

Product: the category offering articles and reviews on full cycle of product design, development and promotion, tips on creating user-friendly problem-solving products, cases of improving lifestyle, professional processes and achieving business goals for products by means of design.

 

Print: the category concentrated on all the variety of design directions and techniques for editorials and books, aspects of graphic design, illustration, typography and lettering, small print forms like postcards, invitations, posters etc.

 

wordpress theme design tubikstudio

 

All the categories can feature posts marked as original D4U sections.

 

  • D4U Inspiration: thematic collections of design works, quotes, videos
  • D4U Interview: interviews with people connected to design sphere, inspiring leaders, newcoming stars etc.
  • D4U Review: books and tools reviews
  • D4U Expertise: presentations of recognized experts in design sphere, their biographies, works, tips, videos and publications.
  • D4U Reading List: collections of recommended articles about from various resources published weekly
  • D4U History: posts about prominent cases and works in the sphere of design in historic retrospective.
  • D4U Case Study: practical case studies giving details on creative process for different design projects.

 

Design and Layout

 

Design of the website is accomplished with a view to effective presentation of both copy and visual materials that are provided in wide variety. Basic background of the web pages is dark, aiming at creating stylish harmony and balance for featured images in preview sections and contract with the light background for the article body supporting better usability and readability of copy blocks.

 

Home page features two blocks of articles: the most popular according to the total number of views and recent, showing the chronological feed of posting.

 

design4users Tubik Studio

 

The users are provided with the ability to switch to another category immediately from the top menu, footer menu and dynamic menu moving in the process of scrolling and making navigation easy. The articles are supported with tags and recommendations on further reading.

 

Subscription is fast and simple, enabling users to get the fresh updates immediately after publishing in their inboxes. Also, readers are able to share the content to the variety of social networks right from the article in split seconds.

 

Welcome to see more details about design for the website in extended Behance presentation

 

Creators

 

Design4Users is the content project fully created, designed and developed by Tubik Studio. Being a comprehensive team experienced in variety of design directions and knowing all the stones on the path, we have decided to set a platform uniting creators via knowledge, practice and inspiration for the sake of design for users.

 

Tubik Studio design team

 

Supplements

 

For those who are interested to get more about the website structure and content in more interactive way, welcome to watch Design4USers Video Tour.

 

 

If you wish to see details and contact information about Design4Users, welcome to check out the Press Kit.

In the next post, we will provide the case study on design process for the website. Stay tuned and join us via Design4Users!


Welcome to see designs by Tubik Studio on Dribbble and Behance

Welcome to Design4Users

Welcome to connect with Design4Users on Facebook and Twitter