{"id":6260,"date":"2024-01-08T13:40:21","date_gmt":"2024-01-08T05:40:21","guid":{"rendered":"https:\/\/www.process-group.com\/?p=6260"},"modified":"2026-01-02T13:45:01","modified_gmt":"2026-01-02T05:45:01","slug":"website-design","status":"publish","type":"post","link":"https:\/\/www.process-group.com\/en\/website-design\/","title":{"rendered":"Web Design: Beyond the Visual"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"6260\" class=\"elementor elementor-6260\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a88e48 e-flex e-con-boxed e-con e-parent\" data-id=\"0a88e48\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-eb485db e-con-full e-flex e-con e-child\" data-id=\"eb485db\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-67257cd elementor-widget elementor-widget-heading\" data-id=\"67257cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Insight<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a7503b elementor-widget elementor-widget-heading\" data-id=\"8a7503b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Web Design: Beyond the Visual<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb54701 elementor-widget elementor-widget-image\" data-id=\"bb54701\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"2200\" height=\"908\" src=\"https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-2200x908-1.jpg\" class=\"attachment-full size-full wp-image-6263\" alt=\"\" srcset=\"https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-2200x908-1.jpg 2200w, https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-2200x908-1-300x124.jpg 300w, https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-2200x908-1-1024x423.jpg 1024w, https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-2200x908-1-150x62.jpg 150w, https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-2200x908-1-768x317.jpg 768w, https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-2200x908-1-1536x634.jpg 1536w, https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-2200x908-1-2048x845.jpg 2048w, https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-2200x908-1-18x7.jpg 18w\" sizes=\"(max-width: 2200px) 100vw, 2200px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4031e0d e-con-full e-flex e-con e-child\" data-id=\"4031e0d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6ff10db elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-image-box\" data-id=\"6ff10db\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><p class=\"elementor-image-box-description\">The official website of a brand or company is often an important tool for many people to get in touch with the product or service, or to visit the website again to deepen the impression of the brand or company. Good website design plays an important role in the overall planning of the brand, because the website is an extension of the products and services, and is an important brand asset.<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6db959b elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-image-box\" data-id=\"6db959b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><p class=\"elementor-image-box-description\">The design of a website can be roughly divided into two major parts: front-end and back-end. The front-end is the visual design of the website, including text, images, layout composition, color scheme, and buttons and menu icons that general users will come into contact with; the back-end is to dynamically retrieve the data from the server and combine it with the front-end visual presentation to the consumers, that is, the back-end engineers need to build the database of the part.\n<br><br>In this way, the front-end designers can design the layout and retrieve the required content from the corresponding database. Regular maintenance and operation will ensure the longevity of your website. As mentioned earlier, a website is one of the brand's presentations and an important digital asset for the brand. With good visual design, there must be a corresponding back-end technology in order to make users have a good experience. Therefore, this time, we invite Process Pro's partner - Teconn's researcher, Mr. Fan Sheng-You, to share with us from a back-end engineer's point of view, and tell us the part that we usually pay less attention to.\n<br><br>Sheng You said, \"Generally speaking, clients are brand owners, they have complete brand concepts and good visual design, but they don't know how to add points to their websites through programs. Therefore, we plan the system architecture and write the program according to the customer's needs, and help the customer to enhance the user experience of the website.\"<br><br>\nHis definition of a good website based on years of experience:<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-92b29e0 elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-image-box\" data-id=\"92b29e0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">1. Meet the target group<\/h3><p class=\"elementor-image-box-description\">The website must meet the needs of the target group, for example, for older users, the font level setting should be adjusted accordingly. Should the design be more modern? More sophisticated? All of these must be clear about the characteristics of the target group.   <\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5909653 elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-image-box\" data-id=\"5909653\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">2. Wideness<\/h3><p class=\"elementor-image-box-description\">A modern website must be able to adapt to a wide range of devices, that is to say, it can be browsed on different devices such as desktop computers, tablets and mobile phones. In terms of display and operation, it is not the pursuit of the same, but in different devices have a reasonable way of operation.\n\n<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d2883d6 elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-image-box\" data-id=\"d2883d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">3. Minimum path<\/h3><p class=\"elementor-image-box-description\">Allows users to complete the desired operation in the shortest possible time and with the fewest number of buttons pressed.<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bd52844 e-con-full e-flex e-con e-child\" data-id=\"bd52844\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-01097e6 e-con-full e-flex e-con e-child\" data-id=\"01097e6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c0b0f34 elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-image-box\" data-id=\"c0b0f34\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">Listening to customer needs<\/h3><p class=\"elementor-image-box-description\">Previously, DEVON and Process Pro Brand have worked together on two cases, namely, \"YUZHI Consulting\" and \"Yee On Biomedical\", in which Pro first planned with the owner to customize the vision of the brand. According to Sheng You, both brands are in the same industry, so they need to be equally different from each other, and the client is different from Ian's Healthcare. In the case of Yee On Biomedical, they are a new biomedical brand that needs to establish a brand image with their customers and shareholders. P&amp;P completed the planning and set up the brand guideline before letting Teckwon take over.\n<br><br>\nHe shared that at that time, Ian BioSciences had a need for an investor area, which required the presentation of shareholder statements and financial reports. Since the information had to be uploaded to the Market Observation Post System (MOPS) synchronously and the client wanted to simplify the workflow, \"we designed an automatic interception program for the client, so that the client would only need to register in the MOPS during the maintenance process and the data would be presented on their webpage synchronously, so that the client would not have to make a lot of effort to update both interfaces repeatedly\". We designed an automated interception program for our clients so that when they do maintenance, all they have to do is register on the POP Observatory and it will be synchronized on their web page without the time and effort of updating both interfaces.\n<br><br>\nHowever, as a company engaged in integrating various elements of the knowledge value chain, providing enterprise business model planning, business planning consulting services, etc., DEVON needed to have more external communication and information dissemination functions, so DEVON designed the \"e-newsletter\" function for them to make sending e-newsletters easy and convenient to meet their media publicity and exposure needs.<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-451148a elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-image-box\" data-id=\"451148a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">1+1&gt;2 Brand Co-consultant Web Design<\/h3><p class=\"elementor-image-box-description\">Therefore, in these two cases, Pro was responsible for the branding and visual design, and first contacted the clients to extend the branding strategy and design concepts based on the research, informing Teconn's web site of the tone of the web site, and giving the basic static templates to express the concepts of the design. Sheng You said, \"Since different devices have different resolutions, Teconn will fine-tune the static template according to the brand's specifications, and then extend the template to the parts that are not designed according to the brand's specifications in the dynamic operation procedures such as cutting and programming. The two parties give each other feedback on the professional aspects of their work. He says, \"When we can't decide what to do in a discussion with a client, Pro can give us some suggestions to help us understand the client's needs more clearly.\n<br><br>Regarding website design, from the perspective of a back-end programmer, Sheng You shared a few blind spots that are more likely to occur in website design for general visual designers:<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0b8c174 elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-image-box\" data-id=\"0b8c174\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">1. Many designers usually look at it from the visual side rather than from the user's point of view, so we will assist them in organizing it from a structural point of view.<\/h3><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da59518 elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-image-box\" data-id=\"da59518\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">2. Designers are more focused on the plane or visual, to the details of the actual work, relatively do not understand. Sometimes in the planning too much attention to the visual presentation effect, but do not understand the effect in different installations on different levels can not be fully realized.<\/h3><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c891dfd elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-image-box\" data-id=\"c891dfd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><p class=\"elementor-image-box-description\">Therefore, it is the best situation to have a professional web design team to work with, he said, \"What you (branding company) want to present, we support you technically to make the desired visual effect; or what alternatives you can have on different devices to ensure a good mode of presentation.\"<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68de55e elementor-widget elementor-widget-spacer\" data-id=\"68de55e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-623473e e-con-full e-flex e-con e-child\" data-id=\"623473e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9d601d6 elementor-widget elementor-widget-heading\" data-id=\"9d601d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Insight<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0c43d17 elementor-widget elementor-widget-heading\" data-id=\"0c43d17\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/www.process-group.com\/en\/healthlife\/\">Taiwan Centennial Brand Re-establishment: Hop Lung Woolen Mills and Hop Lung Feather Collection<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ebff839 elementor-widget elementor-widget-image\" data-id=\"ebff839\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.process-group.com\/en\/healthlife\/\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1024\" height=\"423\" src=\"https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-1-1-1024x423.jpg\" class=\"attachment-large size-large wp-image-6236\" alt=\"\" srcset=\"https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-1-1-1024x423.jpg 1024w, https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-1-1-300x124.jpg 300w, https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-1-1-150x62.jpg 150w, https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-1-1-768x317.jpg 768w, https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-1-1-1536x634.jpg 1536w, https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-1-1-2048x845.jpg 2048w, https:\/\/www.process-group.com\/wp-content\/uploads\/e8a1a8e9a0ad-1-1-18x7.jpg 18w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>The official website of a brand or company is often an important tool for many people to get in touch with the product or service, or to visit the website again to deepen the impression of the brand or company. Good website design plays an important role in the overall planning of the brand, because the website is an extension of the products and services, and is an important brand asset.<\/p>","protected":false},"author":1,"featured_media":6263,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[11],"tags":[],"class_list":["post-6260","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.process-group.com\/en\/wp-json\/wp\/v2\/posts\/6260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.process-group.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.process-group.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.process-group.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.process-group.com\/en\/wp-json\/wp\/v2\/comments?post=6260"}],"version-history":[{"count":4,"href":"https:\/\/www.process-group.com\/en\/wp-json\/wp\/v2\/posts\/6260\/revisions"}],"predecessor-version":[{"id":6269,"href":"https:\/\/www.process-group.com\/en\/wp-json\/wp\/v2\/posts\/6260\/revisions\/6269"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.process-group.com\/en\/wp-json\/wp\/v2\/media\/6263"}],"wp:attachment":[{"href":"https:\/\/www.process-group.com\/en\/wp-json\/wp\/v2\/media?parent=6260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.process-group.com\/en\/wp-json\/wp\/v2\/categories?post=6260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.process-group.com\/en\/wp-json\/wp\/v2\/tags?post=6260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}