May 5th – 2019
Continuing my freelance work from the previous post, which can be seen here: https://ameeralashhab.nuacomputerscience.co.uk/2019/02/14/freelance-work/
I have done and delivered a lot of work this year so far, and here are the latest updates and continuation of my previous post. There are about 2 to 4 projects to discuss and talk about, which will be mentioned in this post.
Stardust – https://www.stardust.gg/
As a UI Designer, I have done and continued to do some work for Stardust. The work is all illustration and 3d oriented, including a few web-pages. Here are the following outcomes and the work I have delivered:
This is a set of icons/illustrations that I have done and are now live on the website of Stardust. They needed artwork that represents the content and makes the website overall look better.
- Increased revenue: Making the icon have the money within it and arrows is a representation of increased revenue and sales. I have also used a 3D approach to make the design more modern and aesthetic throughout the remaining of the other icons as well.
- Seamless Integration: This icon represents the fact that the Stardust Platform easily integrates directly into your game across all platforms and programming languages. To do this, I have used clogs to represent technology and a platform.
- A better game experience: A game controller has been used to reflect users and players, this icon represents the following content: Give players the ability to use the Stardust Game Explorer to independently verify and discover item information.
See these three icons in action here: https://www.stardust.gg/
This is the Stardust API icon. My thought process was simply to define API, which is an application programming interface. So based on the definition, I’ve come up with a computer containing a UI of a program, and then another sort of computer looking design to connect them 2 together. This is because the API communicates with another program or computer.
Marketplace icon, this represents the trading and market platform of stardust. A trolley containing a toy train has been designed by myself to convey the idea of shopping/buying/trading etc…they are simple concepts, but are also visually appealing and deliver the purpose of the content or at least show the purpose of the content that these illustrations have been assigned to.
These illustrations are live here: https://www.stardust.gg/product
Adobe illustrator is all I needed to execute and design the above illustrations. Illustrator is very powerful software, and you able to achieve many different styles of art. You can even make 3D illustrations using the tools provided. Within the software, there are 3D options that turn a 2D shape into 3D. You can then modify the shape accordingly to your needs. The client was impressed and happy with the work I have done, and you can know this by seeing the work being used on the website.
Stardust – 3D design
The Founder has also contacted me to design an illustration that can be placed in the websites hero/header. So I suggested a 3D approach to make themselves more unique than other websites where honestly 95% of these websites have 2D art as their hero images. With a 3D piece of art, Stardust would be more identifiable and unique in the market. Upon discussing this, I have convinced and persuaded the Founder to go with a 3D approach and that he should trust my skills and capabilities to deliver a conveying piece of art.
The art style was isometric, and the reason for that is because it’s a great style and is very visually appealing. There is no psychological approach or an impact on viewers. It’s just an art style with so much potential, this is because the results you can produce are excellent and outstanding. Here is the work I have done:
A different angle of the isometric design
Software used & Outcome
The outcome can be seen live here: https://www.stardust.gg/
Cinema4D is a very powerful 3D rendering software, and I am sure all designers have heard or come across this software once in their careers or life. It’s amazing and I managed to learn the fundamentals and principles within just a few days before being offered the opportunity to design the render above.
The job took me about 11 hours of work, while the icons took about 4 hours of work. This opportunity has boosted my 3D rendering skills and capabilities and I felt happy and content with the outcome that I have produced. What I have learned with Cinema4D is how to modify and create shapes. I have learned about generating light on renders, along with shadows. This includes a few other things that are crucial to producing high quality renders.
- Time management, I wouldn’t say this was exactly a challenge, however, it was something that I needed to consider. At the time of doing this work, I had university work to maintain as well. This was the Broads Project. The way I tackled time, was to simply work the moment I got back from university, that’s all it was, nothing else. Everything else and it’s pieces fell together from there on.
- Creativity, my creativity was challenged particularly for the 3D render, this is because I am not highly experienced with renders and it was the first time that I actually made something that is being used. I had to learn a few principles faster than normal, to make sure I can generate the required result in a short time.
- There were no limitations what’s so ever, the creativity and the direction of this work were all up to me. The only guideline was to make sure the colors of the work matches the website. The rest was all up to me.
This ends this project, and it was a pleasure to work for Stardust. I still work for them whenever they need me to do a design or a job for them. I get paid fairly and I am treated with full respect. I have also developed a sustainable relationship with the CEO and a few of the current full-time employees. I look forward to doing more for them, and who knows, I may work for Stardust full-time in the USA in the near future.
Stardusts Market Platform
I have been asked by the CEO to design their search page, along with a page for game results, transaction result, item results, and finally the user address results. This work was quite a reasonable load, and it was a project that allowed me to express myself as a designer and provide Stardust with a sense of futurism, to distinguish themselves from their competitors and make them unique.
These are the 5 pages that I have designed, and I had roughly 1-2 weeks to design all these pages. I’m going to have to say that it actually did not take me more than a week to design these pages. This is because they are simple and are very visually appealing. I had to make sure they match the colors of the brand, which is blue at the moment. But other than that, I had a lot of creative freedom and it was up to me, as the designer, to decide what should happen and the outcome.
The image of each page can be seen here: https://imgur.com/a/pv4ddz2
My thoughts and my approach
I have seen many different websites and platforms with the same design, same design language. I was frustrated by seeing the same things over, and over again. Surely it is possible to break the rules and allow users to adapt to new different designs and different experiences. Why is it people don’t take risks? where is the creative risk? if you don’t take risks to be any different, then you will be seen the same as the many other companies! so I decided to go with something different, and I allowed myself to creatively visualize how statistics and different number based data can be presented, and the outcome from my thoughts is above.
I received positive feedback from this design, and the founder wanted to send the design to his developers so they can start writing the required code for these designs. The platform is currently in development.
Current link of the outcome produced so far can be seen here: https://www.aashhab.design/esx/
Image of the outcome: the homepage of ESX
ESX: is the World’s First Fantasy Esports Stock Exchange
I’ve been approached by two partners to design their upcoming platform of a stock exchange for esports. Players can trade fantasy stocks of their favorite teams with other players in their global marketplace and compete to win various prizes. Players will manage their own portfolio of teams with the end goal of earning the most money in different time periods ranging from per week to per year, top-earning players will be rewarded with prizes from their partners for their accomplishments.
- Design and develop the Frontend of the homepage, dashboard, about, news, leaderboards, market, and a few other pages.
- The design needs to be trendy and modern.
- Colors of the design need to compliment the logo.
- Expected project duration: 3-4 months
Adobe Xd has been used to design the mockup/actual concept of the product, including the homepage. It is also what I will be using to design the other pages. Xd is very responsive and fast for designing, and that is why I still use it.
JetBrains – PHP Storm: This is software like Visual Studio code and other choices for code writing. I found it to be more efficient and helping when I write code because it sometimes even corrects me and tells me that I have not written a line of code the best way, particularly HTML & CSS.
Of course, HTML & CSS have been used for the layout of the website. There is no alternative, at least for myself.
What has been delivered so far as of May 8th, 2019
- Homepage, only the homepage has been done so far due to only being paid for it. They will pay as I complete each page. They are currently waiting to hear back from developers they are hiring very soon, will then proceed to design the next page.
Initial stage: Wireframe of the homepage
The founders have specified the content they want to see on the homepage. I’ve taken that information and then designed a wireframe to match their needs accordingly. It’s a very simple layout and design, and for me, the purpose of the wireframe was to give me an idea on how I am going to approach the stage of designing the actual concept. The wireframe has helped me establish how and where content sections will be placed and laid out, not necessarily the actual design, but where will each content be placed.
After the wireframe stage has been completed and presented to my clients, they were happy to move onto the next step, which was designing the actual concept of the homepage.
Live demo: https://www.aashhab.design/esx/
The founders were very pleased with the outcome and they were certainly inclined to hire me for further projects in the future, once this project is completed.
- Because of the background (header) having a PNG background. I had to modify the background and make different versions for smaller devices and different desktops sizes, including mac-size. This makes the background work fine for all devices.
- I have had friends try out the homepage, they said the body text needs to be a brighter color for readability purposes, rest of the content was absolutely fine. This issue has been addressed in the live version.
Once again, there were no limitations. I did not have to follow any brand guidelines or the choosing of my clients. They left major and most of the decisions for me to make. The only limitation was my creativity. Time was not a problem at all as well, they were rather flexible and so I took my time with this. The design and development of the homepage took around 6 days in total.
I am currently waiting to hear back from my clients so I can resume the project. I cannot resume till they pay me for the work I need to do on the next page. Other than that I look forward to it because the rest of the other pages will match each other really well and gratify the digital experience. My freelancing experience so far has been positive and I rarely do ever experience clients that are a pain in the neck to deal with. I can confidently say that I have been lucky, 95% of my clients have not given me any issues. On the contrary, there is always that small number that complicates projects.