Adapting the ForceFlix streaming app for tablet and web was taken into consideration early on in the research phase, where different competitors like Netflix, Prime TV and Disney+ were looked at and how they scale up and down and certain elements that change; such as the navigation bar and how to keep icons equally space once scaled. Also looking at how using constraints within Figma helps to pin elements to certain places within the design, using the left constraint for the logo and the right constraint for the cast icon, meant that when scaled, these elements aligned to the sides they were set to.
There were also some difficulties in creating an adaptive layout, such as the featured slideshow on the home page would have ideally stretched vertically, showing the full image and pushing the other elements down; creating a more interesting and dynamic look. Although the desired outcome was not reached, a responsive website with a clear hierarchal structure was created.
Another element which was intended to be changed was the navigation menu on the web-based version, after the initial research a decision was made that a top navigation bar would be the correct creative direction to go due to the amount of space on the web 1920×1080 resolution.
A major issue that was quite time-consuming and not considered at the beginning of the design phase was creating elements that were not responsive, meaning that when the time came to create the responsive web and tablet versions, certain elements had to be completely changed so that they worked across all device sizes, some elements such as the nav bar had to be completely designed again so that when scaled the icons didn’t get distorted but instead scaled the spacing between one another. The search page was also another example of this, constraints and auto-layout settings had to be changed so that the background image scaled correctly and didn’t stay at the mobile resolution.
