SwapSteem Homepage UI Design Concept
Repository
https://github.com/nirvanaitsolutions/swapsteem-ui
https://github.com/nirvanaitsolutions/swapsteem-api
Linked Task Request
This piece of work is in relation to the following task request:
Details
Within the task request provided by the project owner asked contributors to create both a logged in and a logged out view for the SwapSteem site. Within this piece of I was able to create multiple pages for the SwapSteem project, this included the following:
- Home Page (Logged out)
- Home Page (Logged In)
- Login Modal
- Search Results View from Home Page Search
All of this was brought together in the following prototype:
https://xd.adobe.com/view/f03808dd-cfbe-4695-4794-2822fe4f82ed-8609/
The following video shows an brief overview of the experience provided within this work:
The following information provides additional information on each of these pages.
Home Page (Logged out)
Aim
The aim of this page was to provide a UI which was able to both provide a user with the necessary information to understand the purpose of the site upon landing. It features a banner which gives an indication of how to sign up with a brief description and overview of both the buying and selling top offers and the ability to search the offers.
Page Design
The following mock shows the page mentioned in this section:
Image A - Full Window View
Image B - Full Design
Note: Apologies for the low-resolution image, I cannot export it at a higher resolution from Adobe XD, for the best viewing experience I would recommend visiting the link for the design at the following location:
https://xd.adobe.com/view/f03808dd-cfbe-4695-4794-2822fe4f82ed-8609/?fullscreen
Design Spec Link
The following link can be used to view the design specification generated by Adobe XD in relation to the mentioned page:
Home Page (Logged In)
Aim
Although this page is similar to the logged out view in the way it features an overview of the buying and selling orders as well as the ability to search, it removes the sign-up banner upon login as well as providing the user with additional navigation options to the right of the top navigation bar. This includes navigation icons for wallet, dashboard, user profile and chat.
Page Design
The following mock shows the page mentioned in this section:
Image A - Full Window
Image B - Full Design
Note: Apologies for the low-resolution image, I cannot export it at a higher resolution from Adobe XD, for the best viewing experience I would recommend visiting the link for the design at the following location:
Design Spec Link
The following link can be used to view the design specification generated by Adobe XD in relation to the mentioned page:
Login Modal
Aim
In order to link the logged in and logged out experience together I created a simple modal which would allow the user to login to the SteemSwap, this modal features a SteemSwap logo, a brief description to help guide the user surrounding why they may wish to log in and a button which clearly shows login via SteemConnect (An important addition in what I believe builds trust with an application in the Steem community). This accompanied with a button which provides unregistered users a quick button to their path to sign up.
Page Design
The following mock shows the page mentioned in this section:
Image A - Full Window View
Note: Apologies for the low-resolution image, I cannot export it at a higher resolution from Adobe XD, for the best viewing experience I would recommend visiting the link for the design at the following location:
Design Spec Link
The following link can be used to view the design specification generated by Adobe XD in relation to the mentioned page:
Search Results View from Home Page Search
Aim
As shown in the previous mocks a user has the ability to search directly from the home page, upon search a user would be able to view all of the offers which match their criteria. This aim of this page was to provide an insight into the page following search, the search results would be shown in a similar format as shown in the home page offer previews, however, more results would be available to the user and the results would use pagination in order to sort the results for the user.
Page Design
Image A - Full Window
Image B - Full Design
Note: Apologies for the low-resolution image, I cannot export it at a higher resolution from Adobe XD, for the best viewing experience I would recommend visiting the link for the design at the following location:
Design Spec Link
The following link can be used to view the design specification generated by Adobe XD in relation to the mentioned page:
Design Elements
The following section helps provide additional insight into the some of the styling used. The software which I used to develop this experience provides the ability to create design specifications within the experience and the link can be found here:
https://xd.adobe.com/spec/8d692cde-ef3d-49b0-4b4e-2aec59b6b447-fb58/
Within this section I will not go into specifics about sizings of elements or an overview of every element as I would recommend that the design specification provided above is used as it provides a much more detailed insight that I could possibly make within this post, however, I will touch upon important areas of interest along with an overview of the main fonts, colours, etc.
Note: Apologies that this loads slowly in some cases, the problem here is that the repeat grid which I used for the backgrounds in the header and footer and quite labor-some on performance.
Font Family
The font-family used in this design is Helvetica Neue.
I chose this font because it's free and I believe is clean and easy to read, instead of using multiple different fonts within my design I decided to only use one font and instead change the font-weight in order emphasize certain areas of interest to the user. I used a combination of light, regular, bold and medium within this design.
Note: The project owner indicated that I could choose the font because they haven't set a font within their branding as of yet.
Background for top nav, banner and footer
Both the top bar, sign up banner and footer have a background texture, these can be seen here:
The following source code will allow these to be created:
Dark Blue Background:
Background Colour: #2C2F95
Foreground Colour: #0A0A26
Foreground Opacity: 0.4
background-color: #2c2f95;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%230a0a26' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
Light Blue:
Background Colour: #00A3EA
Foreground Colour: #2C2F95
Foreground Opacity: 0.4
background-color: #00a3ea;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%232c2f95' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E")"
Colours used
The following colours were used within this design:
The design specification provided above will provide more insight into the specific area ins which these colours are used.
Icons
The icons used in this design can be found here: https://material.io/tools/icons/ and are free to use for everyone.
The following icons were used in this design:
- Dashboard
https://material.io/tools/icons/?search=das&icon=dashboard&style=baseline - Account Balance Wallet
https://material.io/tools/icons/?search=wallet&icon=account_balance_wallet&style=baseline - Chat
https://material.io/tools/icons/?search=chat&icon=chat&style=baseline - Account Circle
https://material.io/tools/icons/?search=account&icon=account_circle&style=baseline
Benefits / Improvements
As this particular task was to create the initial UI design for the project the main benefit that this particular piece of work brings is that it's a starting point for the development of the project and will help to create a consistent guideline for future works. The UI provided reuses a lot of the same components so it should allow for rapid development without the need for custom CSS on every page. The UI takes inspiration from localbitcoin as requested within the task request but still applies the branding on SteemSwap in a way which makes it both unique and eye-catching.
Overall the UX provided is simple and should be easy to understand for a user, this should assist in both onboarding and continued use of the application.
Proof of authorship
During the design process, I had the opportunity to work with the project owner to iterate my designs in order to provide additional benefit to the project. Although much of the styling is similar throughout the following shows an insight into the changes made.
1.0.1 Initial Design
Within my initial design, I created something slightly different to the specification provided by the project owner, within this concept the search offers container was placed inline within buying and selling results containers, this was to allow you to access the search options wherever you were on the page. The thought was that the containers for the buying and selling overview would scroll and the search container would remain fixed.
Although the project owner liked the design, they stated that would prefer the search container to be above the buy and sell containers similar to the site mentioned as inspiration. This can be reflected in version 1.0.2.
The following image shows the outcome of this version:
1.0.2 Iteration 1
As mentioned previously, within the initial design I went slightly away from the initial specification, and on the request of the project owner, I adjusted so that the search box was above the buy and sell containers.
The following image shows the outcome of this iteration:
1.0.3 Iteration 2
Based on the changes I received for iteration, there were minor copy changes and adjustments to add in an additional select field within the search container. However, upon completion of this iteration, the project owner was happy for me to work on the final version and I was able to use the design I created as a basis of the other pages I created.
1.0.4 Final Version & Clean up
As the first mock was approved, I was able to take the elements created and move them into the final design, within the final design I cleaned up the design and added additional styling where needed. You can see this through the design in terms of the UI elements such as nav links, buttons, copy, etc. I also created the overall experience so that I could show this as a prototype.
The following image shows all the different art-boards in a single view:
Tools
The following tools were used in the development of this UI.
Each of the art-boards within the XD file has grouped components which should be easy to reuse should the project owner or another contributor wish to repurpose any of the elements.
Original files
The following link can be used to access the original files used within this particular piece of work:
- SwapSteem.xd - Click here to view
- The full-page mockups for each iteration - Click here to view
Proof of Work Done
A link to my GitHub account can be found here: https://github.com/tobias-g1
——
This work is licensed under Creative Commons Attribution 4.0 International License
Thank you for your contribution. Its of very high quality. We like to see there are web designer.
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Pretty clean design. Good work!
All the new features are innovative
Hey @tobias-g
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!