{"id":379,"date":"2025-02-18T23:27:05","date_gmt":"2025-02-18T23:27:05","guid":{"rendered":"https:\/\/purplered.com\/Design\/?page_id=379"},"modified":"2025-06-29T16:44:48","modified_gmt":"2025-06-30T00:44:48","slug":"ui-ux-design-landing-page-for-launch","status":"publish","type":"page","link":"https:\/\/purplered.com\/Design\/ui-ux-design-landing-page-for-launch\/","title":{"rendered":"UI\/UX Design: Landing Page for “Launch”"},"content":{"rendered":"\n
<\/span>
\n
\"\"<\/figure>\n\n\n\n

Landing Page<\/em><\/em><\/p>\n\n\n\n

\n<\/div><\/div>\n\n\n\n

The Brief<\/h2>\n\n\n\n

Launch<\/strong> needs a landing page for their ads that showcases their mission and engages their audience within one screen. Variations are required for several platform: Desktop\/Laptop, Tablet, Phone. The page must be very “clean” and professional, feel elegant and business oriented, and suggest a blend between tech and sustainability.
Background:<\/strong> Launch is a consulting firm specializing in helping sustainable startups raise funds and develop their business model. Launch helps startups grow by developing their business structures, raising capital, increasing sales, scaling operations such as product development and manufacturing, and developing marketing.
Target audience:<\/strong> CEOs of tech startups looking to expand their potential, build a customer base, increase visibility, and find more investors in order to build a successful company.<\/p>\n\n\n\n

\n
<\/div>\n\n\n\n

1. Content and 1st<\/sup> Design<\/h2>\n\n\n\n

For optimum efficiency, the landing page will include:
<\/strong>– The Logo
– A Header
– A Description
– Key Services
– A visual
– A Menu
It should also use the main branding colors.<\/p>\n\n\n\n

Visual:<\/strong>
The design should include an illustration\/photo. One idea was to show a dramatic perspective of a tall modern building with vegetation on the side, as a way to convey sustainability in a city environment, as well as fast growth.
AI was used to generate a photo-realistic shot, which was later color corrected and edited in Photoshop.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

A copy was written to match the brief:
<\/strong>——-
Headline:<\/strong>
“Elevate your Startup, Accelerate your Success!
Subheadline:<\/strong>
“We help sustainable startups grow with clarity, strategy, and purpose.”
Copy:<\/strong>
“Our accelerator program blends business expertise with focused mindset, giving you the tools, mentorship, and connections to scale effectively.
Step into a space that values both balance and ambition.
It\u2019s time to build, grow, and flourish.”
Call-To-Action:<\/strong>
“Connect”
——-<\/p>\n\n\n\n

The layout was designed in Figma, which has pre-configured frames for the various required formats involved: in this case a MacBook Pro.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

For this first design, the idea was to keep it very simple and minimalist, and to only display a Call-to-Action underneath the text.<\/p>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
<\/span>
\n
\n
<\/div>\n\n\n\n

First Design<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
\n
<\/div>\n\n\n\n

2. Additional Designs<\/h2>\n\n\n\n

The second design aims for a more abstract and graph oriented visual. Originally generated with AI, it has been masked out and a soft reflection has been created in Photoshop for a clean and modern tech inspired effect.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Four tiles have been placed at the bottom of the page for a fuller display of Launch’s mission and direct access to some key features.<\/p>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
<\/span>
\n
\n
<\/div>\n\n\n\n

Second Design<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
\n

A different version of the graph, with a more vibrant style has been generated with AI and masked out and color corrected in Photoshop, as a third option.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The size of the copy has been rearranged for a more impactful overall feel, with an emphasis on the logo and the message.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n
<\/span>
\n
\n
<\/div>\n\n\n\n

Third Design<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
\n
<\/div>\n\n\n\n

3. Additional Devices<\/h2>\n\n\n\n

Using Figma, variations are created for several devices and placed in mockups for realistic previews.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The three designs for a landing page for Desktop\/Laptop, Tablets and Smartphones are ready for presentation.<\/p>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
<\/span>
\n

Final Presentation<\/h4>\n<\/div><\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
<\/span>
\n
\n
\"\"<\/figure>\n\n\n\n
<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
<\/span>
\n

<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

The Brief Launch needs a landing page for their ads that showcases their mission and engages their audience within one screen. Variations are required for several platform: Desktop\/Laptop, Tablet, Phone. The page must be very “clean” and professional, feel elegant and business oriented, and suggest a blend between tech and sustainability.Background: Launch is a consulting […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/purplered.com\/Design\/wp-json\/wp\/v2\/pages\/379"}],"collection":[{"href":"https:\/\/purplered.com\/Design\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/purplered.com\/Design\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/purplered.com\/Design\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/purplered.com\/Design\/wp-json\/wp\/v2\/comments?post=379"}],"version-history":[{"count":28,"href":"https:\/\/purplered.com\/Design\/wp-json\/wp\/v2\/pages\/379\/revisions"}],"predecessor-version":[{"id":1216,"href":"https:\/\/purplered.com\/Design\/wp-json\/wp\/v2\/pages\/379\/revisions\/1216"}],"wp:attachment":[{"href":"https:\/\/purplered.com\/Design\/wp-json\/wp\/v2\/media?parent=379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}