Added existing blog content from medium (#17)

* 7 Principles of visual design
* Visual Design Principles
* Register author Imam
---------
Co-authored-by: Kirill Taran <[email protected]>

content/authors/imam.md

@@ -1,11 +1,11 @@
 ---
 name: Imam Abullaisi
 avatar: /images/authors/imam.jpg
-occupation: UX Designer
+occupation: UI/UX Designer
 company: ARK Builders
 email:
 twitter:
 linkedin: https://www.linkedin.com/in/abullaisi/
-github: 
+github:
 id: imam
 ---

content/blog/principles-of-visual-design.md

@@ -0,0 +1,76 @@
+---
+title: 7 Principles of Visual Design in UX
+date: '2024-06-21'
+updated_at: '2024-06-21'
+draft: false
+summary: 'Visual design is a crucial aspect of user experience (UX). It shapes how users interact with digital interfaces, providing guidance, clarity, and a sense of brand identity. When executed well, visual design simplifies navigation, making users feel more at ease and confident with their interactions.'
+
+image: /images/splash/7_principles.png
+authorId: imam
+---
+
+## Key Principles of Visual Design
+
+To create an effective visual design, certain foundational principles must be respected. These principles ensure that interfaces are intuitive and engaging while aligning with user expectations.
+
+## 1. Scale
+
+![Scale](/images/blogs/scale.png)
+
+Scale is about controlling the perceived size of elements in a design to influence user focus. By carefully selecting the scale of elements, designers highlight the most important components and provide a visual pathway that guides users through the interface. For instance, in an e-commerce site, the primary “Buy Now” button is often larger and brightly colored compared to secondary elements like navigation links, directing immediate attention to the desired action.
+
+Conversely, smaller text or less prominent images encourage a more relaxed browsing pace. Designers can create harmony by ensuring that the scale relationship between all items aligns with the intended flow, leading to a consistent and effective user journey.
+
+## 2. Hierarchy
+
+![Hierarchy](/images/blogs/hierarchy.png)
+
+Visual hierarchy ensures that the content is presented in a way that logically and clearly prioritizes information. By varying the size, color, contrast, and position of various design elements, designers can establish an intuitive order that aligns with how users naturally scan a page. Headlines typically command attention due to their size and weight, while smaller text indicates secondary or supplementary information.
+
+Effective use of hierarchy leads users through the intended path, ensuring key messages and calls to action stand out clearly. For instance, a landing page might present a bold headline to hook interest, followed by concise subheadings and imagery that progressively builds the case for conversion. Each visual element must contribute to this logical progression, reinforcing the desired structure.
+
+## 3. Balance
+
+![Balance](/images/blogs/balance.png)
+
+Balance is essential for creating a sense of stability and structure in visual design. There are two main types: symmetrical and asymmetrical balance. Symmetrical balance divides a design into mirror-image halves, creating order and harmony. This approach can evoke feelings of reliability and calmness.
+
+In contrast, asymmetrical balance uses contrasting elements that aren’t identical but complement each other in weight, position, or color. Asymmetry introduces visual tension while ensuring cohesion, giving a more dynamic feel to the design. Designers skillfully blend these forms to keep layouts visually interesting and pleasant, avoiding areas that are too “heavy” or “empty.” Proper balance guides user focus smoothly across the interface, reducing distractions.
+
+## 4. Contrast
+
+![Contrast](/images/blogs/contrast.png)
+
+Contrast is a critical principle that makes significant features stand out from the background or surrounding elements. By using differences in color, size, shape, and other visual properties, designers can create differentiation between various sections or actions on the interface. High contrast between a button and its surrounding space makes it immediately noticeable, increasing the likelihood of engagement.
+
+Contrast isn’t just about color; it can be achieved through light and shadow, varying fonts, or distinctive textures. Too little contrast makes designs feel flat and confusing, while strong contrast grabs attention and clearly defines the relationships between different elements.
+
+## 5. Gestalt Principles
+
+![Gestalt](/images/blogs/gestalt.png)
+
+Gestalt principles explore how the mind naturally groups visual elements to perceive them as unified wholes. Our brains automatically connect related components based on principles like similarity, proximity, continuity, and closure. Similar items are perceived as belonging together, while proximity draws associations between closely placed objects.
+
+Continuity helps users follow an uninterrupted path across a design, and closure fills in visual gaps to complete familiar shapes. By understanding and leveraging these principles, designers can create interfaces that align with human perception and guide users effortlessly. For example, grouping related options in the navigation menu simplifies decision-making, while arranging product images in a grid pattern helps users compare items easily.
+
+## 6. Consistency
+
+![Consistency](/images/blogs/consistency.png)
+
+Consistency in visual design is vital for creating a cohesive and intuitive user experience. It involves maintaining uniformity across various elements such as fonts, colors, buttons, and layouts. When these elements are consistent, users can easily recognize patterns and predict interactions, which simplifies navigation and enhances usability.
+
+Consistent design reduces the learning curve for new users, allowing them to quickly become familiar with the interface. This familiarity builds trust and confidence, encouraging users to engage more deeply with the app or website. Additionally, a uniform visual style contributes to a polished and professional appearance, reinforcing the brand identity and creating a memorable user experience.
+
+## 7. White Space
+
+![White Space](/images/blogs/white_space.png)
+
+White space, or negative space, refers to the empty areas around and between elements in a design. It is a powerful tool for improving readability, reducing cognitive load, and creating a clean, uncluttered interface. White space allows elements to breathe, making it easier for users to focus on and process the information presented.
+
+Proper use of white space can highlight important elements, create a sense of elegance, and improve overall user experience. It helps in organizing content, preventing information overload, and guiding the user’s eye through the interface in a natural and intuitive way.
+
+## Conclusion
+
+Visual design principles form the backbone of creating intuitive and engaging user interfaces. By understanding and applying concepts like scale, hierarchy, balance, contrast, and Gestalt principles, designers can craft UIs that guide users effortlessly and provide clarity at every step. Case studies from Spotify, Google, and Netflix illustrate how these principles make products easier to navigate and more visually compelling.
+
+Incorporating common patterns, such as responsive layouts and clear navigation, ensures that the interface consistently meets user expectations. Applying these design principles and best practices results in cohesive, user-centered digital experiences that feel natural and satisfying.

content/blog/visual-design-principles.md

@@ -0,0 +1,62 @@
+---
+title: 'Visual Design Principles: Best Practices and Case Studies from Top Apps'
+date: '2024-07-12'
+updated_at: '2024-07-12'
+draft: false
+summary: 'Now we come to the example of applying visual design principles in UI design: the more we recognize, the more likely we will improve the overall user experience of our design. Here are case study examples that illustrate these principles and some best practices to consider.'
+
+image: /images/blogs/spotify.png
+authorId: imam
+---
+
+## Case Study Examples Illustrating Principles
+
+## 1. Spotify (Scale & Hierarchy):
+
+![Spotify](/images/blogs/spotify.png)
+
+Spotify’s mobile app is a prime example of how effective hierarchy and scale can enhance user experience. In the “Home” section, Spotify prominently features curated playlists and recommended tracks. The “Play” button is larger and visually distinct to catch immediate attention, while playlist and album artwork provide a visual identity that helps users navigate quickly. The “Your Library” section organizes saved songs, playlists, and podcasts in a way that reflects user habits, while different font sizes and colors clearly separate content types.
+
+## 2. Google Search (Balance & Contrast):
+
+![Google](/images/blogs/google_search.png)
+
+Google’s search homepage is celebrated for its minimalism and ease of use. The large central search bar dominates the screen, creating a focal point that eliminates distractions. This design leverages symmetrical balance, with the search bar directly centered, and a contrast between the colorful Google logo and the clean white background. Below the search bar, two contrasting buttons offer direct action options, with ample white space around them that further emphasizes their importance.
+
+## 3. Netflix (Gestalt Principles & Consistency):
+
+![Netflix](/images/blogs/netflix.png)
+
+Netflix employs Gestalt principles like grouping, proximity, and similarity in its UI design. It uses a grid system to categorize shows and movies into easily recognizable groups based on user preferences, genres, and recommendations. Each row contains similar thumbnails of content, ensuring users can quickly recognize and connect to their interests. Consistency is maintained through uniform thumbnails and playback controls, which provide an uninterrupted browsing experience.
+
+## 4. Instagram (Scale & White Space):
+
+![Instagram](/images/blogs/instagram.png)
+
+Instagram effectively uses scale to highlight key actions and content. The “Like,” “Comment,” and “Share” buttons are prominently placed under each post, making interactions intuitive. Ample white space around images and text ensures the content stands out, making the interface clean and easy to navigate.
+
+## 5. Amazon (Hierarchy & Contrast):
+
+![Amazon](/images/blogs/amazon.png)
+
+Amazon’s product pages demonstrate excellent use of hierarchy and contrast. Key information like product titles and prices are prominently displayed in larger, bolder fonts. Contrasting colors are used for call-to-action buttons like “Add to Cart” and “Buy Now,” ensuring they stand out against the rest of the page.
+
+## 6. Airbnb (Hierarchy & White Space):
+
+![Airbnb](/images/blogs/airbnb.png)
+
+Airbnb’s app design excels in using hierarchy and white space to create a seamless user experience. The search bar and navigation icons are strategically placed at the top, providing a clear starting point for users. Listings are aligned in a grid format with ample white space between them, making the interface clean and easy to navigate. Each property card is consistently structured with images, titles, and prices, guiding the user’s eyes naturally from one element to the next. This use of hierarchy and white space enhances readability and makes the browsing experience fluid and enjoyable.
+
+## 7. Trello (Consistency & Gestalt Principles):
+
+![Trello](/images/blogs/trello.png)
+
+Trello uses consistency and Gestalt principles effectively to create an intuitive and organized interface. Each board and list follows a uniform design, with consistent fonts, colors, and button styles. This consistency helps users quickly recognize and understand the functions of different elements. Trello also leverages Gestalt principles such as proximity and similarity by grouping related tasks and lists together, making it easier for users to manage and navigate their projects. The combination of consistency and Gestalt principles ensures a cohesive and user-friendly experience.
+
+## Conclusion
+
+By examining these case studies, it’s clear that applying visual design principles like scale, hierarchy, balance, contrast, Gestalt principles, consistency, and white space can significantly enhance the user experience. These principles help create interfaces that are not only visually appealing but also intuitive and functional.
+
+Top apps like Spotify, Google, Netflix, Instagram, and Amazon demonstrate the impact of thoughtful design. They show how prioritizing user needs and expectations leads to successful and engaging digital products. By incorporating these best practices, designers can create user interfaces that stand out, simplify navigation, and foster a deeper connection between users and digital products.
+
+Implement these principles in your own projects to elevate your UI design and provide users with seamless, enjoyable experiences. How will you use these insights to improve your designs? Let’s continue the conversation!

content/blog/what-is-local-first.md

@@ -36,11 +36,11 @@ Editing a Google Doc with several people looks and feels like magic - we can see
 All of our data is stored in the cloud, and it is easy to collaborate and work on files this way… until it isn’t.
 
 In March 2021, customers of OVH Cloud who stored their files in the Strasbourg data center discovered this firsthand when their files went up in smoke:
-![OVH datacenter on fire](/images/ovh_fire.jpg)
+![OVH datacenter on fire](/images/blogs/ovh_fire.jpg)
 
 Ok, that’s a super extreme example - and everyone should save important files and deployments on multiple machines - whether local or cloud. But users have been locked out of Google Accounts. When you stop paying for BigCorp Cloud, how long until your data is removed? What if your card has expired, and the emails are going to a former employee's e-mail account? Will you lose your files forever? At a previous position, months of work was lost when a colleague decided that a specific tenant was no longer in use, and deleted it without looking at usage, or asking the team if the data on the server was still needed.
 
-![Google recovery](/images/google_recovery.png)
+![Google recovery](/images/blogs/google_recovery.png)
 
 All of the convenience of Cloud-first architecture is lost - as soon as we lose all of our files.
 

src/lib/components/blogs/BlogItem.svelte

@@ -27,12 +27,11 @@
 				</time>
 				<p class="text-2xl font-extrabold">{post.title}</p>
 				<div class="">
-					<p class="line-clamp-5">
+					<p class={post.title.length > 40 ? 'line-clamp-4' : 'line-clamp-5'}>
 						{post.summary}
 					</p>
 				</div>
 			</div>
 		</div>
-		<!-- <a href="{base}/blog/{post.slug}" class="w-fit font-bold text-arkOrange">Read</a> -->
 	</a>
 </article>