

{"id":10478,"date":"2021-02-12T20:44:36","date_gmt":"2021-02-12T20:44:36","guid":{"rendered":"https:\/\/blog.tubikstudio.com\/?p=10478"},"modified":"2025-10-24T11:28:12","modified_gmt":"2025-10-24T11:28:12","slug":"photo-content-in-user-interfaces","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/","title":{"rendered":"Photo Content in User Interfaces: 7 Basic Ways to Use"},"content":{"rendered":"<p>Photos are the classics of web and app design imagery. They catch attention, set the mood, show how things work, and cover many other essential objectives in cases when pictures work better than words or enhance the written message. Our today&#8217;s article is also devoted to photos used for websites and mobile applications: let&#8217;s look at the main goals that push UI\/UX designers to search for the best shot and review plenty of UI design examples of how photos work in user interfaces.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7429\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/03\/pottery-website-design.png\" alt=\"pottery website design\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/03\/pottery-website-design.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/03\/pottery-website-design-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/03\/pottery-website-design-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/03\/pottery-website-design-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/03\/pottery-website-design-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><em>Pottery website design<\/em><\/p>\n<h2>Product or Service Demonstration<\/h2>\n<p>Obviously, photos present the major tool for the visual presentation of goods on <a href=\"https:\/\/blog.tubikstudio.com\/11-profitable-strategies-for-e-commerce-ui-design\/\">e-commerce websites<\/a> where the principle \u201cyou get what you see\u201d is a vital part of success. As long as you sell something physical, the customer expects to see it by default; that&#8217;s really the case when the picture is worth a thousand words. For shopping online, the <strong>quality and style<\/strong> of photos are crucial as they often become the main trigger capturing the customer&#8217;s eye as well as one of the key elements in the decision-making process under conditions you cannot see and touch the real goods.<\/p>\n<p>Other vital aspects of using photos effectively as a part of e-commerce experience and brand presentation are <strong>originality<\/strong> and <strong>consistency<\/strong>. To stand out from the crowd of competitors, online stores need their photos to look unique, memorable, and instantly transfer the brand image. That&#8217;s why regular photo shootings are an integral part of e-commerce reality. Depending on the target audience, different stores choose different approaches to photo presentation: some make it friendly, informal, and as close to real-life as possible, while others present their goods in original surroundings or model-posing; some resources prefer studio shots others take photos in special environments. Whatever the approach, an essential aspect is staying <a href=\"https:\/\/blog.tubikstudio.com\/design-consistency\/\">consistent<\/a> in it to make it recognizable and so that website or app visitors could feel it like a pattern and didn&#8217;t handle too much cognitive load. As well, a consistent approach to the cross-platform photo presentation of the brand photo content in different marketing channels such as social networks, advertising banners, newsletters, etc., sets a strong visual connection and helps shoppers recognize the brand whenever they see it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10903\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/fashion-brand-ecommerce-website-tubik-design.jpg\" alt=\"fashion brand ecommerce website tubik design\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/fashion-brand-ecommerce-website-tubik-design.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/fashion-brand-ecommerce-website-tubik-design-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/fashion-brand-ecommerce-website-tubik-design-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/fashion-brand-ecommerce-website-tubik-design-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/fashion-brand-ecommerce-website-tubik-design-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10904\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/product-page-ecommerce-website-tubik.jpg\" alt=\"product page ecommerce website tubik\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/product-page-ecommerce-website-tubik.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/product-page-ecommerce-website-tubik-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/product-page-ecommerce-website-tubik-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/product-page-ecommerce-website-tubik-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/product-page-ecommerce-website-tubik-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10902\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/404-page-ecommerce-website-tubikstudio.jpg\" alt=\"404 page ecommerce website tubikstudio\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/404-page-ecommerce-website-tubikstudio.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/404-page-ecommerce-website-tubikstudio-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/404-page-ecommerce-website-tubikstudio-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/404-page-ecommerce-website-tubikstudio-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/404-page-ecommerce-website-tubikstudio-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><em>A consistent approach to a visual photo presentation of the items on the <a href=\"https:\/\/blog.tubikstudio.com\/web-design-concepts-for-business\/\">e-commerce website for a fashion brand<\/a><\/em><\/p>\n<p>Anyway, the photos should demonstrate the stuff from different angles and perspectives, especially on <a href=\"https:\/\/blog.tubikstudio.com\/product-page-design\/\">product pages<\/a>. Another thing to keep in mind is that items photographed on models or in the proper environments have more chances to draw customers&#8217; attention and look more convincing. It doesn&#8217;t mean that object photography doesn&#8217;t work, yet in most cases, seeing an outfit on a model, a toy in the hands of a kid, or a set of dishes on the served table lets the buyer easily imagine it looks and see its benefits. So, quite often, e-commerce platforms combine both types of photo presentation: a clean object photo with no distractions as well as its photo on a model or in the surroundings of use.<\/p>\n<p>Certainly, it works the same way to demonstrate the services that can be visualized with photos.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10908\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/massage-services-website-tubik-studio.png\" alt=\"massage services website tubik studio\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/massage-services-website-tubik-studio.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/massage-services-website-tubik-studio-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/massage-services-website-tubik-studio-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/massage-services-website-tubik-studio-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/massage-services-website-tubik-studio-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10907\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/massage-services-website-design-tubik-studio.png\" alt=\"massage services website design tubik studio\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/massage-services-website-design-tubik-studio.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/massage-services-website-design-tubik-studio-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/massage-services-website-design-tubik-studio-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/massage-services-website-design-tubik-studio-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/massage-services-website-design-tubik-studio-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><em>Website for a massage services company<\/em><\/p>\n<p><iframe loading=\"lazy\" title=\"Cleaning service website about page tubik\" src=\"https:\/\/player.vimeo.com\/video\/511749436?h=82e5705a7a&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><em>Creative approach to using photo content for not only setting a visual connection to the provided services of a cleaning company but also as a part of scroll animation<\/em><\/p>\n<p>One more popular case often demanding thorough attention to photo content is the situation when the person or company has to <a href=\"https:\/\/elementor.com\/features\/portfolio-website-builder\/\">build an online portfolio website<\/a>. The visitor&#8217;s attention span is very short, so works in the portfolio should be dressed to impress. In this case, photos often become the major visual attractor and help to build a consistent presentation.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7821\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/01\/fashion_portfolio_website_model_page.png\" alt=\"fashion portfolio website model_page\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/01\/fashion_portfolio_website_model_page.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/01\/fashion_portfolio_website_model_page-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/01\/fashion_portfolio_website_model_page-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/01\/fashion_portfolio_website_model_page-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/01\/fashion_portfolio_website_model_page-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><em>Fashion models portfolio website<\/em><\/p>\n<p><iframe loading=\"lazy\" title=\"Mywony website lookbook interactions\" src=\"https:\/\/player.vimeo.com\/video\/543113412?h=a64466efda&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><a href=\"https:\/\/tubikstudio.com\/works\/mywony\"><em>MYWONY wedding dresses brand website<\/em><\/a><\/p>\n<h2>Setting Atmosphere<\/h2>\n<p>One more point photos are highly effective at is the ability to instantly transfer the visitor to the needed atmosphere. Properly chosen quality photo creates the mood, and this way engages the users to not only see the content but also somehow feel it, connected to their own experience and imagination.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10906\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/ballet-website-design-tubikstudio.png\" alt=\"ballet website design tubikstudio\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/ballet-website-design-tubikstudio.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/ballet-website-design-tubikstudio-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/ballet-website-design-tubikstudio-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/ballet-website-design-tubikstudio-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/ballet-website-design-tubikstudio-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><em>Home page for the ballet company website concept<\/em><\/p>\n<p><iframe loading=\"lazy\" title=\"ginschool website design tubik studio\" src=\"https:\/\/player.vimeo.com\/video\/726791802?h=eec6bec89b&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><a href=\"https:\/\/dribbble.com\/shots\/18257162-Gin-School-Website-Home-Page\" rel=\"nofollow\"><em>Gin School website design<\/em><\/a><\/p>\n<p>Due to that, in particular, atmospheric theme photos are quite popular to be used in <a href=\"https:\/\/blog.tubikstudio.com\/hero-images-in-web-design\/\">hero sections<\/a> of websites and landing pages. This way, designers activate the factor of emotion and delightfulness from the very start of interaction with the interface.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10905\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/museum-web-pages-tubik-studio.jpg\" alt=\"museum web pages tubik studio\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/museum-web-pages-tubik-studio.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/museum-web-pages-tubik-studio-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/museum-web-pages-tubik-studio-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/museum-web-pages-tubik-studio-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/museum-web-pages-tubik-studio-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><em>Website design concept inspired by Moesgaard Museum<\/em><\/p>\n<p>One more popular <a href=\"https:\/\/blog.tubikstudio.com\/major-ui-design-trends\/\">UI design trend<\/a> of a recent couple of years is using photos as a background image. Not only does this approach make the screens visually and emotionally appealing but it also supports the feeling of the integrity of all the layout elements. On the other hand, it demands deep attention to contrast and legibility of all the elements, which may be harder to achieve than in the case of monochrome <a href=\"https:\/\/blog.tubikstudio.com\/light-or-dark-ui-tips-choose-proper-color-scheme\/\">background<\/a>.<\/p>\n<p><iframe loading=\"lazy\" title=\"Museum website design tubik studio\" src=\"https:\/\/player.vimeo.com\/video\/511722553?h=1b097d474a&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><em>Website design concept inspired by Moesgaard Museum: the home page features an atmospheric full-screen background photo.<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10863\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-7.png\" alt=\"save the oceans website\" width=\"1440\" height=\"854\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-7.png 1440w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-7-300x178.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-7-768x455.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-7-1024x607.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-7-150x89.png 150w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<p><em>The impressive <a href=\"https:\/\/blog.tubikstudio.com\/error-screens-and-messages\/\">404 error page<\/a> for the <a href=\"https:\/\/blog.tubikstudio.com\/web-design-environment-ecology\/\">website devoted to saving the oceans<\/a> features the impressive full-screen background photo, instantly communicating the problem to the visitor.<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9527\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/05\/lumen-museum-website-calendar-page.png\" alt=\"lumen museum website calendar page\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/05\/lumen-museum-website-calendar-page.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/05\/lumen-museum-website-calendar-page-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/05\/lumen-museum-website-calendar-page-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/05\/lumen-museum-website-calendar-page-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/05\/lumen-museum-website-calendar-page-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><em><a href=\"https:\/\/blog.tubikstudio.com\/case-study-lumen-museum-website\/\">Lumen Museum<\/a> website pages<\/em><\/p>\n<h2>Humanized Connection<\/h2>\n<p>Consciously or unconsciously, people tend to be curious about other people. What&#8217;s even more important, in many cases, human photos look more convincing and trustworthy to us. No wonder one of the key goals behind the photos on websites or apps is making communication more human-like. Photos of teams working on a product, pictures of people to connect to, from founders and top managers to support personnel, photos of clients providing testimonials or reviews, authors of articles in the blog or media, and many other cases &#8211; all of them aim at making the user experience more human and trustworthy.<\/p>\n<p><iframe loading=\"lazy\" title=\"nonconventional show website interactions tubik\" src=\"https:\/\/player.vimeo.com\/video\/722105481?h=6a5aa6e288&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/website-design-for-podcast\/\"><em>Nonconventional Show interview podcast website<\/em><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10801\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/fashion-brand-about-page-webdesign-tubik.jpg\" alt=\"fashion brand about page webdesign tubik\" width=\"2400\" height=\"1800\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/fashion-brand-about-page-webdesign-tubik.jpg 2400w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/fashion-brand-about-page-webdesign-tubik-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/fashion-brand-about-page-webdesign-tubik-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/fashion-brand-about-page-webdesign-tubik-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/fashion-brand-about-page-webdesign-tubik-150x113.jpg 150w\" sizes=\"auto, (max-width: 2400px) 100vw, 2400px\" \/><\/p>\n<p><em>Website of a fashion designer brand\u00a0<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10912\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/photography-contest-mobile-website-tubik-studio.png\" alt=\"photography contest mobile website tubik studio\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/photography-contest-mobile-website-tubik-studio.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/photography-contest-mobile-website-tubik-studio-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/photography-contest-mobile-website-tubik-studio-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/photography-contest-mobile-website-tubik-studio-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/photography-contest-mobile-website-tubik-studio-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><em>Design concept for a website of a photography contest<\/em><\/p>\n<p><iframe loading=\"lazy\" title=\"Mayple website design tubik studio\" src=\"https:\/\/player.vimeo.com\/video\/511741600?h=b58b95b76d&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><em>Website design for <a href=\"https:\/\/tubikstudio.com\/works\/mayple\">Mayple<\/a>, a fully-managed marketing services marketplace designed to help businesses work with the experts.<\/em><\/p>\n<h2>Directional Cues<\/h2>\n<p>A <a href=\"https:\/\/blog.tubikstudio.com\/directional-cues-in-user-interfaces\/\">directional\u00a0cue<\/a> is an element of the user interface giving a visual hint on a certain interaction or content and helps the visitor see it quicker and easier, just like road signs and signposts do in the physical world. Directional cues are an essential factor of enhancing digital product usability, as they:<\/p>\n<ul>\n<li>enhance the page or screen\u00a0<a href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-make-web-interface-scannable\/\">scannability<\/a><\/li>\n<li>strengthen the\u00a0<a href=\"https:\/\/blog.tubikstudio.com\/visual-hierarchy-effective-ui-content-organization\/\">visual hierarchy<\/a><\/li>\n<li>improve\u00a0<a href=\"https:\/\/blog.tubikstudio.com\/uiux-design-glossary-navigation-elements\/\">navigation<\/a><\/li>\n<li>increase\u00a0<a href=\"https:\/\/blog.tubikstudio.com\/7-factors-that-influence-webpage-conversion-rates\/\">conversion rates<\/a>.<\/li>\n<\/ul>\n<p>Photos integrated into the interface can also cover that role. They mostly function as <strong>pointers<\/strong> (a photo of a human, animal, or object pointing at the needed element and this way attracting users&#8217; eye to it) or <strong>gaze direction<\/strong> (a photo of a human, animal, or character whose eyes are directed to the needed element this way stimulating a natural urge of users&#8217; curiosity to check what it is).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8428\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/09\/hair_beauty_website_tubik-2.png\" alt=\"hair beauty website tubik\" width=\"2180\" height=\"1635\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/09\/hair_beauty_website_tubik-2.png 2180w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/09\/hair_beauty_website_tubik-2-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/09\/hair_beauty_website_tubik-2-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/09\/hair_beauty_website_tubik-2-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/09\/hair_beauty_website_tubik-2-150x113.png 150w\" sizes=\"auto, (max-width: 2180px) 100vw, 2180px\" \/><\/p>\n<p><em>The hair beauty company website uses a hero image on the home page that works as a directional cue: the model\u2019s eyes attract your attention to the zone of <a href=\"https:\/\/blog.tubikstudio.com\/call-for-attention-powerful-cta-button-design\/\">CTA elements<\/a>.<\/em><\/p>\n<h2>Guides and Manuals<\/h2>\n<p>Being highly effective and common in setting a natural visual connection with the physical world, photos often become the primary demonstration tool in diverse manuals and guides. Be it a recipe, a guide on how to use a device, to knit a scarf, to tie a neckerchief in 20 trendy ways, or even how to take a photo &#8211; whatever kind of instructions is given to a visitor, supported with good photos it will work much more user-friendly and will be far handier than just a text.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7427\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/03\/dessert_recipe_blog_design_tubik.png\" alt=\"dessert recipe blog\" width=\"1920\" height=\"1980\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/03\/dessert_recipe_blog_design_tubik.png 1920w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/03\/dessert_recipe_blog_design_tubik-291x300.png 291w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/03\/dessert_recipe_blog_design_tubik-768x792.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/03\/dessert_recipe_blog_design_tubik-993x1024.png 993w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/03\/dessert_recipe_blog_design_tubik-145x150.png 145w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p><em>Dessert recipes blog<\/em><\/p>\n<h2>Illustrative Article Images<\/h2>\n<p>One more goal efficiently covered with photos is illustrating articles and online editorials. Photos can add visual support to the topic of the article and strengthen the text.<\/p>\n<p>The rule of thumb here is <strong>not to use photos as visual fillers<\/strong>. Both title images and photos included in the article have to work as visual helpers, not distractors, so make them meaningful, informative, or at least adding the necessary mood if the article is a piece of the emotional story. If you are telling a historical or retrospective story, find proper archive photos; if that&#8217;s the article about a specific place, don&#8217;t use stock photos to show something similar but get the ones from that particular location. Relevance is a key to successful photo usage in this case.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10911\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/generations-editorial-website-tubik-design.jpg\" alt=\"website for editorial about generations tubik studio\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/generations-editorial-website-tubik-design.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/generations-editorial-website-tubik-design-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/generations-editorial-website-tubik-design-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/generations-editorial-website-tubik-design-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/generations-editorial-website-tubik-design-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10910\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/generation-page-web-editorial-tubik-studio.jpg\" alt=\"website for editoria about generations tubik studio\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/generation-page-web-editorial-tubik-studio.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/generation-page-web-editorial-tubik-studio-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/generation-page-web-editorial-tubik-studio-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/generation-page-web-editorial-tubik-studio-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/generation-page-web-editorial-tubik-studio-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10909\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/website-for-editoria-about-generations-tubik-studio.jpg\" alt=\"website for editorial about generations tubik studio\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/website-for-editoria-about-generations-tubik-studio.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/website-for-editoria-about-generations-tubik-studio-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/website-for-editoria-about-generations-tubik-studio-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/website-for-editoria-about-generations-tubik-studio-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/website-for-editoria-about-generations-tubik-studio-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/media-editorial-website-design\/\"><em>Online editorial about different generations<\/em><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10814\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/bartending-encyclopedia-1.png\" alt=\"bartending encyclopedia\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/bartending-encyclopedia-1.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/bartending-encyclopedia-1-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/bartending-encyclopedia-1-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/bartending-encyclopedia-1-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/bartending-encyclopedia-1-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10813\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/bartending-encyclopedia-3.png\" alt=\"bartending encyclopedia\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/bartending-encyclopedia-3.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/bartending-encyclopedia-3-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/bartending-encyclopedia-3-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/bartending-encyclopedia-3-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/bartending-encyclopedia-3-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><em>Bartending encyclopedia website<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10915\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/online-magazine-design-concept.png\" alt=\"online magazine design concept\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/online-magazine-design-concept.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/online-magazine-design-concept-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/online-magazine-design-concept-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/online-magazine-design-concept-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/online-magazine-design-concept-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><iframe loading=\"lazy\" title=\"Magazine website interview page tubik\" src=\"https:\/\/player.vimeo.com\/video\/511751443?h=5e933cda4c&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><em>Web design concept for an online magazine<\/em><\/p>\n<h2>Creating Emotional Appeal<\/h2>\n<p>Another big reason to integrate photo content is the emotional appeal added to the user experience. Whatever logical and thought-out we try to make our actions, the emotional background of the situation plays a crucial role in engagement and decision-making. And that is the aspect where images in general and photos, in particular, are super helpful. They set strong associations and build up the necessary atmosphere, often even before a visitor starts reading, as <a href=\"https:\/\/blog.tubikstudio.com\/visual-perception-icons-vs-copy-in-ui\/\">images are perceived faster than words<\/a>. With the properly chosen photo integrated into the web or mobile layout, designers are able to not only capture the user&#8217;s eye but also transfer the needed mood.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10565\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/confectionery-website-design-ecommerce-tubik-studio.png\" alt=\"confectionery website design ecommerce tubik studio\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/confectionery-website-design-ecommerce-tubik-studio.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/confectionery-website-design-ecommerce-tubik-studio-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/confectionery-website-design-ecommerce-tubik-studio-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/confectionery-website-design-ecommerce-tubik-studio-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/confectionery-website-design-ecommerce-tubik-studio-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><em><a href=\"https:\/\/blog.tubikstudio.com\/ui-designs-for-ecommerce\/\">Confectionery website design<\/a> setting strong emotional appeal<\/em><\/p>\n<p><iframe loading=\"lazy\" title=\"Skating culture website design tubik\" src=\"https:\/\/player.vimeo.com\/video\/511743367?h=a1023e8d8b&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><em>Online editorial about the history and development of skateboarding<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7793\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/02\/Book-Festival-Website-Design-Tubik.png\" alt=\"Book Festival Website Design Tubik\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/02\/Book-Festival-Website-Design-Tubik.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/02\/Book-Festival-Website-Design-Tubik-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/02\/Book-Festival-Website-Design-Tubik-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/02\/Book-Festival-Website-Design-Tubik-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/02\/Book-Festival-Website-Design-Tubik-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><em><a href=\"https:\/\/blog.tubikstudio.com\/creative-web-design-for-events\/\">Book festival<\/a> website<\/em><\/p>\n<h2>Advantages of Photos in Interface Design<\/h2>\n<p>The significant advantage of photos is their ability to connect what users see on the web page with a real world of physical things and live people. Photos have been a part of human reality for many decades, much before the Internet advent, so this kind of visuals is fairly native, close, and clear for us. What\u2019s more, with all those devices that let any of us capture something in a second, photography is really a part of everyday life for many people \u2013 so, being used on a website, it sets strong connections and associations.<\/p>\n<p>What\u2019s more, photography is also a kind of art. With them, you can set the balance of realism and aesthetics in your web user interface. You can keep the necessary style appealing to your target audience and creating the required emotional background. That is one of the reasons for choosing photos to support articles on blogs and media websites.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10913\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/horse-riding-website-design-tubik-studio.jpg\" alt=\"horse riding website design tubik studio\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/horse-riding-website-design-tubik-studio.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/horse-riding-website-design-tubik-studio-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/horse-riding-website-design-tubik-studio-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/horse-riding-website-design-tubik-studio-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/horse-riding-website-design-tubik-studio-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10785\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/horse-riding-club-web-design.jpg\" alt=\"horse riding club web design\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/horse-riding-club-web-design.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/horse-riding-club-web-design-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/horse-riding-club-web-design-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/horse-riding-club-web-design-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/12\/horse-riding-club-web-design-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><em>Website design for a horse-riding club<\/em><\/p>\n<h2>Points to Consider<\/h2>\n<p>Using photos in web design, consider the following tips:<\/p>\n<ul>\n<li>download high-resolution photos<\/li>\n<li>optimize them for the web\/mobile so that too big images don\u2019t overload the page or screen \u2013 loading speed is a crucial factor of positive user experience<\/li>\n<li>give the images enough air to breathe \u2013 keep the balance of\u00a0<a href=\"https:\/\/blog.tubikstudio.com\/negative-space-in-design-tips-and-best-practices-2\/\">negative space<\/a><\/li>\n<li>remember about responsiveness and test how the images look on different screens and devices<\/li>\n<li>don\u2019t use photos as just decor \u2013 let them speak to users, transfer a message and support all the other layouts.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10914\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/furniture-website-design.jpg\" alt=\"furniture website design\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/furniture-website-design.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/furniture-website-design-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/furniture-website-design-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/furniture-website-design-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/02\/furniture-website-design-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<h2>Where Designers Get Photos<\/h2>\n<p>There are three several ways:<\/p>\n<ul>\n<li><strong>original photo production for the particular project:<\/strong> this is the most expensive option, but the photos will have the highest level of exclusiveness;<\/li>\n<li><strong>paid stock photos:<\/strong> you buy a photo you need from a photo stock that offers a variety of shots. This may be cheaper than custom photo shooting, but you may spend a lot of time searching for the photos corresponding to your tasks;<\/li>\n<li><strong>free stock photos:<\/strong> you take the photos from the communities or teams that share them for free. It is the cheapest option, but you have to be ready that other people may do the same so you\u2019ll have to think well about how to make your design original under these conditions.<\/li>\n<\/ul>\n<p>So, it\u2019s easy to see that the way you choose depends on a specific project, its budget and goals.<\/p>\n<p>Anyway, even if you are the one who runs a blog or charity with no budget for visuals or if you are creating a design concept for your portfolio, free photo stock websites offer a lot of high-quality content now. As well, some stock photo banks offer a mixed scheme, with some content or formats available for free and more on subscription; as well, from some of them, you can also order unique photos for your goals or buy already available photos to be sure they belong only to you.<\/p>\n<p>Among them, the following resources are often used for good photo content:<\/p>\n<ul>\n<li><a href=\"https:\/\/unsplash.com\/\" rel=\"nofollow\">Unsplash<\/a>: it\u2019s a community of photographers from all over the world sharing their photos for free. Photos are featured under thorough curation, so you won\u2019t find trash there<\/li>\n<li><a href=\"https:\/\/www.pexels.com\/\" rel=\"nofollow\">Pexels<\/a>: big bank of free stock photos on a variety of topics<\/li>\n<li><a href=\"https:\/\/icons8.com\/photos\" rel=\"nofollow\">Moose Photos<\/a>: professional production of stock photos that effectively work together and are very flexible for a broad content strategy; is especially interesting due to the diversity of people working as models<\/li>\n<li><a href=\"https:\/\/pixabay.com\/\" rel=\"nofollow\">Pixabay<\/a>:\u00a0a huge stock of free images, not only photos but also illustrations and vector graphics.<\/li>\n<li><a href=\"https:\/\/www.shutterstock.com\/\" rel=\"nofollow\">Shutterstock<\/a>: a huge bank of stock images on different topics, most content is available with a paid subscription<\/li>\n<li><a href=\"https:\/\/depositphotos.com\/\" rel=\"nofollow\">Depositphotos<\/a>: another massive library of stock images, especially for business and marketing goals, mostly available with a paid subscription<\/li>\n<\/ul>\n<h2>Useful Articles<\/h2>\n<p>Here&#8217;s a bunch of articles to dive deeper into the theme of web and mobile user experience design<\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/web-design-basic-types-of-images-web-content\/\">Web Design: 5 Basic Types of Images for Web Content<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/anatomy-of-web-page\/\">The Anatomy of a Web Page: 14 Basic Elements<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/big-reasons-to-apply-illustrations-in-ui-design\/\">Functional Art: 10 Big Reasons to Apply Illustrations in UI Design<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-make-web-interface-scannable\/\">UX Design: How to Make Web Interface Scannable<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/negative-space-in-design-tips-and-best-practices-2\/\">Negative Space in Design: Tips and Best Practices<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/single-page-website-best-design-practices\/\">Single-Page Website: Best Design Practices<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/3c-of-interface-design-color-contrast-content\/\">3C of Interface Design: Color. Contrast. Content<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/hero-images-in-web-design\/\">From Zero to Hero: Look at Hero Images in Web Design<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s look at the goals that push UI\/UX designers to search for the best shot and review plenty of UI design examples of how photos work in user interfaces.<\/p>\n","protected":false},"author":3,"featured_media":12951,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[463,465,466,467,468,479,482,485,487,489,491,100,502,138,504,151,515,256,533,447,591],"coauthors":[],"class_list":["post-10478","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui_ux","tag-ui-design-article","tag-ui-design-examples","tag-ui-design-inspiration","tag-ui-design-practices","tag-ui-design-process","tag-usability","tag-user-experience","tag-user-experience-design","tag-user-experience-design-process","tag-user-experience-examples","tag-user-interface","tag-design","tag-ux","tag-design-process","tag-ux-design-article","tag-design-tips","tag-uxui","tag-interaction-design","tag-web-design","tag-tubik-studio","tag-photography"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Photo Content in User Interfaces: 7 Basic Ways to Use<\/title>\n<meta name=\"description\" content=\"Let&#039;s look at the goals that push UI\/UX designers to search for the best shot and review plenty of UI design examples of how photos work in user interfaces.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Photo Content in User Interfaces: 7 Basic Ways to Use\" \/>\n<meta property=\"og:description\" content=\"Let&#039;s look at the goals that push UI\/UX designers to search for the best shot and review plenty of UI design examples of how photos work in user interfaces.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-12T20:44:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-24T11:28:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/08\/Photo-Content-in-User-Interfaces-7-Basic-Ways-to-Use.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/\",\"name\":\"Photo Content in User Interfaces: 7 Basic Ways to Use\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/08\/Photo-Content-in-User-Interfaces-7-Basic-Ways-to-Use.jpg\",\"datePublished\":\"2021-02-12T20:44:36+00:00\",\"dateModified\":\"2025-10-24T11:28:12+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"Let's look at the goals that push UI\/UX designers to search for the best shot and review plenty of UI design examples of how photos work in user interfaces.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/08\/Photo-Content-in-User-Interfaces-7-Basic-Ways-to-Use.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/08\/Photo-Content-in-User-Interfaces-7-Basic-Ways-to-Use.jpg\",\"width\":1600,\"height\":1200,\"caption\":\"Photo Content in User Interfaces- 7 Basic Ways to Use\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Photo Content in User Interfaces: 7 Basic Ways to Use\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Photo Content in User Interfaces: 7 Basic Ways to Use","description":"Let's look at the goals that push UI\/UX designers to search for the best shot and review plenty of UI design examples of how photos work in user interfaces.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/","og_locale":"en_US","og_type":"article","og_title":"Photo Content in User Interfaces: 7 Basic Ways to Use","og_description":"Let's look at the goals that push UI\/UX designers to search for the best shot and review plenty of UI design examples of how photos work in user interfaces.","og_url":"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2021-02-12T20:44:36+00:00","article_modified_time":"2025-10-24T11:28:12+00:00","og_image":[{"width":1600,"height":1200,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/08\/Photo-Content-in-User-Interfaces-7-Basic-Ways-to-Use.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/","url":"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/","name":"Photo Content in User Interfaces: 7 Basic Ways to Use","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/08\/Photo-Content-in-User-Interfaces-7-Basic-Ways-to-Use.jpg","datePublished":"2021-02-12T20:44:36+00:00","dateModified":"2025-10-24T11:28:12+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"Let's look at the goals that push UI\/UX designers to search for the best shot and review plenty of UI design examples of how photos work in user interfaces.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/08\/Photo-Content-in-User-Interfaces-7-Basic-Ways-to-Use.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/08\/Photo-Content-in-User-Interfaces-7-Basic-Ways-to-Use.jpg","width":1600,"height":1200,"caption":"Photo Content in User Interfaces- 7 Basic Ways to Use"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/photo-content-in-user-interfaces\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Photo Content in User Interfaces: 7 Basic Ways to Use"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/10478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=10478"}],"version-history":[{"count":24,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/10478\/revisions"}],"predecessor-version":[{"id":14360,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/10478\/revisions\/14360"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/12951"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=10478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=10478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=10478"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=10478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}