Digital designers often face the challenge of finding new ideas, especially when it comes to UI tasks. It seems that to make a project interesting, you need a lot of inspiration, talent, and luck… and good weather outside the window 😁. But in fact, there is a certain instruction, an action plan, following which you can create something original and solving problems.
Today, based on the design of our corporate website, our Netrix team would like to tell you how non-standard tasks were born and implemented in our team. You can see the result at this link — netrixdigital.com. Well… Let’s go!
The whole process can be divided into stages:
We are a digital design agency and our company already had a corporate website and it was not bad. But we were growing up and we wanted to emphasize our experience, approach, to show what we can do and what makes us a good partner. We needed a new website that would reveal our work and processes and increase the number of clients.
Let’s start with our goals:
Business goals:
- Increase the number of quality leads from the website by 30% or more;
- Create a portfolio that shows our capabilities in the best way and can be easily shared;
- Show our level of expertise and our process (this is one of the most common questions during the first meeting with potential clients).
Design goals:
- Show what makes us different from competitors. Be different from the regular agency website;
- To be memorable;
- Deliver our main message through design;
- Have good performance and usability on all devices;
- Win SOTD on Awwwards.
These are just the main goals. The more you write them down, the more effectively you will get the result and facilitate the process.
The next thing was to decide on the main message. We already had our slogan — “We create products — not just art”. Also, we were looking for some new options. We wanted it to sound more professional. But during testing on UsabilityHub (we used 5 second test to figure out how clear our message is for users), and also after talking with our existing and potential clients we realized that the slogan perfectly reflects our company. We just changed CREATE to DESIGN. The word “design” allows users to quickly read our line of business. Testing is a great way to remove doubts about controversial points.
Finding the main message
When you create a slogan, try to answer the key questions — Who are you(your product)? Why are you better than others? The answers to these questions will especially help you when working on the UI part.
So…
We defined goals.
Analysed existing website.
Prioretzed tasks.
Finalized the key message.
The Mood board — ideas
“If you don’t know how to start, start with a mood board. Don’t know what to do next — brainstorm.“
It’s easier to start with competitor analysis. Always look at what others have. Thanks to Awwwards, Dribbble, Pinterest it is easy to find a selection of good websites. But don`t restrict yourself to only looking at other websites. We were inspired by posters, publishing products, photographs, illustrations, and even paper notes. We created a separate file for brainstorming, uploading different images, photos, screenshots, and writing ideas.
As you sketch out ideas, gradually you will notice that some of them are similar. Try to unite them into groups. This will give you a certain number of themes for your interface. There can be 3–5 main ideas.
We decided to brainstorm with our team where everyone wrote down their ideas about how we can show who we are in the best way. After that, we combined similar ones having around 12 different groups.
How do you know which idea is the one?
Brainstorm share your ideas with your team, potential users, clients, or even friends. See how they will react to this or that idea. After the presentation to the team, we made a poll and thus identified 3 further directions for ourselves.
“The style of your UI should emphasise the main idea, help the user to intuitively read your message.”
Key points we wanted to show on the website:
- We design digital products;
- Collaboration is an important part of our work;
- We think over our projects efficiently;
- We believe that there is a lot of work behind a quality product.
Where does design begin? From the definition of goals, research, and generation of ideas. For this, you do not need Figma or Sketch. You just need a piece of paper and a pen. The foundation of a good product is good UX. And wireframes help to work it out well. And one more thing is, what customers/clients notice first? It is our works. So after the brainstorm, we settled on 3 ideas:
Wireframe style — the finished design hides a well-developed idea;
Paper — it all starts with a blank piece of paper, notes, ideas;
Portfolio (Album of works)— to make the main focus on our works.
- Wireframe style
- Paper
- Album of works
You can always mix your ideas. And that was the very thing we did. We blended the 3 ideas we mentioned above into one idea. Read below, to find out which ideas exactly we took.
It all starts with a blank sheet of paper. Then you proceed to some quick sketches and notes. These physical elements we brought to our website. Our website is like a working design notebook with notes, ideas, sketches. To emphasize it we added hand-written underlines, elements with crumpled paper texture, realistic shadows, and animations.
Then there came one of the most difficult questions: Which banner would best highlight our main message? We thought about saving pyramid from the previous version of our website, to represent how we build solutions. Then we thought about showing wireframes in the hole to highlight that there is always a huge amount of work under cover of each beautiful project.
But all of this didn’t present us as we wanted. Still, we were thinking about the perfect way of presenting our work. And then the lightning struck — bingo! Nothing can tell about us and the level of our expertise better than the projects we’ve done. They are the most important part which is there not for the sake of appearance. Thus, what you see on the banner is the torn up cover, whose message is to uncover and reveal our projects speaking its word about us.
Our works is our best presentation
Details are the key. Details it is what makes the project interesting and makes users spend more time interacting with the website.
Paper texture
We tried to create as many elements as possible by hand. We photographed, edited, and used a crumpled sheet of paper as the main background. Arrows, icons, and illustrations were also hand-drawn. Hand-drawn style is a great way when you can’t draw 😆😉. Less straight lines make the cutest illustrations. Don’t you agree?
Hand-drawn elements
Hand-drawn social networks
Hand-drawn illustrations
Each member of our team has their own totem emoji. We put them on the project card, showing which team members were working on the project 😊. Small details make a lot of sense.
Snake, Panda, Cat — perfect collaboration
Piece by piece, you create your concept like a puzzle.
And there were quite a few unusual tasks we faced:
- how to flip the cover on the home page;
- how to make the movements of tape and paper realistic, when moving the page;
- how to make a transparent hole on the main screen that will look transparent while moving.
Flip the cover on the Home page
We wanted the effect of shadows and the paper moving while scrolling and flipping the cover, to be realistic. Therefore, we took real adhesive tape and paper and recorded the shadows moving, and the adhesive tape breaking.
Testing the adhesive tape and shadows in movement
For the most realistic effect during scrolling it was important to create 3 different states of the adhesive tape: when you scroll to the left, to the right, and for the static position. What we did, was created 3 different images of the adhesive tape in different positions, and then recreated it for the website.
Adhesive tape moving in steps
How the cards look while moving
We will tell you more about how we made animations for the project in our next article.
A corporate website is not just a collection of images, it is all about content -this is what the user is looking for. Present yourself (your company or product), tell about your philosophy, the way you work, what makes you special. Describe the services you provide and your areas of expertise.
Speaking about design agency, nothing describes you better than your works. We tried to describe each of our projects, the challenges we faced, the goals we achieved, the process we did, how we came through and came up with the solution, and which results were received. When working on your portfolio, it`s worth spending some time giving the context about it. Without the context and goals, all there is, in the end, is just some pretty (or not so pretty 😁) picture.
Contact form helps us receive 55% more requests
We also revamped our old contact form, made it more detailed in order to receive additional information about each request, and be of better help for users from the very beginning. You may think the more fields you have — the less request you will receive. But this is not true. Our new contact form helps us receive 55% more requests than the old one where all we had were just 2 fields.
When working on a corporate website, pay attention to the photo content. We believe that everything is about people. And Netrix is people working to solve design problems and simplify our clients` life every day 😉 This is why we made a team photoshoot and captured the working process as well, so that our clients as well as future employees, could get to know us. It is important to present your company because most of the clients interested in collaboration open the About Us page first.
The About us page is a great way to tell you about your company
What is necessary for excellent implementation is to have close communication with the motion designer and the developer. This should be done especially when the design is combined with unusual design decisions. Try to generate more than one idea because some of them may not survive due to the impossibility (nothing is impossible but it may take too much time and not be worth the effort) of implementation.
To simplify the development process we originally did the flip animation in After Effects. And the implementation was done using a combination of Lottie and code. All the illustrations and hovers were created using Lottie, as well.
It took a lot of time to optimize the animation. Our priority was to have a website that is loading fast. Remember, no matter how beautiful animations you use, if your site takes too long to load and everything slows down, then more users will leave it.
Please, don’t forget to pay attention to other pages and elements, and make them interesting, such as an Error page, a Thank you message, a Favicon, a Cover image for the sharing link. Design is in the details.
Don’t forget about 404 page
What did we get in the end? Are we satisfied with the result? Have we achieved the main goals? We would say, yes! We increased the number of leads (good leads) from our website. We won the Awwwards Site of the Day, Developer Award, Mobile of the Week Award, Mobile Excellence. More than that it helps to attract new employees. We learned that it was important for them to have a cool corporate website for the company in which they would like to work.
So… you are thinking about updating your current website. Here is a list of hints that may help you:
- The first and the most important one: answer the question: Why do you want to do a redesign?
- Set up goals. (Goals should be achievable, countable, and have a deadline).
- Make a list of what you don’t like about the existing website.
- Be sure that you know your users.
- Define the main message, idea, what you want to say.
- Create the structure of the website and pages.
- Find references, analyze competitors.
- Brainstorm with team, clients, or friends to generate and choose top ideas.
- Test your ideas on the target audience.
- Pay attention to the content. This is the most important part of the website.
- Communicate closely with the development team.
- Launch.
- Analyze.
- Make improvements.
- Analize.
- Never stop 😉
Created with love by , , and Netrix team ❤️
We are on Dribbble, Behance, and Youtube.
[
若有收获，就点个赞吧
0 人点赞
