Design and Research
There is currently no official website or app for this anime series, the only website that has any information is Wikipedia. Fans of the series will all be using fan pages on social media forums. This is why the design is focused on fans of the series, as those are who we should be catering to, that is why the mission statement is ‘bringing together the fans of Grandmaster’. The colour theme chosen matches the colours that the main character wears during the series and is well know for, this is something every fan will recognize. These colours can also be seen on the mood board, along with images of the main character. The design has been kept neat and simple throughout each page, with an easy-to-use horizontal navigation menu at the top. These is a maximum of 5 pages available on the navigation menu, this is to make sure the important information is delivered rather than having too many options and overloading the user. The typography chosen is easy-on the eye to read, without any fancy swirls and the colour is either a bright red or white, which stands out from the black background. Based on the research from the personas, the most important aspect that users will be looking for is a discussion page. With this option people will have the chance to discuss the series with others interested in the same series, also, it will give people who have not yet watched the series a chance to ask any questions. As Grandmaster is a high-quality Chinese animation the use of lots of pictures throughout each page was important, as for those who have not watched the series, it is a great sauce of advertisement to get them used to the characters. It also gets them used to the animation art style, as it is different from the usual Japanese style.
FigJam Link – Mission Statement, Persona’s, Colour & Styles, Mood board, Wireframes, App Flow Chart
User Flow and U.I Wireframing
The first page the user will come across is the landing page. The main point of this page is to get the user to sign up for the newsletter, which will then deliver notification emails to the user to become more engaged with the site. The idea to use a large image of the main character for the background was to immediately grab the user’s attention. A left to right layout has been chosen for the homepage and character profiles, this was chosen as the image will first catch the user’s attention and then they focus on the information second. For the other layouts, there are a 2 grid and 5 grid layouts. The grid layouts are chosen to keep the information provided neat and organised for the user, also when a grid system is in place it is easier to direct the users focus to where you want it, rather than just having information loosely placed on a page. As seen from the ‘app flow chart’ the app is simple to use, with minimal options provided, as the main point is to deliver the important information without overloading the user, that is why only 5 options have been made on the navigation menu. The navigation menu will also be available on each page to make it easier for the user to switch between pages without having to return to the homepage each time. As seen on the wireframes, the placement of the boxes for the images and texts that are displayed will move based on the device used. For example, the ‘Discussion’ page has a 5-page layout with 5 text boxes which are horizontal on the webpage, yet on the app wireframe the boxes move into a vertical position to fit the device used. From the layouts, imagery chosen, text and colours the app and website were designed with the users ease of use in mind.
FigJam Link – Mission Statement, Persona’s, Colour & Styles, Mood board, Wireframes, App Flow Chart
UI Prototyping and Mobile Application
The wireframe design has been kept the same when developing the prototype. While using Figma my first step was to create a section to make it easier to keep track of my pages. I then made a frame within that section, (1920×1080) which is a standard webpage size. To place the image for the background on the landing page, I went to file and place image, then fit the image to the screen size, I also had to make sure that the image was placed below the box and text on the layers section. I then created the newsletter box and buttons using the rectangle shape at the top. I copied the ‘sign up’ button to also use as the ‘homepage’ button so that they are the same size and colour, the corner radius has also been set to 10 for a curved edge to give a user-friendly look. I then filled in all the text needed and added the colours to match with the theme. For the homepage I followed the same step to create a section and frame, then started creating the navigation menu at the top using the rectangle shape tool again. Once this was created, I copied the navigation menu and the whole page and made 4 exact copies, this was so the navigation menu size and placement would be consistent on each page. I then named each page, so it is easier to keep track of the layer’s menu on the left of the Figma page. Once this was done, all that was left was to add the images and text to each page. When the first ‘Character Profile’ was done, I then copied that page and pasted it 8-times and switched the picture and information so the placement and colour theme remained the same throughout. For the ‘Artwork’ page there is a horizontal scroll options for the images, to make this I used the rectangle shape tool again to create the box size I wanted within the frame so I could get the scale right, I then moved it outside the frame and duplicated the boxes, afterwards I selected them all together and added an auto layout which creates a frame, I then made sure it was set to a horizontal layout and duplicated it again. I then filled the boxes with images and placed it on the page, I made sure to clip the content, so it hides the other boxes that do not fit within the page. I then clicked on the ‘Prototype’ option and changed the scroll behaviour overflow to horizontal, so it worked properly. I then connected all the buttons to each of their relevant pages and clicked smart animate to make it flow smoother. I then clicked the preview setting to make sure each button worked correctly and that everything ran smoothly.
Figma Link – Responsive pages
Adapting Your Design for Web Deployment
I chose to do the original app design as a webpage size so I could then make each section responsive to work on multiple devices such as a tablet or phone screen. Using the homepage as an example, the first step to make the page responsive was to group the navigation buttons together so they stay with each other, and set the constraints to the top right, which will always keep them at the top right of the screen. I also did the same with the ‘GM’ logo but set the constraints to top left instead, they are both also set with an absolute position. All the content was grouped together, and the constraints set to the top, so it is always the same distance from the navigation bar. Also set to scale for the left and right, so the content is scaled to the width of the page. The text within the content is set to scale, top so it is always the same distance from the top, this prevents the image getting obstructed as the text moves down with the page, this is also same for both images. Now looking at the discussion page as it is a different layout structure from the homepage. Auto layout has been set so the content adjusts to the page, the navigation bar is again set to an absolute position just as it is in the homepage. The grid layout has not been set with an absolute position as this would prevent the boxes from rearranging to fit with the screen. Similar settings were used on each page, making sure the content can fit within any screen size. The main problem I found when using Figma was that shapes such as rectangle boxes and text did not shrink to fit the page, the page would just start to appear over it instead. As I designed the webpage first, each design for any screen is the same throughout which creates consistency.
Figma Link – Responsive pages
References:
Wallpaper Abyss, Meduzanol At Alpha Coders (2022) Lan Zhan. Available online: https://wall.alphacoders.com/big.php?i=1228249 [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2021) Jiang Cheng. Available online: https://wall.alphacoders.com/big.php?i=1132896 [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2022) Lan Sizhui. Available online: https://wall.alphacoders.com/big.php?i=1177992 [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2021) Jin Ling. Available online: https://wall.alphacoders.com/big.php?i=1127436 [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2021) Wen Ning. Available online: https://wall.alphacoders.com/big.php?i=1133499 [09/05/24]
Wallpaper Abyss, Oreskis At Alpha Coders (2022) Wei Wuxian. Available online: https://wall.alphacoders.com/big.php?i=1192840 [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2022) Nie Huaisang. Available online: https://wall.alphacoders.com/big.php?i=1150368 [09/05/24]
Pinterest, Charles Eyler (2024) Wen Qing. Available online: https://www.pinterest.co.uk/pin/260434790943405629/ [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2021) Jiang Yanli. Available online: https://wall.alphacoders.com/big.php?i=1127282 [09/05/24]
Wallpaper Abyss, AlphaStystem At Alpha Coders (2021) Wei Wuxian (mobile). Available online: https://mobile.alphacoders.com/wallpapers/view/895751 [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2021) Wei Wuxian Anime. Available online: https://wall.alphacoders.com/big.php?i=1119307 [09/05/24]
Heavens Officals Blessing Wiki Fandom, Ashi-nyan (2024) Donghua. Available online: https://heaven-officials-blessing.fandom.com/wiki/Donghua?file=Donghua+01.jpg [09/05/24]
The Scum Villain’s Self-Saving System Wiki Fandom, SandyTree (2024) Shen Quingqin Gallery. Available online: https://scumvillain.fandom.com/wiki/Shen_Qingqiu/Gallery [09/05/24]
Seven Seas Entertainment, Meng Xi Shi (2023) Thousand Autumns: Qian Qiu. Available online: https://sevenseasentertainment.com/books/thousand-autumns-qian-qiu-novel-vol-1/ [09/05/24]
Wallpaper Abyss, anamor At Alpha Coders (2021) Ethereal. Available online: https://wall.alphacoders.com/big.php?i=1128723 [09/05/24]
Modao-zushi fandom, Yuukirayu (2024) Animation/Gallery. Available online: https://modao-zushi.fandom.com/wiki/Animation/Gallery?file=Donghua-04.png [09/05/24]
Wallpaper Abyss, sloartist At Alpha Coders (2019) Lan Zhan Wei Ying. Available online: https://wall.alphacoders.com/big.php?i=995773 [09/05/24]
Wallpaper Abyss, drak95 At Alpha Coders (2019) Mo Dao Zu Shi. Available online: https://wall.alphacoders.com/big.php?i=995755 [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2019) Heavenly Mo Dao Zu Shi. Available online: https://wall.alphacoders.com/big.php?i=993007 [09/05/24]
Wallpaper Abyss, drak95 At Alpha Coders (2019) Lan Zhan Anime. Available online: https://wall.alphacoders.com/big.php?i=996903 [09/05/24]
Wallpaper Abyss, sloartist At Alpha Coders (2019) Wei Ying Anime. Available online: https://wall.alphacoders.com/big.php?i=995771 [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2021) Lan Wagji Anime. Available online: https://wall.alphacoders.com/big.php?i=1117911 [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2021) Wei Wuxian. Available online: https://wall.alphacoders.com/big.php?i=1117915 [09/05/24]
Wallpaper Abyss, ciaociaovita At Alpha Coders (2019) Mo Dao Zu Shi. Available online: https://wall.alphacoders.com/big.php?i=995779 [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2021) Soulful Anime. Available online: https://wall.alphacoders.com/big.php?i=1122242 [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2021) Anime. Available online: https://wall.alphacoders.com/big.php?i=1141228 [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2021) Wen Ning’s HD. Available online: https://wall.alphacoders.com/big.php?i=1141362 [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2022) Jiang Yanli. Available online: https://wall.alphacoders.com/big.php?i=1152675 [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2021) Ethereal. Available online: https://wall.alphacoders.com/big.php?i=1122896 [09/05/24]
Wallpaper Abyss, Oreskis At Alpha Coders (2022) Wei Wuxian Lan Wangji. Available online: https://wall.alphacoders.com/big.php?i=1232878 [09/05/24]
Wallpaper Abyss, Meduzanol At Alpha Coders (2022) Wei Wuxian. Available online: https://wall.alphacoders.com/big.php?i=1177980 [09/05/24]
Artone Studio, Derek Sieber (2023) One Page Love – Dark Color Scheme Website Examples. Available online: https://onepagelove.com/derek-sieber [09/05/24]
ScemeColor (2024) Red, Black And Gray Color Scheme. Available online: https://www.schemecolor.com/red-black-and-gray.php [09/05/24]
Adobe Stock, Salman (2024) Black red and white abstract contrast background. Black red white business corporate background design with contrast style. Available online: https://stock.adobe.com/images/black-red-and-white-abstract-contrast-background-black-red-white-business-corporate-background-design-with-contrast-style-template-corporate-concept-red-black-grey-and-white-contrast-background/399198695 [09/05/24].
Wiki modao-zushi fandom. (2024) Grandmaster of Demonic Cultivation. Available online: https://modao-zushi.fandom.com/wiki/Novel [Accessed 05/05/2024].
Mo Xiang Tong Xiu (2016) Mo Dao Zu Shi (Grandmaster of Demonic Cultivation) [Novel, Donghua, Live Action]. https://www.google.com/search?sca_esv=35a3d0f5617f2f1a&rlz=1C1CHBF_en-GBGB959GB959&sxsrf=ADLYWILkaACGNU6H-LJM9lNKVoSfwJrPqQ:1715289474396&q=Mo+Xiang+Tong+Xiu&si=ACC90nwLLwns5sISZcdzuISy7t-NHozt8Cbt6G3WNQfC9ekAgHvNBvzVerB4JwFE2SCl-Afg45Ef0BBMn0REdP4BXgSFyRCi2dj8aiun7N4yLwELtgd47pnhQK3BPL5t7hlpZLcXBDVoKdv5tV6JZs00YmiUsBC2S4HxgUQofoTpPhCm3uBsWGXxCQHGt98iBrGx6QOijiKEEO2PLffq6yrHGqahVUFuqA%3D%3D&sa=X&sqi=2&ved=2ahUKEwibrbuev4GGAxWbZUEAHa_BA4gQmxMoAHoECCYQAg&biw=1920&bih=953&dpr=1 [09/05/2024]