There is user feedback that the homepage of the official website is bare , everyone Busy making products , Ignoring the construction of the official website , To be ashamed of .
exactly , Minimalist style and Extremely simple There's a big difference .
old Web End
Besides being extremely simple , It also has a small problem , The home page is not adapted to the mobile terminal .
Old mobile terminal
Next, I will share how to design our new official website from the following three points ：
- Show content
- The page layout
- Fit mobile end - Responsive layout
Show content
When I design, I will consider from two perspectives ：
- What netizens hope to see on the official website ？
- The authorities hope that the netizens will do something after reading ？
For all of you , Of course, the meaning of the official website is to quickly understand what the product does , What problem to solve , What can you get from using your product .
Eoapi Our users are individual developers / R & D team , Personal developers are most concerned about ease of use , In addition to ease of use, the team , We also pay attention to whether the product is stable 、 Input cost and estimated income .
I hope netizens ：
- After reading the official website, you can download the application （ Super ideal ）
- Can pass Live Demo Quickly experience product features （ A little reliable ）
- Even if not our target users , We can also remember the characteristics of our products , You can remember it when you need it later .（ Humble ）
Requirement analysis completed , The rest is content preparation and typesetting design ～
The page layout
VSCode
First, use keywords to show the product features ： intelligence 、 Operation and commissioning 、 built-in Git、 Plug in support .
Then, through the user's real description, we can get closer to your relationship in front of the computer screen , Just like the user's praise of the product , Sometimes shopping may not even read the product introduction , I will drag it directly to the comments area to see the comments , Because the user description is more realistic 、 More believable .
Web End
Mobile
Eolink
Eolink It is our SaaS product , The target user is the R & D team , Value stability 、 Comprehensive functions 、 Improve collaboration efficiency .
So the home page shows ：
- We got financing （ Stable 、 Product value is recognized ）
- Version update （ Continuous updating ）
- Related product recommendation
- Function is introduced
- Enterprise user endorsement
Web End
Mobile
Postman
The page is refreshing , At first glance I thought it was an input field , Take a closer look at the registration box , Dare to guess because “ The granddaddy ” Previous users were mostly individual developers （ The main use of API Debugging function ）, It can be seen from the official website that he strongly recommends that users register not to go whoring for nothing .
Web End
Layout
There is a big iteration this week —— The remote data source is coming online , We don't have UI The designer , So typesetting borrow （ copy ） Jian （ Attack ） We are SaaS The product's official website .
Fit mobile end
This needs to be considered well in design , Our official website uses vite frame , In addition to self written components , other ,
Source code here ：https://github.com/eolinker/eoapi-remote-server
If you are interested in the selection of the official website framework , Please leave a message and communicate with us ～ Subsequent articles will be published to share the experience of model selection .
The end result
new Web End
Information
- Make the official website with experience design thinking -- B End product official website design practice - Nuggets
- Design thinking : How to do a good job of official website design ? | Everyone is a product manager
About us
Eoapi It's a class Postman The open source API Tools , It's lighter , At the same time, it can be expanded .
If you have any comments or feedback on our open source project , Please send me a private message , I'll listen carefully ~
Github: https://github.com/eolinker/eoapi
