Web design and the challenges designers face on their thorny path

13 oct 2017

written by: theodor spadeson
design

We are passionate about design because we have an empyrean love to it. We are wholeheartedly glad to start a new project (which means new instruments, new concepts,- a grasp of fresh air), and to share the results of a meticulous work with the whole world. Web designing is an interesting, fascinating, and a complex task to handle. It requires creativity, authenticity, and powerful brainstorming in order to have a superb result.

In a case when you do not complain about the lack of creativity or a weak imagination, it does not mean that you won’t face challenges on the designer’s path. Sometimes, it happens, that the tiniest rub makes the sky fall.

If you are a “hoar-headed” warrior, and you have a backpack full of experience, then those problems will turn into a regular busy work. Definitely, the experience comes from mistakes and problems. Our article does not claim to be considered as a magic pill, but we would like to share some knowledge, that we have in order to help you save nerves and time.

Let us start from the thorny path of a designer.

Years ago, when there were just a few instruments helping designers to develop and mock up the structure and templates, the designers struggled to fit the fixture of the website or a mobile app. The common problem of all of the designers was the mismatching of the sizes, proportions, spacing and other usability issues.

InVision

By dint of creating a conversational mockup of your project, you are able to identify any defects before investing a good deal of time and money into development. Every designer has a bunch of needs for their mockups in order to create the highly interactive concepts. Nowadays, there is no need to struggle and reinvent the wheel. The design world offers a load of different convenient and flexible tools helping to create a special solution for your web or mobile project.

Let us consider some of those prototyping instruments, which help designers in their job. The first one is InVision, which is highly appreciated by our designers Veronika and Alexander.

InVision is a web-based prototyping instrument helping designers in crafting the mockups. This current instrument allows designers to upload the static pages into it and add the hotspots for further transformation into the conversational mockups. InVision is a convenient tool able to synchronize with Adobe PS of Sketch docs, hence allowing to improve your prototypes in real time.

In addition, the InVision developers constantly reinforce the feature base of the tool with different supporting add-ons like Craft, the collection of plugins for Adobe PS and Sketch, which allows populating your design with real data.

Craft

You can always check the novelties and changes in the dedicated section of the InVision website.

The greatest benefit of the InVision tool is in its ability to contribute the real-time collaboration between the development team and clients. Anyone, to whom the mockup is shared, can add comment threads in order to offer the custom ideas.

Next up, Marvel. It is a browser-based prototyping tool, which grants strong performance while significantly simplifying the prototyping process. The Marvel platform supports image types including GIF, JPG, PSD as well as the uploading via Sketch, Dropbox, and Google Drive.

Marvel’s benefits are the simplicity of learning and usage, a bunch of FAQ’s, video tutorials, and regular update packs.

Marvel

Moreover, the mobile companion app, which allows designers to turn paper sketches into prototypes by dint of taking a photo turns into a real godsend for designers, who are used to create a project on paper.

At the end of the day, Marvel allows you to create the fully optimized mockups for the peculiar goals and platforms of your project.

Justinmind. It is a unique tool, which offers the functional base to create either web or mobile wireframes within the platform itself. Justinmind’s bunch of features and instruments offer an availability to create complex solutions before you can say Jack Robinson.

By owning the Justinmind, the designer has a backup force at his disposal. Justinmind allows adding mobile gestures, web interactions from the dedicated library of widgets. In the case when you are not satisfied with the diversity of pre-existing widgets, you can download other packs including the widgets you need to stack your library. Our designers love Justinmind because it is an all-in-one prototyping tool with a load of bells and whistles.

Marvel

To conclude the division of tools, it would be correct to say, that there are a lot of instruments, that help in modeling, prototyping, and illustrating. Each and every designer selects the best suitable one to fulfill the demands and requirements. The choice is up to you

Designer’s approach to the project is an individual question. It often happens, that the designer does his job fantastically fast and quality, and passes the baton to the inexperienced front-end developer. In such an occasion all the labor made by shaky hands of a sleepy designer is screwed. This is where the nightmare begins. Since you see the result of your sleepless nights being canted and deformed, you might feel exhaustively frustrated.

Designer’s approach

It is not enough to just mock up and test the project with all its sizing, typography, spacing, colors etc. Knowing how to code your design will help to avoid such problems. At least, it would be extremely right and far-sighted to provide a style guide documentation to the developer.

Continuing about the necessity of knowing the code. It is a must for web designers to know the CSS and HTML technologies.

