In web design, responsive concepts can help increase interactivity with the viewer. Two main layouts that we can see in design are fluid and adaptive layouts; fluid allowing for content to stretch the width of the page depending on the size of the screen and adaptive shifting the layout of the content entirely depending on the size of the screen. But a good design should be a mixture of both of these, which is what responsive design is. This is done to make the page and content look good regardless of the device or system you are viewing it from.
One Page Designs In-Depth
One page design a concept in which a designer presents all their information within a page to share information, tell a story or even connect with potential customers. Like we said above, responsive designs can help increase interactivity. But it does this in three steps – responsiveness (as explained above), color choice, and creating a theme that is memorable and striking. Lets take a look at a few designs that work well in these steps.
Digital Surgeons
One page that I felt had an innovative design was the Digital Surgeons website. When I first opened this website I was amazed by how interactive it was in terms of the design. The page was designed to interact through the movement of the mouse and as you scroll down the page. Different animations happen at different parts of the page, and the animations are seamless. The site’s purpose is not only to serve as a portfolio, but to encourage people to choose them as a service in which they design their brand and website alongside giving advice and support to increase viewership of their clients’ content. The key visual elements that it goes back to is the triangle. This shape is shown throughout the design, not only for the cursor but for the background assets and more. Triangles represent stability and strength. I believe this design was made to show how stable and good their business is when it comes to their craft.
The website itself is responsive in the visual elements such as videos, animation, and images, but in terms of the content (mainly the text), it is not very effective. The header and navigation tab that goes with it are resized way to big and it end up interfering with the text for the page. Apart from the issue with the text, it is a really good design. The designer wanted each section of the page to correspond to a specific action. For example in the image above it says, “Fracturing our ability to experiment with new ideas, tactics, and experiences that lead to growth.” To make it stand out, the designer made it so the statue would fracture, thus making the statement more powerful. Other parts of the site where they have a small portfolio have some images in the foreground and some in the background. This is adjusted to have the foreground images have more speed when moving through the page adding depth to it.
Hypicons
Hypicons is a brand page where the person of interest creates icon designs for mobile devices and other systems. The purpose is to present and create interest for their product. The design of the content is made to have this neon purple and bluish color while painting a sharp, yet smooth surface. Each icon shown has a bevel and inner glow on it to make it stand out. The conveyor belt of icons falling into boxes then rolling out creates a feeling that this product is being sold at a high volume (meaning it has a lot of buyers). It could also mean to match the fact that they are “icon packs” and they are delivering the product to you. The blue color choice creates a chill, calming mood in which it makes the viewer feel welcome, while the purple creates this intense light that is shining over the product matching the “wildly over the top” theme they were going for in the designs.
The design is very responsive. The images and content rearrange themselves when you resize the screen and it also adjusts the sizes as well. In this sense the design is successful. This design gives off a 1980s vibe due to the nature of the neon colors and their vibrancy, including how they are used in the design. The color choices are well restricted in the fact they do not expand too much and make sure the colors compliment each other rather than contrast. The designer designed the website the way they did because they wanted to create a simple yet clean design in which the abstract icons would stand out best. The use of intense purples on the icons with cool blues in the background really made the icons themselves stand out.
Olivia Sisinni
Olivia Sisinni’s website is a portfolio website made to engage and connect with customers. The colors are bright and vibrant, while the site itself is very minimalistic in nature. It does not shower itself in animation or decorate itself in a flashy sense (apart from images that show her testimonials and portfolio). The image in the header (behind the header text) is very abstract and allows the text to stand out because of the depth it creates due to the gradients. The gradients create a shadow that makes the image seem layered when it really isn’t. This design feels a little spicier and more active compared to the design by Digital Surgeons or by Hypicons. While it does feel welcoming, it gives me a sense that work will let done because of the color choice. I believe they went with this color choice to show how proactive they will be when it comes to their work and how much passion and love they have for their work.
Overall, the design is mostly responsive, but not optimized. As you zoom out, the text does not increase in size to compliment the images and it makes it really hard to read. Also while zooming out, I realized that the background image that went behind the heading text disappeared, making the heading impossible to read. Zooming in, I noticed her profile picture and social icons at the top disappeared. This however was fine because of how that information was not a necessity to the page within the layout it shifted to. Otherwise, everything reorganized itself and created a nice layout that portrayed the site well.
Conclusion
Responsive designs are a very important concept that artists need to learn. In web design, they can affect how your content is rendered on different devices and how it will appear to viewers. If content does not adjust properly, it can look messy or cluttered, causing the viewer to think of you as lazy or unprofessional. Making sure the design is responsive, fits the theme of your topic or product, and has a color scheme that can create abstraction can help your design to stand out from others and also increase audience retention. Make sure when you go into you designs, to follow those three steps and master the concept of creating responsive designs.