This week in my visual design graduate course we read about and practiced 1) recognizing and creating complex grid structures 2) describing differences in grid structure for desktop and mobile screens 3) detailing how screen size affects design and comprehension 4) designing compelling layouts for the screen and 5) applying advanced compositions to layouts. Our assignments this week involved researching and analyzing email newsletters, website grid structures and layouts to help us design an email newsletter and simple website for a company of our choosing. First, we had to make wireframes for our email and website layouts. Then, we had to create a design comp for the newsletter and website with text and images.
What is a wireframe and what is its purpose? Wireframing is an essential step in the design process, especially for newsletters and websites. It involves creating a visual representation of the layout, structure, and functionality of the design before any actual design work begins. This process helps ensure that the end result meets the requirements and objectives of the project. Wireframes provide a clear blueprint for the design, allowing those involved in the project to review and give feedback on the design’s functionality and layout before the actual development process. This helps to save time and resources by identifying and addressing any issues early on in the design process. Ultimately, wireframing is crucial for creating effective and user-friendly designs that meet the needs of the intended audience.
The next step is to create a design comp or “comprehensive design” which is a static, high-fidelity visual representation of a design concept created by a designer. It is typically created using design software such as Sketch, Adobe XD, or a similar program. A design comp includes all the visual elements that make up the final design such as typography, colors, imagery, and layout. The purpose is to provide a detailed preview of the design before it is implemented, allowing those involved in the project to review and give feedback on the design’s overall aesthetic and functionality. Design comps are often used in the design process for websites, mobile apps, and other digital products. They serve as a critical communication tool between designers, developers, and clients, ensuring that everyone is on the same page and working towards the same design vision.
All in all, the design process is a crucial aspect of designing for screens whether it’s for a website, mobile application, or another digital product. A well-planned design process ensures that the final product is not only visually appealing but also user-friendly and functional. It involves creating wireframes and design comps, refining ideas, making design decisions, and reviewing and iterating on the design with all those involved in the project. The design process also includes considerations such as responsive design, accessibility, and usability testing. By following a robust design process, designers and developers can create digital products that meet the needs of the intended audience, effectively communicate the desired message, and deliver an optimal user experience.