Designer codes

Good designers are aware of coding. Seriously. The knowledge of the code essence will make you a better designer, knowing the fundamentals of website’s workflow. Hence, you will be able to craft the unique and efficient solutions.

If you are a well-versed designer, knowing the code, hardly you will face serious issues while transforming your design into the end product.

A proper style guide attached to your mockups will be a savior either for you or a developer. It will be very convenient to identify all the basic elements of the design (like the typo, paragraphs, lists, quotes, etc.) and translate them into CSS.

Oh-kay, we are moving forward. The next problem, that designers face time and again, is the design revisions.

Since you have created the first mockups, and, being satisfied with the results, you send it to your client, in most cases, the real pain in the neck begins. Remember, the client without a BUT is not a client. Even if the client loves the typo, layout, navigation, microinteractions, there will always be a BUT.

  • ... BUT the dark gray color is not dark enough;
  • ... BUT my brand logo is small;
  • ... BUT the bold typo looks odd, let us do it less bold.

Those BUTs usually lead to the never-ending revisions. Moreover, the more you change the initial concept, the more the client wants to change. Many occasions show, that clients can even get frustrated and distrustful while making the constant changes.

Essentially, you are a designer, and it is your job to satisfy the client’s needs and wishes. So, do not blame your client for being a bit selfish. The way to solve such issues lies in the work approach. Our designer Veronika suggests explaining all the design decisions you have made to your client.

It is very important to explain every single detail and why did you handle it that way. This will change the client’s attitude to your work completely. If you show, that your design is beneficial to their business, they will cut off the unnecessary revisions because of the logo size and not-enough-dark color.

It frequently happens, that the designer has to work without a proper information about the project and its goals. The reason for such occasions is that the clients have no idea what they want, and, of course, have no content for the resource, but desire the designer to create the website. They hire designers and promise the jam tomorrow. While they try to find out what content is needed, the hired designers are uptight.

Oftentimes, the clients cannot figure the content out. To avoid such situations, our designer Alexander suggests adding the research feature to your process (not free, of course).

Such an option will help to kill two birds with one stone. On the one side, you will get a possibility to earn extra money, on the other side, you will help your client to define the content and proceed to business.

It will come in very handy to research, explore the issues, set the goals and help with the content strategy. A solid project research illustrated with some sketches, wireframes, etc. will visualize the benefits for the client. Implementation of such approach creates a win-win business. Moreover, in the perspective, the clients will tend to hire you again, because they will be positive about your skills and efficiency.

It is important to remember, that the designer’s job begins before the PS. As an honorable mention, it would be useful to admit the necessity of the gadgets and supporting utensils for designers.

We won't talk about the ergonomic worktop because it is a matter of taste and preference. But, it would be very convenient to have a comfortable chair and a variable desk (some designers practice the Silicon-Valley-like treadmill desks. Seriously!).

The most important things, that the designer needs for sure are:

  • A decent computer;
  • A tablet, or an interactive pen display;
  • The latest smartphone.

A productive and powerful computer is a must. Your digital "partner" has to work as fast as your brain does, so consider purchasing a good computer. Macs have traditionally been the #1 choice of designers thanks to the features they offer. The overfilled market today offers lots of choices in different price segments. Choose wisely.

Interactive pen display

An interactive pen display or a tablet is extremely helpful in creating the illustrations. It is not natural to draw the pictures with the help of a mouse, is it? Recall your drawing classes at school. An interactive display is a real helper in your design job. It will serve as a digital sketchbook for you.

Though the latest smartphone is not the must have for a routine design work, it becomes a helpful assistant when negotiating with clients. With the help of a smartphone, you will have an ability to test your design on the platform, run the cut-down versions of Adobe Photoshop, or Lightroom, view soft proofs and images, and to perform other actions.

To admit, an every designer must have a supportive hardware like a reliable SSD and a calibrated monitor. All these utensils will be very helpful in creating a stunning and eye-candy design with a deep and saturated palette, expressive typo, and delightful adornments.

Final words.

In conclusion of our article, we would like to sum up the information above. A wise designer chooses the path of the least resistance. This path saves nerves and helps to earn extra money. Keep in touch with your clients, develop your skills, enhance your approach.

Though the described challenges are quite common, and you, as a designer may face more issues from the most unexpected sources, it is a matter of a workflow. We hope, that our article helps designers to be a bit wiser and aware of possible problems.