Hai bisogno di creare o rinnovare la tua homepage? Ecco i 12 passi essenziali
[tatsu_section bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= '{"d":"scroll"}' bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' bg_animation= "none" padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":"0px 0px 0px 0px"}' bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" section_height_type= "auto" custom_height= '{"d":""}' vertical_align= "center" top_divider= "none" top_divider_zindex= "9999" bottom_divider_zindex= "9999" bottom_divider= "none" top_divider_height= '{"d":"100"}' top_divider_position= "above" bottom_divider_height= '{"d":"100"}' bottom_divider_position= "below" top_divider_color= "#ffffff" bottom_divider_color= "#ffffff" invert_top_divider= "0" invert_bottom_divider= "0" flip_top_divider= "0" flip_bottom_divider= "0" section_id= "" section_class= "" section_title= "" offset_value= "0px" full_screen_header_scheme= "background--dark" overflow= "" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HyWPtvqUdd"][tatsu_row full_width= "0" bg_color= "" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" no_margin_bottom= "0" equal_height_columns= "0" gutter= "medium" column_spacing= "px" fullscreen_cols= "0" swap_cols= "0" padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":"0px 0px"}' row_id= "" row_class= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" border_radius= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "r1lPKvc8dO"][tatsu_column bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= "scroll" bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "0" box_shadow_custom= "0px 0px 0px 0px rgba(0,0,0,0)" bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" animate_overlay= "none" link_overlay= "" vertical_align= "none" sticky= "0" offset= '{"d":"0px 0px"}' column_parallax= "0" column_width= '{"d":100,"l":100,"t":100,"m":100}' column_mobile_spacing= "0" image_hover_effect= "none" column_hover_effect= "none" hover_box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" overflow= "" col_id= "" column_class= "" top_divider= "none" top_divider_height= '{"d":"100","m":"0"}' top_divider_color= "#ffffff" flip_top_divider= "0" top_divider_zindex= "9999" bottom_divider= "none" bottom_divider_height= '{"d":"100","m":"0"}' bottom_divider_color= "#ffffff" flip_bottom_divider= "0" bottom_divider_zindex= "9999" left_divider= "none" left_divider_width= '{"d":"50","m":"0"}' left_divider_color= "#ffffff" invert_left_divider= "0" left_divider_zindex= "9999" right_divider= "none" right_divider_width= '{"d":"50","m":"0"}' right_divider_color= "#ffffff" invert_right_divider= "0" right_divider_zindex= "9999" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "rJPYwc8Ou"][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 0px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "SJ19vc8du"]
[/tatsu_text][tatsu_inline_text max_width= '{"d":"100","m":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' bg_color= "" typography= '{"d":""}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "H1ttuqLdO"]
Gli utenti impiegano circa 50 millisecondi (0,05 secondi) per formarsi un'opinione sul tuo sito web che determina se resteranno o lasceranno il sito.
[/tatsu_inline_text][/tatsu_column][/tatsu_row][/tatsu_section][tatsu_section bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= '{"d":"scroll"}' bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' bg_animation= "none" padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":"0px 0px 0px 0px"}' bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" section_height_type= "auto" custom_height= '{"d":""}' vertical_align= "center" top_divider= "none" top_divider_zindex= "9999" bottom_divider_zindex= "9999" bottom_divider= "none" top_divider_height= '{"d":"100"}' top_divider_position= "above" bottom_divider_height= '{"d":"100"}' bottom_divider_position= "below" top_divider_color= "#ffffff" bottom_divider_color= "#ffffff" invert_top_divider= "0" invert_bottom_divider= "0" flip_top_divider= "0" flip_bottom_divider= "0" section_id= "" section_class= "" section_title= "" offset_value= "0px" full_screen_header_scheme= "background--dark" overflow= "" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "BJbkNlf7_O"][tatsu_row full_width= "0" bg_color= "" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" no_margin_bottom= "0" equal_height_columns= "0" gutter= "medium" column_spacing= "px" fullscreen_cols= "0" swap_cols= "0" padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":"0px 0px"}' row_id= "" row_class= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" border_radius= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "r1gJ4eM7_O"][tatsu_column bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= "scroll" bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "0" box_shadow_custom= "0px 0px 0px 0px rgba(0,0,0,0)" bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" animate_overlay= "none" link_overlay= "" vertical_align= "none" sticky= "0" offset= '{"d":"0px 0px"}' column_parallax= "0" column_width= '{"d":100,"l":100,"t":100,"m":100}' column_mobile_spacing= "0" image_hover_effect= "none" column_hover_effect= "none" hover_box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" overflow= "" col_id= "" column_class= "" top_divider= "none" top_divider_height= '{"d":"100","m":"0"}' top_divider_color= "#ffffff" flip_top_divider= "0" top_divider_zindex= "9999" bottom_divider= "none" bottom_divider_height= '{"d":"100","m":"0"}' bottom_divider_color= "#ffffff" flip_bottom_divider= "0" bottom_divider_zindex= "9999" left_divider= "none" left_divider_width= '{"d":"50","m":"0"}' left_divider_color= "#ffffff" invert_left_divider= "0" left_divider_zindex= "9999" right_divider= "none" right_divider_width= '{"d":"50","m":"0"}' right_divider_color= "#ffffff" invert_right_divider= "0" right_divider_zindex= "9999" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "ByJNlz7uO"][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "SkAHgfmud"]
Ti sei mai preso il tempo di pensare veramente alla homepage della tua azienda?
Sì, stiamo parlando della tua homepage. Il design della homepage del tuo sito web dovrebbe essere abbastanza attraente da attirare gli acquirenti e alla fine convertirli in clienti. Questo è il posto dove presenti i tuoi prodotti, spieghi come possono aiutare le persone a risolvere i loro problemi, guadagni la fiducia delle persone e gli assicuri che sei l'azienda con cui devono lavorare, li aiuti ad affrontare le loro incertezze, ecc. Se non hai già una strategia per affrontare tutti questi aspetti nella tua homepage, stai fondamentalmente perdendo un sacco di potenziale di crescita. I tuoi visitatori stanno visitando passivamente la tua homepage e tu stai perdendo l'opportunità di catturarli come lead e aumentare le tue conversioni.
[/tatsu_text][tatsu_inline_text max_width= '{"d":"100","m":"100"}' wrap_alignment= "center" text_alignment= '{"d":"center"}' margin= '{"d":"0px 0px 30px 0px"}' bg_color= "" typography= '{"d":""}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "SyRcgM7_u"]
Cominciamo con le basi: Cos'è una homepage?
[/tatsu_inline_text][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "ryHCgzQdu"]
Una homepage è la pagina introduttiva di un sito web, è il punto di partenza ed è la pagina predefinita quando un visitatore entra nel tuo sito web tramite il nome del dominio.
[/tatsu_text][tatsu_inline_text max_width= '{"d":"100","m":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' bg_color= "" typography= '{"d":""}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "HkilbfQOO"]
Perché dovresti preoccuparti di progettare una homepage?
[/tatsu_inline_text][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "HkvGZzXd_"]
La prima impressione è importante. Il tuo sito web offre la prima impressione del tuo business, quindi devi preoccuparti di progettare la homepage perfetta. La buona notizia è che ci sono molti grandi esempi là fuori, quindi in sostanza, il lavoro di design è già stato fatto per te. Si tratta piuttosto di scegliere il design giusto per il tuo business.
[/tatsu_text][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "Sy7dK9IO_"]
Il 57% degli utenti di Internet dice che non raccomanderà un'azienda con un sito web mal progettato.
[/tatsu_text][tatsu_image image= "https://irbox.it/wp-content/uploads/2021/05/1.1.jpg" image_varying_size_src= "" alignment= "center" border_width= "0" border_color= "" id= "510" size= "full" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "https://www.vecteezy.com/free-vector/web-design" new_tab= "0" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":"0px 0px 20px 0px"}' key= "Bk4NWzQ_d"][/tatsu_image][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "BktwffQ_u"]
Come si progetta una homepage?
[/tatsu_text][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "SkkKffmud"]
Ci sono molte cose che vanno considerate nella progettazione di una homepage. Gli elementi base possono includere:
[/tatsu_text][tatsu_lists style= "icon" circled= "0" icon_bg= "" icon_color= "rgba(34,147,215,1)" timeline= "0" timeline_color= "" list_item_margin= '{"d":"12"}' vertical_alignment= "center" custom_border= "0" border= '{"d":"0"}' border_color= "" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' outer_border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "H1VwiffQd_"][tatsu_list icon= "icon-icon_check" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HJDofzXdO"]
Logo
[/tatsu_list][tatsu_list icon= "icon-icon_check" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "H1eDsGG7Ou"]
Menu del sito e navigazione
[/tatsu_list][tatsu_list icon= "icon-icon_check" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "H1WPizfXd_"]
Titolo e sottotitoli
[/tatsu_list][tatsu_list icon= "icon-icon_check" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "rJfPiGfm_O"]
Immagine principale o video
[/tatsu_list][tatsu_list icon= "icon-icon_check" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "BJ7wiGG7dd"]
Mission aziendale
[/tatsu_list][tatsu_list icon= "icon-icon_check" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "ryLDQMQdd"]
Colori
[/tatsu_list][tatsu_list icon= "icon-icon_check" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "rkOwXGmOO"]
Immagini di supporto
[/tatsu_list][tatsu_list icon= "icon-icon_check" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "B1Sq7Mmu_"]
Colori di sfondo o immagini
[/tatsu_list][tatsu_list icon= "icon-icon_check" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "rybnmG7_O"]
Pulsante di call-to-action o pop-up
[/tatsu_list][tatsu_list icon= "icon-icon_check" circled= "0" icon_bg= "" icon_color= "" border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "rJ66mMXdd"]
Barra di ricerca
[/tatsu_list][/tatsu_lists][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "SJpAQzmOd"]
La tua homepage dovrebbe mettere insieme tutti questi elementi. Inizia a posizionarli con attenzione in base a una gerarchia di importanza.
Se per qualche raggione in questo momento non vuoi rivolgerti al proffessionista per creare e progettare la tua homepage aziendale e stai iniziando una homepage da zero, considera di usare un costruttore di siti web come Tilda, Squarespace e altri. Tutte le questioni tecniche di impaginazione e costruzione del sito web sono da essi progettati per aiutarti a identificare e strutturare gli elementi della tua homepage attraverso dei modelli prestabiliti.
[/tatsu_text][tatsu_inline_text max_width= '{"d":"100","m":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' bg_color= "" typography= '{"d":""}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "HkWOVMQdO"]
Come si crea un corretto design di homepage?
[/tatsu_inline_text][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "HybK4GXdO"]
Un buon design di homepage bilancia la bellezza estetica e la funzionalità chiara ed intuitiva per l'utente che lo visiterà. Non dovrebbe solo avere gli elementi di cui sopra, ma dovrebbe andare oltre la call to action per rendere ai visitatori facilmente ed immediata la comprensione di cosa tratta la tua attività.
[/tatsu_text][tatsu_animated_heading text= "1. Descrive vividamente il business" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HJ-gBG7uu"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "B1vwSGQdd"]
Mentre i brand famosi potrebbero essere in grado di cavarsela con una homepage scarsa, la maggior parte delle aziende non può. A tal fine, una grande homepage descrive in maniera funzionale ciò che fai. Se i visitatori non sono in grado di identificare rapidamente di cosa si occupa la tua azienda, abbandonano la pagina.
[/tatsu_text][tatsu_animated_heading text= "2. Si rivolge al tuo pubblico principale" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "Bk9dSM7dd"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "r14y8f7dO"]
Le buone homepage in realtà non si rivolgono a tutte le persone del mondo. Piuttosto, sono strettamente focalizzate e parlano alle persone giuste, il target, persone che sanno che compreranno da loro.
[/tatsu_text][tatsu_animated_heading text= "3. Comunica valore al tuo pubblico principale" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "r1Ee8M7ud"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "HJY7Iz7_O"]
La homepage è il posto migliore per evidenziare la tua proposta di valore in modo che i potenziali clienti scelgano di rimanere sul tuo sito web e non passare a quello dei tuoi concorrenti. Dovrebbe rispondere alla domanda "cosa ci guadagno io?" in modo rapido ed efficiente.
Concentrati sull'utente aiutando i visitatori a identificarsi rapidamente con ciò che stai offrendo e determinare se i loro bisogni possono essere soddisfatti. Inoltre, dovrebbe fornire esempi e ispirazione per aiutare i visitatori a immaginare sé stessi utilizzando il tuo prodotto o servizio.
[/tatsu_text][tatsu_image image= "https://irbox.it/wp-content/uploads/2021/05/1.2.jpg" image_varying_size_src= "https://irbox.it/wp-content/uploads/2021/05/1.2-300x300.jpg" alignment= "center" border_width= "0" border_color= "" id= "527" size= "medium" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "https://www.vecteezy.com/free-vector/responsive" new_tab= "0" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":"0 0 0px 0"}' key= "BkDVIMXdu"][/tatsu_image][tatsu_animated_heading text= "4. È ottimizzata per tutti i dispositivi" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "ByGdUG7u_"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "S1O2IzQdd"]
Le homepage di oggi dovrebbero essere ottimizzate per i dispositivi mobili e desktop. Maggior parte di tutto il traffico web proviene da un dispositivo portatile come un telefono cellulare o un tablet, il 90% dei siti web delle piccole imprese non viene progettato per le dimensioni dello schermo di questi dispositivi.
Questo è un errore costoso. Infatti, non avere un sito "responsive" o ottimizzato per questi dispositivi può allontanare i clienti, ostacolare il tuo posizionamento nei motori di ricerca e sembrare poco professionale.
Ecco cosa rende un design responsive:
- Si adatta a qualsiasi dimensione dello schermo
- Si carica rapidamente
- Immagini e layout flessibili
Per sapere se il sito della tua piccola impresa è responsive o ha bisogno di un po' di lavoro, usa lo strumento di test di Google per il mobile-friendly (Test di ottimizzazione mobile - Google Search Console ). Tutto quello che devi fare è inserire il tuo URL e Google valuterà la compatibilità del tuo sito web con i dispositivi mobile. E classifica tutto, dalla velocità della pagina mobile alla capacità dello schermo.
Ricorda: solo perché la tua homepage sembra eccellente su un computer desktop, potrebbe non comunicare efficacemente su un dispositivo mobile più piccolo, né si caricherà rapidamente. Per progettare in modo responsive, assicurati che le tue risorse visive (immagini, sfondo, ecc.) possano scalare su qualsiasi dispositivo.
[/tatsu_text][tatsu_animated_heading text= "5. Inizia il funnel di vendita" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "SkV5vfQ_O"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "B173wz7Od"]
Ogni homepage ben fatta ha l'obiettivo di attirare i clienti attraverso il funnel di vendita. Che si tratti di implementare una pagina pop-up, un modulo per i lead o un pulsante di call-to-action, una grande homepage è un motore di generazione di lead. Ancora una volta, la chiave è rendere facile per i visitatori intraprendere un'azione sulla tua pagina. Dire a loro cosa fare dopo, in modo che non vengano sopraffatti o si perdano.
[/tatsu_text][tatsu_animated_heading text= "6. Cambia frequentemente la tua homepage" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "r1fpPMmOO"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "r16yuzQOO"]
Una volta i siti web erano un'impresa da impostare, il sito web di oggi è noto per essere fluido. Le migliori homepage là fuori si evolvono in base alle esigenze dei tuoi visitatori.
I professionisti del settore, come i web designers, cambiano le loro homepage frequentemente; guardando i dati del sito web, i test di ottimizzazione della conversione e riempiendo le lacune per riflettere le domande e le risposte comuni dei loro visitatori.
Un layout di homepage dovrebbe anticipare le esigenze degli utenti e dovrebbe anche rispondere a "Dove arriveranno i miei visitatori domani?" e "Cosa vogliono sapere i miei visitatori?".
Suggerimento: Accompagna i visitatori in un viaggio e costruisci una relazione offrendo informazioni rilevanti in cambio della loro email. (Ma non aspettarti che prenotino/acquistino alla prima visita).
[/tatsu_text][tatsu_animated_heading text= "7. Homepage con tanto appeal" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HkQfdMmdd"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "H1hNOfQ_u"]
Una bella homepage ha un impatto significativo sui visitatori. Mostra professionalità e può impressionare qualcuno abbastanza per fare il prossimo passo, sia che si tratti di un acquisto o di optare per ulteriori comunicazioni dalla tua azienda.
[/tatsu_text][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "BJFWccIud"]
Le prime impressioni sono legate al design per il 94%
[/tatsu_text][tatsu_image image= "https://irbox.it/wp-content/uploads/2021/05/1.3.jpg" image_varying_size_src= "" alignment= "center" border_width= "0" border_color= "" id= "534" size= "full" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "https://www.vecteezy.com/free-vector/testimonials" new_tab= "0" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' key= "BJKrdM7OO"][/tatsu_image][tatsu_animated_heading text= "8. Riprova sociale" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "rkXKuzXOd"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "B1_hdG7__"]
Quando le persone visitano la tua homepage per la prima volta, stanno cercando alcuni segni che indicano che possono fidarsi di te. Non è che si stupiscono dei tuoi servizi e comprano subito da te. Fanno tutto il possibile per assicurarsi che le tue affermazioni siano valide e che possono fidarsi di te.
La tua homepage gioca un ruolo importante nel costruire la fiducia con i tuoi visitatori. Devi usare la riprova sociale nella tua homepage per guadagnare la fiducia delle persone. Ecco la lista delle pratiche più popolari:
[/tatsu_text][services line_color= "rgba(108,23,255,1)" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "rJGp1tzXOu"][service icon= "icon-trophy" icon_size= "small" icon_bg_color= "rgba(108,23,255,1)" icon_color= '{"id":"palette:1","color":"#ffffff"}' icon_hover_bg_color= "" icon_hover_color= "" content_bg_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "SkaJFMXu_"]
Casi di studio: Potresti menzionare la storia dettagliata di successo dei tuoi clienti.
[/service][service icon= "icon-icon_group" icon_size= "small" icon_bg_color= "rgba(108,23,255,1)" icon_color= '{"id":"palette:1","color":"#ffffff"}' icon_hover_bg_color= "" icon_hover_color= "" content_bg_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "BJgaJtM7ud"]
Testimonianze: Potresti usare le raccomandazioni dei tuoi clienti soddisfatti.
[/service][service icon= "icon-icon_comment_alt" icon_size= "small" icon_bg_color= "rgba(108,23,255,1)" icon_color= '{"id":"palette:1","color":"#ffffff"}' icon_hover_bg_color= "" icon_hover_color= "" content_bg_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HkWpJtGXdO"]
Recensioni: Potresti presentare recensioni reali dei tuoi prodotti o servizi da fonti fidate.
[/service][service icon= "icon-facebook2" icon_size= "small" icon_bg_color= "rgba(108,23,255,1)" icon_color= '{"id":"palette:1","color":"#ffffff"}' icon_hover_bg_color= "" icon_hover_color= "" content_bg_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "BkV49zmOO"]
Social Media: Mostrare quanti followers hai o mostrare i loro post positivi su di te è un buon modo per guadagnare la fiducia dei nuovi visitatori.
[/service][service icon= "icon-icon_id-2" icon_size= "small" icon_bg_color= "rgba(108,23,255,1)" icon_color= '{"id":"palette:1","color":"#ffffff"}' icon_hover_bg_color= "" icon_hover_color= "" content_bg_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "SyWSjzQOO"]
Icone: Puoi mostrare i loghi delle aziende con cui hai lavorato o le pubblicazioni su cui sei stato presentato.
[/service][service icon= "icon-icon_easel" icon_size= "small" icon_bg_color= "rgba(108,23,255,1)" icon_color= '{"id":"palette:1","color":"#ffffff"}' icon_hover_bg_color= "" icon_hover_color= "" content_bg_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "BkG3oMXO_"]
Dati/Numeri: Se hai lavorato con un numero impressionante di persone o hai ottenuto risultati impressionanti con loro, puoi mostrare i dati/numeri sulla tua homepage.
[/service][/services][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "ByV7nMm_d"]
Ottenere uno di questi elementi di riprova sociale per il tuo sito web è più facile a dirsi che a farsi. Hai bisogno di avere un track record davvero buono in modo da poter ottenere testimonianze dai tuoi clienti. Raggiungi i tuoi clienti precedenti e chiedi delle testimonianze. Dovresti anche raggiungere attivamente i blogger e chiedere loro di recensire i tuoi prodotti nei loro articoli. Potresti offrire loro una prova gratuita del tuo software e un link di affiliazione per essere presenti nei loro articoli di recensione. Puoi poi prendere un estratto dall'articolo e metterlo in evidenza sulla tua homepage come una recensione positiva. Se stai usando WordPress, i temi premium di WordPress hanno la sezione testimonial di default.
L'utilizzo di uno qualsiasi di questi elementi sulla tua homepage aiuta a creare fiducia verso di te e verso i tuoi servizi/prodotti.
Per aumentare le conversioni della tua homepage, è necessario attenersi ad alcune delle pratiche di ottimizzazione della homepage collaudate e raccomandate dalla maggior parte degli esperti. Puoi anche fare un test A/B su alcuni di questi elementi e vedere cosa funziona meglio per te. Alcune di queste pratiche sono l'utilizzo delle CTA (Call to Action) principali, l'utilizzo di vari tipi di CTA per catturare l’attenzione di target diversi e l'utilizzo della riprova sociale sulla tua homepage per costruire fiducia con clienti.
Oltre alla bellezza, una grande homepage presta attenzione alle tendenze attuali del design della homepage.
Quindi, ... dall'estetica del design all'esperienza dell'utente, ecco 13 tendenze di design della homepage che ti aiuteranno ad aumentare il coinvolgimento della tua homepage per attirare ulteriormente i visitatori nel tuo sito web.
[/tatsu_text][tatsu_inline_text max_width= '{"d":"100","m":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' bg_color= "" typography= '{"d":""}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "BJGfazmdO"]
Top 13 tendenze di design della homepage per aiutarti a distinguerti dalla massa:
[/tatsu_inline_text][tatsu_animated_heading text= "1. Attira l'attenzione con immagini sovradimensionate" tag_to_use= "h6" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "Bk4N6fQud"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "Hkfd6M7_u"]
Il tuo sito web ha solo pochi secondi per catturare l’attenzione dei tuoi visitatori. Per questo motivo, il tuo sito web deve lavorare velocemente per catturare e comunicare.
Usa le immagini originali (e sovradimensionate).
Puoi usare fotografie direttamente collegate al tuo business, sfondi vettoriali, opere d'arte illustrate e persino video.
E mentre in passato i web designer evitavano i design below-the-fold, questo non è più il caso, dato che la maggior parte delle persone sanno intrinsecamente di scorrere verso il basso in una pagina web per trovare il contenuto che stanno cercando. Ma in questo caso è abbastanza discrezionale, è utile fare qualche test A/B se possibile.
Un'immagine accattivante può trasmettere un messaggio e una grande storia del brand. Lascia che i tuoi spunti visivi rispondano a "cosa c'è per me" e "di cosa si occupa questo business" nel design della tua homepage.
Quindi, come si fa a creare un'immagine che favorisca le potenziali conversioni?
Ecco la check list per la selezione delle immagini:
[/tatsu_text][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "rJx_RfXOd"]
- Rilevanza delle parole chiave: L'immagine visualizza la parola chiave della tua homepage?
- Chiarezza dello scopo: La tua immagine chiarisce il punto primario della tua homepage e del tuo sito web?
[/tatsu_text][tatsu_lists style= "icon" circled= "0" icon_bg= "" icon_color= "rgba(34,147,215,1)" timeline= "0" timeline_color= "" list_item_margin= '{"d":"12"}' vertical_alignment= "center" custom_border= "0" border= '{"d":"0"}' border_color= "" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' outer_border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "SkEYRAG7du"][tatsu_list icon= "icon-icon_box-checked" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "H1K0RGQud"]
Rilevanza delle parole chiave: L'immagine visualizza la parola chiave della tua homepage?
[/tatsu_list][tatsu_list icon= "icon-icon_box-checked" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "r1gKRAz7dd"]
Chiarezza dello scopo: La tua immagine chiarisce il punto primario della tua homepage e del tuo sito web?
[/tatsu_list][tatsu_list icon= "icon-icon_box-checked" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HyZFR0GmdO"]
Sostegno al design: La tua immagine supporta il flusso verso la call to action?
[/tatsu_list][tatsu_list icon= "icon-icon_box-checked" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HJMFCRMQ__"]
Autenticità: La tua immagine rappresenta i valori fondamentali del tuo brand e ciò che rappresenta?
[/tatsu_list][tatsu_list icon= "icon-icon_box-checked" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "S17KCRGXuu"]
Valore aggiunto: L’immagine dimostra i benefici del tuo business?
[/tatsu_list][tatsu_list icon= "icon-icon_box-checked" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "Hke8lQmuO"]
Emozione desiderata: La tua immagine rappresenta le emozioni che ti aiuteranno a scatenare l'azione desiderata?
[/tatsu_list][tatsu_list icon= "icon-icon_box-checked" circled= "0" icon_bg= "" icon_color= '{"id":"swatch:ryvxpHqZQ","color":{"angle":"270","colorPositions":{"0":"rgba(82,142,255,1)","100":"rgba(87,45,237,1)"}}}' border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "BJ2Jb7m_u"]
Il cliente come eroe: le immagini ritraggono il tuo cliente che usa il prodotto o il servizio?
[/tatsu_list][/tatsu_lists][tatsu_image image= "https://irbox.it/wp-content/uploads/2021/05/1.4..gif" image_varying_size_src= "" alignment= "center" border_width= "0" border_color= "" id= "542" size= "full" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "" new_tab= "0" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' key= "S1_MZ77ud"][/tatsu_image][tatsu_animated_heading text= "2. Incorporare lo spazio negativo" tag_to_use= "h6" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "Hy_vZQXdu"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "By9K-7X_u"]
In linea con le tendenze generali del design del sito web del 2021, la semplicità nel design della tua homepage continuerà ad essere importante.
Infatti, tutti i layout e le sezioni della tua homepage dovrebbero essere ordinati e semplici. Il minimalismo aiuta a focalizzare il messaggio e rafforza un senso di professionalità. Meno elementi ci sono in una homepage, meno il tuo pubblico deve pensare. Quando una homepage è progettata correttamente, rivelerà ai suoi visitatori l'esatta informazione di cui hanno bisogno. Incorporare lo spazio negativo dà respiro agli elementi della tua homepage e aiuta i visitatori ad assimilare più facilmente le informazioni.
Il design minimalista della homepage ha anche un vantaggio tecnico: migliora la velocità di caricamento della pagina. Una rapida velocità di caricamento della pagina è cruciale perché ha un impatto sulle conversioni e sulle classifiche di ricerca organica. Per massimizzare l'opportunità di un tempo di caricamento rapido, fai quanto segue:
Usare i CSS per creare animazioni ed elementi di design.
[/tatsu_text][tatsu_animated_heading text= "3. Usare un design piatto: spazi aperti, colori audaci e illustrazioni semplici si caricano più velocemente e occupano meno spazio" tag_to_use= "h6" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "ryN2W7Q_O"][/tatsu_animated_heading][tatsu_animated_heading text= "4. Copiare la semplicità " tag_to_use= "h6" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "rkgAb7m_d"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "SkWbGX7__"]
Il tuo obiettivo principale è quello di creare una attrazione verso il tuo brand in pochi secondi sulla tua homepage.
[/tatsu_text][tatsu_inline_text max_width= '{"d":"100","m":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' bg_color= "" typography= '{"d":""}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "H1L7fQX__"]
Come porta d'accesso al tuo brand, la tua homepage dovrebbe ritrarre un'immagine chiara.
[/tatsu_inline_text][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "HkpEGXXO_"]
(E, per non parlare del fatto che l'atmosfera dovrebbe essere coerente in ogni risorsa di marketing che avete). Per mantenere la copia coerente, chiara e unica per il tuo brand sulla tua homepage, considera quanto segue:
- Eliminare le sciocchezze: Molte homepage sono cariche di aggettivi abusati (descrittori) e gergo industriale che i tuoi visitatori non capiranno mai. Quando progetti la tua homepage, attieniti alle parole che contano. Verbi attivi, numeri e punti di forza sulla tua azienda, sono alcuni degli esempi di homepage che funzionano.
- Numero di parole: “Less is More” in una homepage, ma il tuo numero di parole non dovrebbe essere scarno; punta a 300 parole. Il conteggio delle parole dovrebbe essere più alto man mano che ci si immerge più in profondità nel tuo sito web. Scegli le tue parole con cura. Privilegia prima le parole focalizzate sulle parole chiave, poi mescola verbi e sostantivi d'impatto che descrivono meglio il tuo prodotto o servizio.
- Persuadere: Elimina il tono neutro dal testo della tua homepage. Le parole che scegli dovrebbero avere un impatto emotivo sui tuoi visitatori.
- Messaggio: Mantieni coerente la tua homepage con la comunicazione che usi sugli altri canali.
- Risorse visive: Mantenere immagini coerenti è la chiave. Le tue risorse visive dovrebbero rispecchiare il tuo testo. La semplicità è la cosa migliore.
- Tono: Mantenete sempre una voce e un tono coerenti; la personalità del tuo brand dovrebbe trasparire, anche sulla tua homepage.
Usa sistemi di design per mantenere la tipografia uniforme e i pulsanti del tuo sito web coerenti. Questo aiuta i visitatori a capire cosa aspettarsi mentre si avventurano nel tuo sito web.
[/tatsu_text][tatsu_image image= "https://irbox.it/wp-content/uploads/2021/05/1.5.jpg" image_varying_size_src= "" alignment= "center" border_width= "0" border_color= "" id= "547" size= "full" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "http://www.futureofcarsharing.com/" new_tab= "1" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' key= "H1Mxm7m_d"][/tatsu_image][tatsu_animated_heading text= "5. Combinazioni di colori tenui e di base" tag_to_use= "h6" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HJfBm77u_"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "SkhdQXm__"]
La combinazione di colori della tua homepage curerà uno specifico umore e personalità. Scegliere i colori giusti è importante quanto il testo della tua homepage. Il nero, il bianco e il grigio possono aiutare a facilitare un atteggiamento positivo.
Inizia a considerare le tendenze di colore del sito web 2021. Che ci crediate o no, le combinazioni di colori tenui e di base sono di tendenza.
Il nero, il bianco e il grigio possono aiutare a facilitare uno stato d'animo.
Le combinazioni di colori tenui sono efficaci per alcuni motivi:
- Enfatizza le texture e le forme mentre attira l'attenzione sul tuo messaggio.
- È di classe (e un po' artistico!) se questo è il tuo stile.
- Offre un modo facile per mantenere gli standard del brand perché la tavolozza dei colori è semplice.
Se hai già un sito web, puoi improvvisare e attenuare il design della tua homepage convertendo la palette di colori in nero, bianco, grigio e toni neutri.
[/tatsu_text][tatsu_animated_heading text= "6. Animazione e micro-interazioni " tag_to_use= "h6" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HJ1k47Xu_"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "HyfXN7mOO"]
Con due miliardi di siti sul web, la tua concorrenza per essere in cima alla mente è feroce. Il tuo compito è quello di catturare rapidamente i visitatori del sito. E per farlo, uno dei modi è attraverso il movimento. Il movimento può essere creato attraverso micro-interazioni come le GIFS, i rintocchi, le animazioni, gli scroll, le marchette e persino i pop-up!
Il movimento attraverso le micro-interazioni crea un evento sulla tua homepage che è invitante e coinvolgente. Sorprendono l'utente e creano un evento che è invitante e umano.
"Il movimento è il percorso visivo che uno spettatore segue quando visualizza una composizione. Con un movimento adeguato, una composizione può creare una narrazione e fornire un'esperienza utente di alta qualità", dice Hubspot. In precedenza il movimento era reso possibile da oggetti statici come linee, forme e colori. Oggi l'animazione e le micro-interazioni lo rendono possibile.
Ci sono alcune ragioni per cui il movimento sulla tua homepage è importante:
- Crea momenti di piacere per l'utente mentre rafforza un messaggio sottile
- Può essere usato come una metafora visiva per rafforzare il messaggio generale del brand
- Può segnalare all'utente di fare i passi successivi - cliccare su un pulsante di call-to-action o avventurarsi ulteriormente nel tuo sito web
- Aumenta il senso di interattività, che aiuta a coinvolgere i visitatori
[/tatsu_text][tatsu_animated_heading text= "7. Diversità" tag_to_use= "h6" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HyF1Bm7u_"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "BymZS77dd"]
La diversità dei soggetti nella tua homepage è un'altra grande tendenza. Vedrai che le pubblicità televisive si stanno finalmente aggiornando per riflettere il giusto pool di persone. Le homepage non sono diverse. La diversità del colore della pelle, del background e della razza sono cruciali sul tuo sito web. Non è eccitante vedere che I brand stanno finalmente modificando il loro marketing per riflettere la popolazione reale del mondo?
Quindi, come mettere in pratica questa tendenza di design? Usate una gamma diversificata nella fotografia e nelle illustrazioni.
[/tatsu_text][tatsu_animated_heading text= "8. Layout unici" tag_to_use= "h6" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "Sy7YSQXuO"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "ByVsSQQOO"]
Le griglie destrutturate e spezzate sono super popolari quando si tratta di design della moda e di homepage design.
Per pensare fuori dal layout convenzionale della griglia della homepage, fai quanto segue:
- Variare le dimensioni dei box
- Mostra il tuo modello di navigazione in modo unico (verticale, magari!)
- Cambia la tua immagine principale o il posizionamento del video.
- Cambiare il trattamento dei caratteri
- Modificare altri elementi per organizzare e dare priorità al contenuto della homepage
- Usare un layout da rivista
[/tatsu_text][tatsu_animated_heading text= "9. Favicons" tag_to_use= "h6" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HJsbLX7OO"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "B1vXUQX_u"]
Hai mai notato la piccola icona sulla scheda del browser?
Le favicon non fanno tecnicamente parte del design della tua homepage, ma come la tua homepage, sono parte di una prima impressione. Una grande tendenza di quest'anno nel design della homepage è diventare creativi con le favicon.
In un mondo in cui le persone hanno spesso più schede aperte nel loro browser, potrebbe essere l'unico pezzo del tuo brand visibile al momento. Quindi falla contare.
[/tatsu_text][tatsu_animated_heading text= "10. Font sovradimensionati e in grassetto" tag_to_use= "h1" anime_type= "anime_split_word" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "ryjEImm_d"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "r1y9L7X__"]
I font in grassetto, oversize e sans-serif sono più popolari che mai e stanno addirittura sostituendo completamente gli elementi dell'homepage. Dai loghi con i nomi dei brand alle intestazioni delle homepage dove il testo domina lo schermo, la tipografia sovradimensionata può fare colpo.
[/tatsu_text][tatsu_animated_heading text= "11. Call To Action" tag_to_use= "h6" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HyL387QOd"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "rkfCIQQ__"]
Se stai vendendo qualcosa, raccogliendo email, o facendo iscrivere qualcuno alla tua newsletter, le CTA sono necessarie.
Non nascondere ciò che stai offrendo in una pagina secondaria del tuo sito web. Invece, pensa a modi creativi per attirare i visitatori usando una corretta CTA. Sia che tu modifichi la copia del tuo pulsante per renderlo un po' più creativo o sfacciato, o che crei un'animazione, le tue vendite ne raccoglieranno i frutti.
Assicurati di presentare la CTA in luoghi in cui pensi che il tuo visitatore vorrebbe intraprendere ulteriori azioni. E non esagerare con troppe solo sulla tua homepage.
Le call to action sono uno degli elementi più importanti di una home page: I pulsanti con testi che ti chiedono di fare un'azione specifica come "iscriviti", "leggi di più", "compra ora" o qualsiasi altra azione. Devi usare queste CTA per spingere le persone a fare l'azione che desideri di più dai tuoi visitatori. Se hai bisogno degli indirizzi email dei tuoi visitatori per l'email marketing, è una buona idea usare un pulsante "iscriviti" per chiedere il loro indirizzo email. Se vuoi che leggano prima il tuo blog, è bene usare un pulsante CTA "read more".
Ora che conosci l'importanza delle CTA in una home page, è una buona idea considerare se dovresti includere solo una CTA specifica con una sola intenzione nella tua homepage, o se dovresti includere varie CTA con obiettivi diversi. Ha senso che l'uso di una sola CTA renderà il processo decisionale molto più facile per i tuoi visitatori.
Alcuni marketer potrebbero non essere d'accordo con le CTA unilaterali sulla homepage perché attirerebbe solo una parte dei visitatori. Le persone si imbattono nel tuo sito web con intenzioni diverse. Potrebbero cercare di recensire i tuoi prodotti, potrebbero tendere a leggere il tuo blog, o potrebbero aver fatto le loro ricerche e visitare il tuo sito solo per comprare subito. In questo caso, ha perfettamente senso includere alcune CTA con diverse intenzioni per assicurarsi di suscitare qualche azione da tutti i segmenti di visitatori.
Una CTA efficace ha bisogno di avere certe caratteristiche tra cui:
- Usare frasi d'azione
- Parlare in prima persona
- Creare un senso di urgenza
- Eliminare i blocchi o l'attrito
- Distinguersi e essere facile da trovare
[/tatsu_text][tatsu_image image= "https://irbox.it/wp-content/uploads/2021/05/1.6.jpg" image_varying_size_src= "" alignment= "center" border_width= "0" border_color= "" id= "553" size= "full" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "" new_tab= "0" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' key= "BkGsD7XOu"][/tatsu_image][tatsu_animated_heading text= "12. Colori sgargianti" tag_to_use= "h6" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "Bk70PXm_O"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "rkWlO7mdd"]
I font enfatizzati da palette di colori vivaci e pop-art, giocando sulla nostalgia e rompendo le tradizioni prestabilite del web design saranno enormi nel 2021.
Questa tendenza rompe la stagnazione visiva dei font tradizionali. Aggiunge carattere e personalità mentre rafforza anche la credibilità di un brand giocando con la nostalgia degli anni '60 e dei tempi più retro.
[/tatsu_text][tatsu_animated_heading text= "13. Elementi organici e scarabocchi" tag_to_use= "h6" anime_type= "anime_split_letter" text_color= "rgba(108,23,255,1)" line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "SJcbOQ7OO"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "ryTQummdu"]
Con tutto quello che succede nel mondo, molti consumatori vogliono vedere il lato umano di un brand. Elementi organici e scarabocchi aiutano a raggiungere questo obiettivo. Illustrazioni disegnate a mano, icone e lettere mostrano umanità e un tocco personale. Questa tendenza mostra l'autenticità di un business, la semplicità, quindi è una tendenza che sicuramente rimarrà in giro per un po' di tempo.
Dai font retrò ai layout minimalisti, abbiamo condiviso le principali tendenze di design della homepage del 2021. Essere di tendenza può essere ottimo per il tuo Brand. Ma assicurati che sia appropriato: prova quali sono le tendenze di design del 2021 che funzionano meglio per il tuo business e lascia che i risultati parlino da soli.
[/tatsu_text][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "HyOqc9UuO"]
In questo articolo ti ho indicato i principi essenziali per la costruzione o ri-costruzione della tua homepage.
Sei rimasto con qualche dubbio sulla parte grafica?
Come sempre apprezzo molto il tuo feedback che puoi lasciarmi nei commenti qui sotto. Se hai bisogno di un consiglio sul design del tuo sito non esitare a contattarmi qui
Un saluto
Irina
[/tatsu_text][/tatsu_column][/tatsu_row][/tatsu_section]
Leave a Reply